js继承、构造函数继承、原型链继承、组合继承、组合继承优化、寄生组合继承

程序员文章站 2022-07-15 21:45:48

...

2018.06.03

第一部分：导入

1、构造函数的属性

funcion A(name) {
    this.name = name; // 实例基本属性 (该属性，强调私有，不共享)
    this.arr = [1]; // 实例引用属性 (该属性，强调私用，不共享)
    this.say = function() { // 实例引用属性 (该属性，强调复用，需要共享)
        console.log('hello')
    }
}
注意：数组和方法都属于‘实例引用属性’，但是数组强调私有、不共享的。方法需要复用、共享。

注意：在构造函数中，一般很少有数组形式的引用属性，大部分情况都是：基本属性 + 方法。

2、原型对象的作用

原型对象的用途是为每个实例对象存储共享的方法和属性，它仅仅是一个普通对象而已。并且所有的实例是共享同一个原型对象，因此有别于实例方法或属性，原型对象仅有一份。而实例有很多份，且实例属性和方法是独立的。

在构造函数中：为了属性(实例基本属性)的私有性、以及方法(实例引用属性)的复用、共享。我们提倡：

将属性封装在构造函数中
将方法定义在原型对象上

funcion A(name) {
    this.name = name; // (该属性，强调私有，不共享)
}
A.prototype.say = function() { // 定义在原型对象上的方法 (强调复用，需要共享)
        console.log('hello')
}

// 不推荐的写法：[原因](https://blog.csdn.net/kkkkkxiaofei/article/details/46474303)
A.prototype = {
    say: function() { 
        console.log('hello')
    }
}

第二部分：js 继承—各种方式的优缺点

方式1、原型链继承

核心：将父类实例作为子类原型
优点：方法复用
- 由于方法定义在父类的原型上，复用了父类构造函数的方法。比如say方法。
缺点：
- 创建子类实例的时候，不能传参数。
- 子类实例共享了父类构造函数的引用属性，比如arr属性。

function Parent() {
    this.name = '父亲'; // 实例基本属性 (该属性，强调私有，不共享)
    this.arr = [1]; // (该属性，强调私有)
}
Parent.prototype.say = function() { // -- 将需要复用、共享的方法定义在父类原型上 
    console.log('hello')
}
function Child(like) {
    this.like = like;
}
Child.prototype = new Parent() // 核心

let boy1 = new Child()
let boy2 = new Child()

// 优点：共享了父类构造函数的say方法
console.log(boy1.say(), boy2.say(), boy1.say === boy2.say); // hello , hello , true

// 缺点1：不能传参数
// 缺点2：
console.log(boy1.name, boy2.name, boy1.name===boy2.name); // 父亲，父亲，true

boy1.arr.push(2); // 修改了boy1的arr属性，boy2的arr属性，也会变化，因为两个实例的原型上(Child.prototype)有了父类构造函数的实例属性arr；所以只要修改了boy1.arr,boy2.arr的属性也会变化。  ----  原型上的arr属性是共享的。
console.log(boy2.arr); // [1,2]

注意：修改boy1的name属性，是不会影响到boy2.name。因为name是基本属性，不是引用属性。

方式2、借用构造函数

核心：借用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类。
优点：实例之间独立。
- 创建子类实例，可以向父类构造函数传参数。
- 子类实例不共享父类构造函数的引用属性。如arr属性
缺点：
- 父类的方法不能复用
  由于方法在父构造函数中定义，导致方法不能复用(因为每次创建子类实例都要创建一遍方法)。比如say方法。(方法应该要复用、共享)
- 子类实例，继承不了父类原型上的属性。(因为没有用到原型)

function Parent(name) {
    this.name = name; // 实例基本属性 (该属性，强调私有，不共享)
     this.arr = [1]; // (该属性，强调私有)
    this.say = function() { // 实例引用属性 (该属性，强调复用，需要共享)
        console.log('hello')
    }
}
function Child(name,like) {
    Parent.call(this,name);  // 核心
    this.like = like;
}
let boy1 = new Child('小红','apple');
let boy2 = new Child('小明', 'orange ');

// 优点1：可传参
console.log(boy1.name, boy2.name); // 小红， 小明

// 优点2：不共享父类构造函数的引用属性
boy1.arr.push(2);
console.log(boy1.arr,boy2.arr);// [1,2] [1]

// 缺点1：方法不能复用
console.log(boy1.say === boy2.say) // false (说明，boy1和boy2 
的say方法是独立，不是共享的)

// 缺点2：不能继承父类原型上的方法
Parent.prototype.walk = function () {   // 在父类的原型对象上定义一个walk方法。
    console.log('我会走路')
}
boy1.walk;  // undefined (说明实例，不能获得父类原型上的方法)

方式3、组合继承

核心：通过调用父类构造函数，继承父类的属性并保留传参的优点；然后通过将父类实例作为子类原型，实现函数复用。
优点：
- 保留构造函数的优点：创建子类实例，可以向父类构造函数传参数。
- 保留原型链的优点：父类的实例方法定义在父类的原型对象上，可以实现方法复用。
- 不共享父类的引用属性。比如arr属性
缺点：
- 由于调用了2次父类的构造方法，会存在一份多余的父类实例属性，具体原因见文末。
注意：’组合继承’这种方式，要记得修复Child.prototype.constructor指向

第一次Parent.call(this);从父类拷贝一份父类实例属性，作为子类的实例属性，

第二次Child.prototype = new Parent();创建父类实例作为子类原型，此时这个父类实例就又有了一份实例属性，但这份会被第一次拷贝来的实例属性屏蔽掉，所以多余。

为啥是两次？如果还是，不清楚，可以看文末，我会详细讲解！

function Parent(name) {
    this.name = name; // 实例基本属性 (该属性，强调私有，不共享)
    this.arr = [1]; // (该属性，强调私有)
}
Parent.prototype.say = function() { // --- 将需要复用、共享的方法定义在父类原型上 
    console.log('hello')
}
function Child(name,like) {
    Parent.call(this,name,like) // 核心   第二次
    this.like = like;
}
Child.prototype = new Parent() // 核心   第一次

<!--这里是修复构造函数指向的代码-->

let boy1 = new Child('小红','apple')
let boy2 = new Child('小明','orange')

// 优点1：可以传参数
console.log(boy1.name,boy1.like); // 小红，apple

// 优点2：可复用父类原型上的方法
console.log(boy1.say === boy2.say) // true

// 优点3：不共享父类的引用属性，如arr属性
boy1.arr.push(2)
console.log(boy1.arr,boy2.arr); // [1,2] [1] 可以看出没有共享arr属性。

注意：为啥要修复构造函数的指向？
console.log(boy1.constructor); // Parent 你会发现实例的构造函数居然是Parent。
而实际上，我们希望子类实例的构造函数是Child,所以要记得修复构造函数指向。修复如下
Child.prototype.constructor = Child;

其实Child.prototype = new Parent()

console.log(Child.prototype.proto === Parten.prototype); // true

方式4、组合继承优化1

核心：

通过这种方式，砍掉父类的实例属性，这样在调用父类的构造函数的时候，就不会初始化两次实例，避免组合继承的缺点。
优点：
- 只调用一次父类构造函数。
- 保留构造函数的优点：创建子类实例，可以向父类构造函数传参数。
- 保留原型链的优点：父类的实例方法定义在父类的原型对象上，可以实现方法复用。
缺点：
- 修正构造函数的指向之后，父类实例的构造函数指向，同时也发生变化(这是我们不希望的)
注意：’组合继承优化1’这种方式，要记得修复Child.prototype.constructor指向
原因是：不能判断子类实例的直接构造函数，到底是子类构造函数还是父类构造函数。

function Parent(name) {
    this.name = name; // 实例基本属性 (该属性，强调私有，不共享)
    this.arr = [1]; // (该属性，强调私有)
}
Parent.prototype.say = function() { // --- 将需要复用、共享的方法定义在父类原型上 
    console.log('hello')
}
function Child(name,like) {
    Parent.call(this,name,like) // 核心  
    this.like = like;
}
Child.prototype = Parent.prototype // 核心  子类原型和父类原型，实质上是同一个

<!--这里是修复构造函数指向的代码-->

let boy1 = new Child('小红','apple')
let boy2 = new Child('小明','orange')
let p1 = new Parent('小爸爸')

// 优点1：可以传参数
console.log(boy1.name,boy1.like); // 小红，apple
// 优点2：
console.log(boy1.say === boy2.say) // true

// 缺点1：当修复子类构造函数的指向后，父类实例的构造函数指向也会跟着变了。
具体原因：因为是通过原型来实现继承的，Child.prototype的上面是没有constructor属性的，就会往上找，这样就找到了Parent.prototype上面的constructor属性；当你修改了子类实例的construtor属性，所有的constructor的指向都会发生变化。

没修复之前：console.log(boy1.constructor); // Parent
修复代码：Child.prototype.constructor = Child
修复之后：console.log(boy1.constructor); // Child
          console.log(p1.constructor);// Child 这里就是存在的问题(我们希望是Parent)

方式5、组合继承优化2 又称寄生组合继承 — 完美方式

核心：
优点：完美i
缺点：—

function Parent(name) {
    this.name = name; // 实例基本属性 (该属性，强调私有，不共享)
    this.arr = [1]; // (该属性，强调私有)
}
Parent.prototype.say = function() { // --- 将需要复用、共享的方法定义在父类原型上 
    console.log('hello')
}
function Child(name,like) {
    Parent.call(this,name,like) // 核心  
    this.like = like;
}
Child.prototype = Object.create(Parent.prototype) // 核心  通过创建中间对象，子类原型和父类原型，就会隔离开。不是同一个啦，有效避免了方式4的缺点。

<!--这里是修复构造函数指向的代码-->
Child.prototype.constructor = Child

let boy1 = new Child('小红','apple')
let boy2 = new Child('小明','orange')
let p1 = new Parent('小爸爸')


注意：这种方法也要修复构造函数的
修复代码：Child.prototype.constructor = Child
修复之后：console.log(boy1.constructor); // Child
          console.log(p1.constructor);// Parent  完美

第三部分：其他 + 相关问题解答

1、Object.create() 或 Object.create(object, [,propertiesObject])

Object.create() 的第二参数，是可选的。

- Object.create() 的内部原理：
// 其中，o 是新创建对象的原型(对象)
function object(o) {
    function F() {}
    F.prototype = o
    return new F()
}
注意：之前，Object.create()没有出现之前，就是采用的这种方式。
参见《js高级程序设计》P170

Object.create() 做了哪几件事情？
1. 创建空对象{}
2. 指定空对象{}的原型为Object.create()的参数。
new 与 Object.create() 的区别？

以下是我的个人见解，(如有不对，还请指正)：

new 产生的实例，优先获取构造函数上的属性；构造函数上没有对应的属性，才会去原型上查找；如果构造函数中以及原型中都没有对应的属性，就会报错。

Object.create() 产生的对象，只会在原型上进行查找属性，原型上没有对应的属性，就会报错。

let Base1 = function() {
  this.a = 1
}
let o1 = new Base1()
let o2 = Object.create(Base1.prototype)
console.log(o1.a); // 1
console.log(o2.a); // undefined



let Base2 = function() {}
Base2.prototype.a = 'aa'
let o3 = new Base2()
let o4 = Object.create(Base2.prototype)
console.log(o3.a); // aa
console.log(o4.a); // aa



let Base3 = function() {
  this.a = 1
}
Base3.prototype.a = 'aa'
let o5 = new Base3()
let o6 = Object.create(Base3.prototype)
console.log(o5.a); // 1
console.log(o6.a); // aa

2、new 的过程

funciton Func(name) {
    this.name = name
}
let p = new Func('小红')

new 的过程，做了啥？做了四件事。
- 创建一个空对象obj：let obj = new Object()

设置原型链

obj.__proto__ = Func.prototype
就是：将新对象的__proto__ 指向构造函数的prototype

将构造函数Func的this指向obj,并执行构造函数Func

let result = Func.call(obj)
就是：使用call或apply,将构造函数的this绑定到新对象，并执行构造函数

判断构造函数Func的返回值类型

如果是引用类型，就返回这个引用类型的对象。如果是值类型或没有return，则返回空对象obj。
if (typeof(result) === "object"){  
  func=result;  
}  
else{  
   func=obj; // 默认返回
}
注意：js中的构造函数，是不需要有返回值的，所以默认返回的是新创建的空对象obj

3、为啥‘组合继承’这种方式，会执行两次父类构造函数？？

第一次：Child.prototype = new Parent()

‘new 的过程’的第三步，其实就是执行了父类构造函数。
第二次：Parent.call(this,name,like)

call的作用是改变函数执行时的上下文。比如：A.call(B)。其实，最终执行的还是A函数，只不过是用B来调用而已。所以，你就懂了Parent.call(this,name,like) ,也就是执行了父类构造函数。

js继承、构造函数继承、原型链继承、组合继承、组合继承优化、寄生组合继承

第一部分：导入

1、构造函数的属性

2、原型对象的作用

第二部分：js 继承—各种方式的优缺点

方式1、原型链继承

方式2、借用构造函数

方式3、组合继承

方式4、组合继承优化1

方式5、组合继承优化2 又称寄生组合继承 — 完美方式

第三部分：其他 + 相关问题解答

1、Object.create() 或 Object.create(object, [,propertiesObject])

2、new 的过程

3、为啥‘组合继承’这种方式，会执行两次父类构造函数？？

第四部分：参考链接

JavaScript寄生组合式继承实例详解

[js高手之路]从原型链开始图解继承到组合继承的产生详解

[js高手之路]寄生组合式继承的优势详解

JS：构造函数继承原型链

js 继承三种常用方法原型链-借用构造函数-组合式继承

js继承、构造函数继承、原型链继承、组合继承、组合继承优化、寄生组合继承

JS 面向对象之继承---多种组合继承

Javascript继承6：终极继承者----寄生组合式继承

继承学习之类式继承、构造函数式继承、组合继承代码实例

JS 面向对象之继承---多种组合继承详解

js继承、构造函数继承、原型链继承、组合继承、组合继承优化、寄生组合继承

第一部分：导入

1、构造函数的属性

2、原型对象的作用

第二部分：js 继承—各种方式的优缺点

方式1、原型链继承

方式2、借用构造函数

方式3、组合继承

方式4、组合继承优化1

方式5、组合继承优化2 又称 寄生组合继承 — 完美方式

第三部分：其他 + 相关问题解答

1、Object.create() 或 Object.create(object, [,propertiesObject])

2、new 的过程

3、为啥‘组合继承’这种方式，会执行两次父类构造函数？？

第四部分：参考链接

JavaScript寄生组合式继承实例详解

[js高手之路]从原型链开始图解继承到组合继承的产生详解

[js高手之路]寄生组合式继承的优势详解

JS：构造函数继承原型链

js 继承 三种常用方法 原型链-借用构造函数-组合式继承

js继承、构造函数继承、原型链继承、组合继承、组合继承优化、寄生组合继承

JS 面向对象之继承---多种组合继承

Javascript继承6：终极继承者----寄生组合式继承

继承学习之类式继承、构造函数式继承、组合继承代码实例

JS 面向对象之继承---多种组合继承详解

方式5、组合继承优化2 又称寄生组合继承 — 完美方式

js 继承三种常用方法原型链-借用构造函数-组合式继承