1.原型链继承

2.constructor stealing(构造借用)

3.组合继承

js中的原型链继承,运用的js原型链中的__proto__。

function Super(){
this.set = "set";
}
Super.prototype.age = 10; function Sub(){
this.name = 100;
}
Sub.prototype = new Super();
var subs = new Sub();
console.log(subs.age);
console.log(subs.name);
console.log(subs.set);

解释1:

Sub构造继承了Super构造的原型对象和构造属性。Sub.prototype 右边赋值了new Super();获取了new Super(),一个对象,这个对象的结构是这样的

那么subs这个对象在获取属性或者方法的时候,想要获取age的时候,就会去Sub的构造里面查找,没有找到,继续去prototype里面去查找,也没有这个属性。

但是在 /原型链理解(1) 里面我们已经知道了,(一个对象拥有__proto__拥有的所有属性(会根据__proto__指针向上查询)),subs会继续去Sub.prototype拥有的__proto__指向的Super.prototype里面查询,那么这个age属性的值就是10,

这个值其实是在Super的原型对象里,引用。

解释2:

subs是如何获取到set这个值的呢?subs先从Sub的构造里面找,找不到就去Sub.prototype里面找 Sub.prototype = { set : "set", __proto__ },就得到了这个set值,已经是一个实例化的值( new Super()),并不是引用。 所以只要一个构造的原型对象

是另一个构造的对象,它就继承了另一个构造的所有属性。一层一层向上获取值,这个继承就可以是无限的。

主要是其中对象的 __proto__ 在起中间作用。

需要注意的是,Sub构造在继承Super构造的属性时,会去生成一个全新的值,并不是引用。  Sub.prototype = { set : "set", __proto__ },这个时候 任何从子构造Sub创建的对象的set都是从prototype里面引用获取的。

如果这个值是引用类型,那么,值一旦被修改,Sub.prototype.set这个值就被修改了。再创建其他对象,这个set值是被修改的值。而且构造里面的值全都一样,一次创建,处处相同。那么想要不同属性值的构造值,必须重写一个构造

,无法使用继承实现,即使方法相同。所以有constructor stealing(构造 偷窃)借用,来让子构造初始化不同的值。

最后画一下原型链继承的图,它是如何一层层向上查询的

解释3:subs.constructor 其实是Super,因为如果Sub.prototype没有被重写,subs.constructor指向的是Sub构造函数(prototype自带的属性),但是它被new Super()赋值以后,它的constructor就会去从Super实例的对象去寻找。实例的对象会从__proto__里面查询,

在它的原型对象里面找到这个constructor指针,指向Super。上面的图上面可以看出来。所以subs的构造函数其实是Super

js原型链理解(2)--原型链继承的更多相关文章

  1. js原型链理解(3)--构造借用继承

    构造借用(constructor strealing) 1.为什么已经存在原型链继承还要去使用构造借用 首先看一下这个例子 function Super(){ this.sets = [0,1,2]; ...

  2. 通过JavaScript原型链理解基于原型的编程

    零.此文动机 用了一段时间的Lua,用惯了Java C++等有Class关键字的语言,一直对Lua的中的面向对象技术感到费解,一个开源的objectlua更是看了n遍也没理解其中的原理,直到看到了Pr ...

  3. 深入理解javascript原型和闭包系列

    从下面目录中可以看到,本系列有16篇文章,外加两篇后补的,一共18篇文章.写了半个月,从9月17号开始写的.每篇文章更新时,读者的反馈还是可以的,虽然不至于上头条,但是也算是中规中矩,有看的人,也有评 ...

  4. 深入理解javascript原型和闭包 (转)

    该教程绕开了javascript的一些基本的语法知识,直接讲解javascript中最难理解的两个部分,也是和其他主流面向对象语言区别最大的两个部分--原型和闭包,当然,肯定少不了原型链和作用域链.帮 ...

  5. 深入理解javascript原型和闭包(完结)

    原文链接:http://www.cnblogs.com/wangfupeng1988/p/3977924.html 说明: 该教程绕开了javascript的一些基本的语法知识,直接讲解javascr ...

  6. 深入理解javascript原型和闭包

    目录: 深入理解javascript原型和闭包(1)——一切都是对象 深入理解javascript原型和闭包(2)——函数和对象的关系 深入理解javascript原型和闭包(3)——prototyp ...

  7. 深入理解javascript原型和闭包(转)

    深入理解javascript原型和闭包(完结)   说明: 该教程绕开了javascript的一些基本的语法知识,直接讲解javascript中最难理解的两个部分,也是和其他主流面向对象语言区别最大的 ...

  8. 转:深入理解javascript原型和闭包系列

    转自:深入理解javascript原型和闭包系列 从下面目录中可以看到,本系列有16篇文章,外加两篇后补的,一共18篇文章.写了半个月,从9月17号开始写的.每篇文章更新时,读者的反馈还是可以的,虽然 ...

  9. 【前端知识体系-JS相关】深入理解JavaScript原型(继承)和原型链

    1. Javascript继承 1.1 原型链继承 function Parent() { this.name = 'zhangsan'; this.children = ['A', 'B', 'C' ...

随机推荐

  1. vagrant 添加带版本号的 box

    众所周知,vagrant添加box的时候要从外网下载,那速度...(说多了都是泪),所以只好用下载工具下载到本地之后再添加. 如何搭建 homestead:https://laravelacademy ...

  2. HTML相关知识点(3)

    文档流: 浮动:用于布局 给三个浮动的盒子加上一个父元素并设置宽高,以免影响其他的盒子和内容 margin:0 auto;居中 在盒子里插入图片: 1.为父元素设置宽高,给图片设置宽100%,图片会充 ...

  3. [Android]ListView中分割线的设置

    1.在布局文件中ListView元素中通过属性设置 android:divider="#fffff"  分割线颜色 android:dividerHeight="1px& ...

  4. Iptables与LVS——从入门到放弃

    防火墙什么是防火墙?防火墙其实就是一个隔离的工具,工作于主机或者网络的边缘,对于进出本主机或者网络的报文根据事先定义好的网络规则做匹配监测.防火墙可以简单地划分为两大类:主机防火墙 网络防火墙     ...

  5. mui搜索框在ios平台上点击多次才弹出键盘的解决方法

    今天使用Hbuilder调试手机端时,发现搜索框在安卓系统下,点击一次就可以弹出键盘 但是在iso下非常的不规律,要点击多次 代码实现如下: <div class="mui-input ...

  6. HTTP协议调试工具汇总

    前言 本文收集了大量抓包工具,近40款,涵盖了各种开发语言(Java,C#,Delphi,C,C++,Objective-C,Node.js,Go,Python).各类前端(GUI,TUI,CUI,W ...

  7. ajax 'Content-Type': 'multipart/form-data' ->文件上传

    'Content-Type': 'multipart/form-data' :指定传输数据为二进制数据,例如图片.mp3.文件

  8. struts2--通配符映射

    1.通配符映射: --规则: > 1)若找到多个匹配,没有通配符的优先: > 2)若指定动作不存在,struts2将会尝试把这个URI与任何一个包含着通配符*的动作名进行匹配: > ...

  9. 「USACO08JAN」电话线Telephone Lines

    传送门 Luogu 解题思路 考虑二分,每次把大于二分值的边的权设为1,小于等于的设为0,如果最短路<=k则可行,记得判无解 细节注意事项 咕咕咕 参考代码 #include <algor ...

  10. 修bug感悟

    今天遇到了两个问题: 1. 使用 python 的 PIL 库读取照片的尺寸,对于有些图片,长宽和显示的效果相反,原因是照片中的 exif 有个属性 orientation,表示图片的翻转角度,详细说 ...