https://cloud.tencent.com/developer/article/1408283

https://cloud.tencent.com/developer/article/1195938

https://cloud.tencent.com/developer/article/1359936

https://cloud.tencent.com/developer/article/1079079

https://cloud.tencent.com/developer/article/1408335

图解原型和原型链

原型和原型链是 JS 中不可避免需要碰到的知识点?,本文使用图片思维导图的形式缕一缕原型、原型链、实例、构造函数等等概念之间的关系?

Constructor 构造函数

首先我们先写一个构造函数 Person,构造函数一般为了区别普通函数要求首字母大写:

1function Person(){}

prototype 原型

原型指的就是一个对象,实例“继承”那个对象的属性。在原型上定义的属性,通过“继承”,实例也拥有了这个属性。“继承”这个行为是在 new 操作符内部实现的。

先不说实例,原型与构造函数的关系就是,构造函数内部有一个名为 prototype 的属性,通过这个属性就能访问到原型:

20190314132908.png

Person 就是构造函数,Person.prototype 就是原型

20190314132934.png

instance 实例

有个构造函数,我们就可以在原型上创建可以“继承”的属性,并通过 new 操作符创建实例

20190314141908.png

比方说 Person,我们要创建一个 person 实例,那么使用 new 操作符就可以实现,并通过 instanceof 来检查他们之间的关系:

20190314132309.png

我们在原型上定义一个属性,那么实例上也就可以“继承”这个属性:

20190314133215.png

proto 隐式原型

实例通过 __proto__ 访问到原型,所以如果是实例,那么就可以通过这个属性直接访问到原型:

20190314141947.png

所以这两者是等价的:

20190314142041.png

constructor 构造函数

既然构造函数通过 prototype 来访问到原型,那么原型也应该能够通过某种途径访问到构造函数,这就是 constructor:

20190314142246.png

因此两者的关系应该是这样:

20190314142755.png

注意这里的 constructor 是原型的一个属性,Constructor 指的才是真正的构造函数。两者名字不要弄混了?

实例、构造函数、原型之间的关系

这里我们可以看到如果实例想要访问构造函数,那么应当是:

20190314143125.png

没有从实例直接访问到构造函数的属性或方法:

20190314143254.png

实例与原型则是通过上文中提到的 __proto__ 去访问到。

在读取一个实例的属性的过程中,如果属性在该实例中没有找到,那么就会循着 __proto__ 指定的原型上去寻找,如果还找不到,则尝试寻找原型的原型?:

20190314143837.png

我们把注释删掉,给实例同名属性,可以看到打印出来的属性就指向这个:

20190314143944.png

原型链

原型同样也可以通过 __proto__ 访问到原型的原型,比方说这里有个构造函数 Person 然后“继承”前者的有一个构造函数 People,然后 new People 得到实例 p

当访问 p 中的一个非自有属性的时候,就会通过 __proto__ 作为桥梁连接起来的一系列原型、原型的原型、原型的原型的原型直到 Object 构造函数为止。

这个搜索的过程形成的链状关系就是原型链

20190314144733.png

如下图:

20190314145239.png

看到 null 了么,原型链搜索搜到 null 为止,搜不到那访问的这个属性就是不存在的:

20190314145540.png

以上,这就是原型、原型链、构造函数、实例、null 之间的关系。

构造函数、原型对象和实例之间的关系

要弄懂extends继承之前,先来复习一下构造函数、原型对象和实例之间的关系。

代码表示:

function F(){}
var f = new F(); // 构造器
F.prototype.constructor === F; // true
F.__proto__ === Function.prototype; // true
Function.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true // 实例
f.__proto__ === F.prototype; // true
F.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true

笔者画了一张图表示:

JavaScript实现继承

继承的几种思路:

其实理解继承,主要是理解构造函数,实例属性和原型属性的关系。要想实现继承,将不同的对象或者函数联系起来,总共就以下几种思路:

  1. 原型链:父类的实例当做子类的原型。如此子类的原型包含父类定义的实例属性,享有父类原型定义的的属性。
  2. 借用构造函数:子类直接使用父类的构造函数。如此子类的实例直接包含父类定义的实例属性。
  3. 原型式:复制父类原型属性给子类原型。如此,子类实例享有父类定义的原型属性。
  4. 寄生式:思路与3一样,只是利用工厂模式对复制的父类原型对象进行增强。

然后,1,2思路结合,实例属性继承用借用构造函数保证独立性,方法继承用原型链保证复用性,就是组合模式。 4,2思路结合,或者说3,4与1,2思路结合,实例属性继承用借用构造函数保证独立性,方法继承用原型复制增强的方式,就是寄生组合模式。

简介

本文不准备深入细节,主要是对《JavaScript高级程序设计中》介绍的JS如何实现继承做一个总结,毕竟好记性不如烂笔头。文末会附带一张神图,搞清楚这张图,原型链也就没有什么问题了。

ES5实现继承的几种方式

1. 原型链

基本思想:

利用原型链让一个引用类型继承另一个引用类型的属性和方法。

function SuperType () {
this.property = true;
} SuperType.prototype.getSuperValue = function () {
return this.property;
}; // 子类 SubType
function SubType () {
this.subProperty = false;
} SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () {
return this.subProperty;
}; // 实例
var instance = new SubType();
console.log(instance);
console.log(instance.getSuperValue()); // true
console.log(instance instanceof SubType); // true
console.log(instance instanceof SuperType); // true
console.log(instance instanceof Object); // true
console.log(SubType.prototype.isPrototypeOf(instance)); // true
console.log(SuperType.prototype.isPrototypeOf(instance)); // true
console.log(Object.prototype.isPrototypeOf(instance)); // true
复制代码

缺点:

1. 来自原型对象的引用属性是所有实例共享的。

2. 创建子类实例时,无法向父类构造函数传参。

举例如下:

// 1. 来自原型对象的引用属性是所有实例共享的

// 父类
function SuperType () {
this.colors = ['red', 'blue', 'green'];
} // 子类
function SubType () { }
SubType.prototype = new SuperType(); // 实例
var instance1 = new SubType();
instance1.colors.push('black');
console.log(instance1.colors); // ['red', 'blue', 'green', 'black']
var instance2 = new SubType();
console.log(instance2.colors); // ['red', 'blue', 'green', 'black'] // 因为修改colors是修改的SubType.prototype.colors,所以所有的实例都会更新
复制代码
// 2. 创建子类实例时,无法向父类构造函数传参

// 调用父类是在 SubType.prototype = new SuperType()
// 新建子类实例调用 new SubType()
// 所以无法再new SubType() 的时候给父类 SuperType() 传参
复制代码

2. 借用构造函数

基本思想:

在子类构造函数的内部通过call()以及apply()调用父类构造函数。

// 父类 SuperType
function SuperType (name) {
this.name = name;
this.colors = ['red', 'blue', 'green']; this.getName = function () {
return this.name;
}
} // 子类
function SubType (name) {
// 继承了SuperType,同时还传递了参数
SuperType.call(this, name); // 实例属性
this.age = 20;
} // 实例
var instance1 = new SubType('Tom');
instance1.colors.push('black');
console.log(instance1.name); // "Tom"
console.log(instance1.getName()); // "Tom"
console.log(instance1.age); // 20
console.log(instance1.colors); // ['red', 'blue', 'green', 'black']
var instance2 = new SubType('Peter');
console.log(instance2.name); // "Peter"
console.log(instance2.getName()); // "Peter"
console.log(instance2.age); // 20
console.log(instance2.colors); // ['red', 'blue', 'green']
复制代码

可以看到,借用构造函数实现继承,解决了原型链继承的两个问题,既可以在新建子类实例的时候给父类构造函数传递参数,也不会造成子类实例共享父类引用变量。

但是你注意到了吗,这里我们把父类方法也写在了SuperType()构造函数里面,可以像前面一样写在SuperType.prototype上吗?

答案是不可以,必须写在SuperType()构造函数里面。因为这里是通过调用SuperType.call(this)来实现继承的,并没有通过new生成一个父类实例,所以如果写在prototype上,子类是无法拿到的。

缺点:

1. 如果方法都在构造函数中定义,那么就无法复用函数。每次构建实例时都会在实例中保留方法函数,造成了内存的浪费,同时也无法实现同步更新,因为每个实例都是单独的方法函数。如果方法写在prototype上,就只会有一份,更新时候会做到同步更新。

3. 组合继承

基本思想:

将原型链和借用构造函数的技术组合到一块,从而发挥二者之长的一种继承模式。

使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。

// 父类
function SuperType (name) {
this.name = name;
this.colors = ['red', 'blue', 'green'];
} SuperType.prototype.sayName = function () {
console.log(this.name);
} // 子类
function SubType (name, age) {
// 继承父类实例属性
SuperType.call(this, name); // 子类实例属性
this.age = age;
} SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function () {
console.log(this.age);
}; // 实例
var instance1 = new SubType('Tom', 20);
instance1.colors.push('black');
console.log(instance1.colors); // ['red', 'blue', 'green', 'black']
instance1.sayName(); // "Tom"
instance1.sayAge(); // 20 var instance2 = new SubType('Peter', 30);
console.log(instance2.colors); // ['red', 'blue', 'green']
instance2.sayName(); // "Peter"
instance2.sayAge(); // 30
复制代码

缺点:

1. 调用了两次父类构造函数,一次通过SuperType.call(this)调用,一次通过new SuperType()调用。

4. 原型式继承

基本思想:

不使用严格意义上的构造函数,借助原型可以基于已有的对象创建新的对象,同时还不必因此创建自定义类型。

// 在object函数内部,先创建了一个临时的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回这个临时类型的一个新实例。
// 从本质上讲,object()对传入其中的对象执行了一次浅复制。 function object (o) {
function F() {}
F.prototype = o;
return new F();
} var person = {
name: 'Tom',
friends: ['Shelby', 'Court', 'Van']
}; var anotherPerson = object(person);
anotherPerson.name = 'Greg';
anotherPerson.friends.push('Rob'); var yetAnotherPerson = object(person);
yetAnotherPerson.name = 'Linda';
yetAnotherPerson.friends.push('Barbie'); console.log(anotherPerson.friends); // ['Shelby', 'Court', 'Van', 'Rob', 'Barbie']
console.log(yetAnotherPerson.friends); // ['Shelby', 'Court', 'Van', 'Rob', 'Barbie']
console.log(person.friends); // ['Shelby', 'Court', 'Van', 'Rob', 'Barbie'] 复制代码

ECMAScript5中新增了一个方法Object.create(prototype, descripter)接收两个参数:

  • prototype(必选),用作新对象的原型对象
  • descripter(可选),为新对象定义额外属性的对象

在传入一个参数的情况下,Object.create()与前面写的object()方法的行为相同。

var person = {
name: 'Tom',
friends: ['Shelby', 'Court', 'Van']
}; var anotherPerson = Object.create(person);
anotherPerson.name = 'Greg';
anotherPerson.friends.push('Rob'); var yetAnotherPerson = Object.create(person, {
name: {
value: 'Linda',
enumerable: true
}
});
yetAnotherPerson.friends.push('Barbie'); console.log(anotherPerson.friends); // ['Shelby', 'Court', 'Van', 'Rob', 'Barbie']
console.log(yetAnotherPerson.friends); // ['Shelby', 'Court', 'Van', 'Rob', 'Barbie']
console.log(person.friends); // ['Shelby', 'Court', 'Van', 'Rob', 'Barbie']
复制代码

缺点:

1. 和原型链继承一样,所有子类实例共享父类的引用类型。

5. 寄生式继承

基本原理:

寄生式继承是与原型式继承紧密相关的一种思路,创建一个仅用于封装继承过程的函数,该函数内部以某种形式来做增强对象,最后返回对象。

function object (o) {
function F() {}
F.prototype = o;
return new F();
} function createAnother (o) {
var clone = object(o);
clone.sayHi = function () {
console.log('Hi');
}
return clone;
} var person = {
name: 'Tom',
friends: ['Shelby', 'Court', 'Van']
}; var anotherPerson = createAnother(person);
anotherPerson.sayHi(); // "Hi"
anotherPerson.friends.push('Rob');
console.log(anotherPerson.friends); // ['Shelby', 'Court', 'Van', 'Rob']
var yerAnotherPerson = createAnother(person);
console.log(yerAnotherPerson.friends); // ['Shelby', 'Court', 'Van', 'Rob']
复制代码

缺点:

1. 和原型链式继承一样,所有子类实例共享父类引用类型。

2. 和借用构造函数继承一样,每次创建对象都会创建一次方法。

6. 寄生组合式继承

基本思想:

将寄生式继承和组合继承相结合,解决了组合式继承中会调用两次父类构造函数的缺点。

组合继承是JavaScript最常用的继承模式,它最大的问题就是无论在什么情况下,都会调用两次父类构造函数:一次是在创建子类原型的时候,另一次是在子类构造函数内部。

// 组合继承
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function () {
alert(this.name);
};
function SubType(name, age) {
SuperType.call(this, name); //第二次调用 SuperType()
this.age = age;
}
SubType.prototype = new SuperType(); //第一次调用 SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function () {
alert(this.age);
};
复制代码

组合继承在第一次调用SuperType构造函数时,SubType.prototype会得到两个属性:name和colors;它们都是 SuperType 的实例属性,只不过现在位于 SubType的原型中。当调用SubType构造函数时,又会调用一次SuperType构造函数,这一次又在新对象上创建了实例属性name和colors。于是,这两个属性就屏蔽了原型中的两个同名属性。

所谓寄生组合式继承,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。

其背后的基本思路是:不必为了指定子类型的原型而调用父类的构造函数,我们需要的无非就是父类原型的一个副本而已。本质上,就是使用寄生式继承来继承父类的prototype,然后再将结果指定给子类的prototype。

寄生组合式继承的基本模型如下:

function inheritPrototype(SubType, SuperType) {
var prototype = object(SuperType.prototype); // 创建对象
prototype.constructor = SubType; // 增强对象
SubType.prototype = prototype; // 指定对象 }
复制代码

实现一个完整的寄生组合式继承:

function object(o) {
function F() { }
F.prototype = o;
return new F();
} function inheritPrototype(SubType, SuperType) {
var prototype = object(SuperType.prototype); // 创建对象
prototype.constructor = SubType; // 增强对象
SubType.prototype = prototype; // 指定对象
} // 父类
function SuperType(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
} SuperType.prototype.sayName = function () {
console.log(this.name);
}; // 子类
function SubType(name, age) {
// 继承父类实例属性
SuperType.call(this, name); // 子类实例属性
this.age = age;
} // 继承父类方法
inheritPrototype(SubType, SuperType); // 子类方法
SubType.prototype.sayAge = function () {
console.log(this.age);
}; // 实例
var instance1 = new SubType('Tom', 20);
instance1.colors.push('black');
instance1.sayAge(); // 20
instance1.sayName(); // "Tom"
console.log(instance1.colors); // ["red", "blue", "green", "black"] var instance2 = new SubType('Peter', 30);
instance2.sayAge(); // 30
instance2.sayName(); // "Peter"
console.log(instance2.colors); // ["red", "blue", "green"]
复制代码

寄生组合式继承的高效率体现在它只调用了一次SuperType构造函数,并且因此避免了再SubType.prototype上面创建不必要的、多余的属性。与此同时,原型链还能保持不变。因此,还能够正常使用instanceof和isPrototypeOf()。

开发人员普遍认为寄生组合式继承是引用类型最理想的继承方式。

7. 对象冒充

function Person(name,age){

this.name = name;

this.age = age;

this.show = function(){

console.log(this.name+", "+this.age);

}

}

function Student(name,age){

this.student = Person; //将Person类的构造函数赋值给this.student

this.student(name,age); //js中实际上是通过对象冒充来实现继承的

delete this.student; //移除对Person的引用

}

var s = new Student("小明",17);

s.show();

var p = new Person("小花",18);

p.show();

// 小明, 17

// 小花, 18


ES6实现继承

// 父类
class SuperType {
constructor(name) {
this.name = name;
this.colors = ["red", "blue", "green"];
} sayName() {
console.log(this.name);
};
} // 子类
class SubType extends SuperType {
constructor(name, age) {
// 继承父类实例属性和prototype上的方法
super(name); // 子类实例属性
this.age = age;
} // 子类方法
sayAge() {
console.log(this.age);
}
} // 实例
var instance1 = new SubType('Tom', 20);
instance1.colors.push('black');
instance1.sayAge(); // 20
instance1.sayName(); // "Tom"
console.log(instance1.colors); // ["red", "blue", "green", "black"] var instance2 = new SubType('Peter', 30);
instance2.sayAge(); // 30
instance2.sayName(); // "Peter"
console.log(instance2.colors); // ["red", "blue", "green"]
复制代码

用ES6的语法来实现继承非常的简单,下面是把这段代码放到Babel里转码的结果图片:

可以看到,底层其实也是用寄生组合式继承来实现的。

总结

ES5实现继承有6种方式:

  1. 原型链继承
  2. 借用构造函数继承
  3. 组合继承
  4. 原型式继承
  5. 寄生式继承
  6. 寄生组合式继承

寄生组合式继承是大家公认的最好的实现引用类型继承的方法。

ES6新增class和extends语法,用来定义类和实现继承,底层也是采用了寄生组合式继承。

附图:

JS原型、原型链、构造函数、实例与继承的更多相关文章

  1. js中的原型,原型链和继承

    在传统的基于Class的语言如Java.C++中,继承的本质是扩展一个已有的Class,并生成新的Subclass. 由于这类语言严格区分类和实例,继承实际上是类型的扩展.但是,JavaScript最 ...

  2. 怎么理解js的原型链继承?

    前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js ...

  3. JS原型,原型链,类,继承,class,extends,由浅到深

    一.构造函数和原型 1.构造函数.静态成员和实例成员 在ES6之前,通常用一种称为构造函数的特殊函数来定义对象及其特征,然后用构造函数来创建对象.像其他面向对象的语言一样,将抽象后的属性和方法封装到对 ...

  4. JS中原型链继承

    当我们通过构造函数A来实现一项功能的时候,而构造函数B中需要用到构造函数A中的属性或者方法,如果我们对B中的属性或者方法进行重写就会出现冗杂的代码,同时写出来也很是麻烦.而在js中每个函数都有个原型, ...

  5. JS基础-原型链和继承

    创建对象的方法 字面量创建 构造函数创建 Object.create() var o1 = {name: 'value'}; var o2 = new Object({name: 'value'}); ...

  6. JS 之原型,实例,构造函数之间的关系

    JS是面向对象的语言,函数也是对象.下面大致介绍下实例,原型与构造函数之间的关系. 构造函数模式 function Person(name,age){ this.name = name; this.a ...

  7. js原型链理解(4)-经典继承

    经典继承就是组合继承,就是组合构造函数和原型链的优点混合继承. 1.避免引用类型的属性初始化 2.避免相同方法的多次初始化 function Super(name){ this.ages = [100 ...

  8. 前端基本知识(二):JS的原型链的理解

    之前一直对于前端的基本知识不是了解很详细,基本功不扎实,但是前端开发中的基本知识才是以后职业发展的根基,虽然自己总是以一种实践是检验真理的唯一标准,写代码实践项目才是唯一,但是经常遇到知道怎么去解决这 ...

  9. js之原型,原型链

    1.原型是什么?    在构造函数创建出来的时候,系统会默认的创建并关联一个对象,这个对象就是原型,原型对象默认是空对象    默认的原型对象中会有一个属性constructor指向该构造函数  原型 ...

随机推荐

  1. sql添加表

    IF EXISTS(SELECT * FROM sysobjects WHERE name='learnRecord') DROP TABLE learnRecord GO CREATE TABLE ...

  2. swift4.0 方法监听Selector写法总结

    import UIKit class MainViewController: UITabBarController { //MARK:属性 懒加载 lazy var composeBtn = UIBu ...

  3. lightoj1004【基础DP】

    从低端到顶端求个最大值: 思路: 基础DP,递推 #include<cstdio> #include<queue> #include<map> #include&l ...

  4. JAG Practice Contest for ACM-ICPC Asia Regional 2016 C题【贪心】

    camp给出的题解: 题解:贪心,先算出最小需要的长度.然后从左到右依次确定每一位.复杂度O(n)O(n) 长度为 2n2n 的串可以构造出需要 [0,1+3+...+2n-1][0,1+3+...+ ...

  5. Codevs 1312 连续自然数和

    1312 连续自然数和 题目描述 Description 对于一个自然数M,求出所有的连续的自然数段,使得这些连续自然数段的全部数字和为M.eg:1998+1999+2000+2001+2002=10 ...

  6. Tcl/Tk语言学习------拆分字符串

    字符串的拆分 前言 字符串的处理是每种语言经常会遇到的问题,tcl作为一门脚本语言自然也不例外,关于字符串的拆分,一般会有两种情况:1.使用单个字符拆分,2.使用字符串拆分. 1.使用单个字符拆分字符 ...

  7. Codeforces 1106F(数论)

    要点 998244353的原根g = 3,意味着对于任意\[1 <= x,y<p\]\[x\neq\ y\]\[g^x\%p\neq\ g^y\%p\]因此可以有构造序列\(q(a)与a一 ...

  8. 利用HtmlParser解析网页内容

    一,htmpparser介绍 htmlparser是一个功能比较强大的网页解析工具,主要用于 html 网页的转换(Transformation) 以及网页内容的抽取 (Extraction). 二, ...

  9. python regex

    re.match: match from the beginning of the string re.search: scan through the whole string to find a ...

  10. 再看SpringMVC通过一个DispatcherServlet处理Servlet

    初始入口: org.springframework.web.context.ContextLoaderListener org.springframework.web.context.ContextL ...