JavaScript的__proto__、prototype和继承
JavaScript也是可以“继承”的!
各位看官或是好奇,或是一知半解。什么是prototype,__proto__,constructor、哪种继承方式好。今天就在这交流交流。
什么是prototype,__proto__,constructor
https://blog.csdn.net/cc18868876837/article/details/81211729 (尊重原作者,这是篇超级好的文章,一定要点进去细细研读)
上面文章已经讲的很明白了,最后对文章总结再解释一下
第一点主要强调,我们拿到一个对象,主要看它什么,因为JavaScript中一切都是对象,所以在理解的时候很容易因为它有其他变量也混淆,所以我们研究一个对象,首先要确定我们的目标是什么,如果目标是对象,则抓住__proto__和constructor属性,如果目标是函数则抓住prototype属性,这样才能快速找到自己想要的东西解决问题。
第2,3,4点是关于哪种继承方式好的关键,一定要弄懂,下面再解释一下new关键词做了什么(没准你不懂上面文章写的,看懂我的例子)。
new关键词做了什么
//例如
var child = new Parent(); //上面这句代码就等于下面三句
var child = {};
child.__proto__ = Parent.prototype;
Parent.call(child);
咳咳,就跟教育孩子一样,孩子出生是张白纸(var child = {}),然后继承了父母的一些行为(就是方法),例如怎么说话啊,喜欢吃什么啊(child.__proto__ = Parent.prototype;),最后得到父母的一些人生经验,就是复制了属性变量(Parent.call(child))。
这里需要注意,孩子是不能生孩子的,即
var child2 = new child()
绝对报错的,对象是对象,并不是函数,也不会变成函数。
哪种继承方式好
继承能够代码复用,能让逻辑更清晰,所以是很有必要的,那怎么样继承效果最好呢
https://www.cnblogs.com/humin/p/4556820.html#(尊重原作者,这是篇超级好的文章,一定要点进去细细研读,这话好像有点熟悉)
推荐给大家一个方法,打开谷歌浏览器,按F12,在里面可以进行简单的练习
文章最好从第一个继承开始,就自己动手模拟一下,看看变量的__proto__和prototype到底指什么
而且从第一个继承方法演变到最完美的一个,这个思考过程是十分重要的。
我来再解释一下最完美的继承模式:寄生组合继承
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
(function(){
// 创建一个没有实例方法的类
var Super = function(){};
Super.prototype = Animal.prototype;
//将实例作为子类的原型
Cat.prototype = new Super();
})(); // Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true 感谢 @bluedrink 提醒,该实现没有修复constructor。 Cat.prototype.constructor = Cat; // 需要修复下构造函数
第7-10行的代码为什么这样做
通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点 这句话什么意思
回到刚才对new的解释,假设如组合5:组合继承一样
function Cat(name){
Animal.call(this);
this.name = name || 'Tom';
}
Cat.prototype = new Animal(); 第5行代码相当于:
Cat.prototype = {}
Cat.prototype.__proto__ = Animal.prototype
Animal.call(Cat.prototype) //这一步是多余的并不需要 所以 var Super = function(){}; 一个空方法来代替,因为只需要 Cat.prototype.__proto__ = Animal.prototype 就可以了
而现在Super.prototype = Animal.prototype 因此这个方法是最完美的
以上就是本次内容的分享,感谢各位老哥的阅读
JavaScript的__proto__、prototype和继承的更多相关文章
- 谈谈javascript中的prototype与继承
谈谈javascript中的prototype与继承 今天想谈谈javascript中的prototype. 通常来说,javascript中的对象就是一个指向prototype的指针和一个自身的属性 ...
- Javascript中的prototype与继承
通常来说,javascript中的对象就是一个指向prototype的指针和一个自身的属性列表.javascript创建对象时采用了写时复制的理念. 只有构造器才具有prototype属性,原型链继承 ...
- 再说javascript 的__proto__ 和prototype 属性
过了一段时间,没写 原生的 javascript 的了,感觉天天在用框架写代码,框架写代码完全限定死了你所需要思考的东西,只是在处理一些业务逻辑,真正的代码 都感觉不会写了. 突然发现,框架用的不熟悉 ...
- JavaScript中的prototype和__proto__细致解析
最近在学js,体会了一点点它的灵活性.对于初学者的我,总是被它的灵活感到晕头转向,最近发现了一点东西想与大家分享. JavaScript中的prototype和_proto_: 我们先了解一点js中的 ...
- Javascript深入__proto__和prototype的区别和联系
有一个一个装逼的同事,写了一段代码 function a(){} a.__proto__.__proto__.__proto__ 然后问我,下面这个玩意a.__proto__.__proto__.__ ...
- JavaScript 面向对象 原型(prototype) 继承
1.对象的概念:无需属性的集合,属性可以为数值,对象或函数,ECMAscript中没有类的概念,这点是javascript与其他面向对象(OO)语言不同的地方. //创建一个自定义对象 var per ...
- JavaScript原型链:prototype与__proto__
title: 'JavaScript原型链:prototype与__proto__' toc: false date: 2018-09-04 11:16:54 主要看了这一篇,讲解的很清晰,最主要的一 ...
- 【转】JavaScript中的原型和继承
请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...
- javascript原型对象prototype
“我们创建的每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法.” 引用类型才具有prototype属性 ...
- JavaScript中的类式继承和原型式继承
最近在看<JavaScript设计模式>这本书,虽然内容比较晦涩,但是细品才发现此书内容的强大.刚看完第四章--继承,来做下笔记. 书中介绍了三种继承方式,类式继承.原型式继承和掺元类继承 ...
随机推荐
- Android Studio 提高开发效率的插件
好久没有更新博客了,最近搞个listview搞得半死不活的,心累~~ 今天带来的是Android Studio插件的整理,全是我已经安装使用的,写这篇博文的目的也是因为我怕我自己给忘记怎么用(尴尬) ...
- 用python执行Linux命令
例1:在python中包装ls命令 #!/usr/bin/env python #python wapper for the ls command import subprocess subproce ...
- PlayJava Day004
今日所学: /* 2019.08.19开始学习,此为补档. */ JDK 1.6:byte , int , short , char , enum JDK 1.7:byte , int , short ...
- 合格的施工图是如何绘制的?必须要get这四点,大多数人都不知道
对于工程设计师来说加班通宵赶图改图是常有的事情,如何绘制一套合格的施工图?这是很多工程设计师都会问的问题. 绘制一套合格的施工图,你需要注意以下四点: 一.明确施工图的作用和目的 1. 工程设计的细化 ...
- layui 学习笔记一:layui table 查询、新增、编辑、删除
一.table数据的呈现(对应查询) 页面代码: @{ ViewBag.Title = "TableGrid"; } @section styles{ <link href= ...
- 区块链社交APP协议分析预告
2017年,比特币的火热,直接导致了代币市场的繁荣: 2018年,作为信用体系的未来解决方案,区块链引发了互联网原住民的淘金热. 作为风口上的引流神器,区块链技术与社交网络结合起来,产生了一系列区块链 ...
- 【Servlet】JavaWeb应用的执行流程
Tomcat与Servlet简介 Tomcat Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache.S ...
- 软工个人项目(Java实现)
一. Github地址: https://github.com/RuiBingo/PersonalWork 二.个人PSP表格: PSP2.1 PSP阶段 预估耗时(分钟) 实际耗时(分钟) Plan ...
- Django—常见问题解决
让Django项目运行允许外部访问 1.将python manage.py runserver 改为 python manage.py runserver 0.0.0.0:80 或者 python m ...
- 如何将MagicaVoxel模型导入UE4中(1)
前言 当初在选择自己项目的美术风格时,由于自己的美术基础实在是太差,所以选择了体素风格来构建(其实还是MagicaVoxel的建模操作很容易上手),但是将自己千辛万苦做好的模型导入至项目中时,出现了这 ...