JS实现继承的几种方式 - 京鸿一瞥

前言

JS作为面向对象的弱类型语言，继承也是其非常强大的特性之一。那么如何在JS中实现继承呢？让我们拭目以待。

预备知识

1、构造函数的属性


funcion A(name) {
  this.name = name; // 实例基本属性 (该属性，强调私有，不共享) 
  this.arr = [1]; // 实例引⽤属性 (该属性，强调私⽤，不共享)
  this.say = function() { // 实例引⽤属性 (该属性，强调复⽤，需要共享)
    console.log('hello')
  }
}

注意：数组和⽅法都属于‘实例引⽤属性’，但是数组强调私有、不共享的。⽅法需要复⽤、共享。
在构造函数中，⼀般很少有数组形式的引⽤属性，⼤部分情况都是：基本属性 + ⽅法。

2、什么是原型对象

简单来说，每个函数都有prototype属性，它就是原型对象，通过函数实例化出来的对象有个 proto 属性，指向原型对象。

let a = new A()
a. proto == A.prototype

// prototype的结构如下
A.prototype = {
  constructor: A,
  ...其他的原型属性和⽅法
}

3、原型对象的作⽤

原型对象的⽤途是为每个实例对象存储共享的⽅法和属性，它仅仅是⼀个普通对象⽽已。并且所有的实例是共享同⼀个原型对象，因此有别于实例⽅法或属性，原型对象仅有⼀份。⽽实例有很多份，且实例属性和⽅法是独⽴的。在构造函数中：为了属性(实例基本属性)的私有性、以及⽅法(实例引⽤属性)的复⽤、共享。我们提倡：（即下文出现的组合继承方式）

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

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⽅法。
缺点：
- 创建⼦类实例的时候，不能传⽗类的参数（⽐如name）。
- ⼦类实例共享了⽗类构造函数的引⽤属性，⽐如arr属性。
- ⽆法实现多继承。

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

Child.prototype = new Parent() // 核⼼，但此时Child.prototype.constructor==Parent 
Child.prototype.constructor = Child // 修正constructor指向

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

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

// 缺点1：不能向⽗类构造函数传参
console.log(boy1.name, boy2.name, boy1.name===boy2.name); // ⽗亲，⽗亲，true

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

注意1：修改boy1的name属性，是不会影响到boy2.name。因为设置boy1.name相当于在⼦类实例新增了name属性。
注意2：console.log(boy1.constructor); // Parent 你会发现实例的构造函数居然是Parent。

⽽实际上，我们希望⼦类实例的构造函数是Child,所以要记得修复构造函数指向。修复如下：Child.prototype.constructor = Child;

2.借⽤构造函数继承

核⼼：借⽤⽗类的构造函数来增强⼦类实例，等于是复制⽗类的实例属性给⼦类。
优点：实例之间独⽴。
- 创建⼦类实例，可以向⽗类构造函数传参数。
- ⼦类实例不共享⽗类构造函数的引⽤属性。如arr属性可实现多继承（通过多个call或者apply继承多个⽗类）
缺点：
- ⽗类的⽅法不能复⽤
  由于⽅法在⽗构造函数中定义，导致⽅法不能复⽤(因为每次创建⼦类实例都要创建⼀遍⽅法)。
  ⽐如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();创建⽗类实例作为⼦类原型，Child.protype中的⽗类属性和⽅法会被第⼀次拷⻉来的实例属性屏蔽掉，所以多余。

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() // 核⼼ 第⼀次
Child.prototype.constructor = Child // 修正constructor指向
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属性。
// 缺点1：由于调⽤了2次⽗类的构造⽅法，会存在⼀份多余的⽗类实例属性
1. Child.prototype = new Parent() // 核⼼ 第⼀次
2. Parent.call(this,name,like) // 核⼼ 第⼆次
所以有两次

其实Child.prototype = new Parent()
console.log(Child.prototype.proto === Parent.prototype); // true
因为Child.prototype等于Parent的实例，所以__proto__指向Parent.prototype

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 // 核⼼ ⼦类原型和⽗类原型，实质上是同⼀个
<!--这⾥是修复构造函数指向的代码-->
Child.prototype.constructor = Child
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：当修复⼦类构造函数的指向后，⽗类实例的构造函数指向也会跟着变了。
没修复之前：console.log(boy1.constructor); // Parent
修复代码：Child.prototype.constructor = Child
修复之后：console.log(boy1.constructor); // Child
console.log(p1.constructor);// Child 这⾥就是存在的问题(我们希望是Parent)
具体原因：因为是通过原型来实现继承的，Child.prototype的上⾯是没有constructor属性的，
就会往上找，这样就找到了Parent.prototype上⾯的constructor属性；当你修改了⼦类实例的
construtor属性，所有的constructor的指向都会发⽣变化。

5、组合继承优化2 (寄⽣组合继承 --- 完美⽅式)

核⼼：---
优点：完美
缺点：---

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;
}
// 核⼼ 通过创建中间对象，⼦类原型和⽗类原型，就会隔离开。不是同⼀个啦，有效避免了⽅式4的缺点。
Child.prototype = Object.create(Parent.prototype)
// 这⾥是修复构造函数指向的代码
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, propertiesObject)

详细用法跳转处
Object.create()⽅法创建⼀个新对象，使⽤第⼀个参数来提供新创建对象的__proto__（以第⼀个参
数作为新对象的构造函数的原型对象）；
⽅法还有第⼆个可选参数，是添加到新创建对象的属性，写法如下。

const a = Object.create(Person.prototype, {
  age: {
    value: 12,
    writable:true,
    configurable:true,
  }
})

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 的过程

创建新对象（如obj）。
将新对象的_proto_指向构造函数的prototype对象。
执⾏构造函数，为这个新对象添加属性，并将this指向创建的新对象obj。
当构造函数本⾝返回值为对象时，返回该对象，否则返回新对象。

//创建Person构造函数，参数为name,age
function Person(name,age){
this.name = name;
this.age = age;
}
function _new(){
//1.拿到传⼊的参数中的第⼀个参数，即构造函数名Func
var Func = [].shift.call(arguments);
//2.创建⼀个空对象obj,并让其继承Func.prototype
var obj = Object.create(Func.prototype);
//3.执⾏构造函数，并将this指向创建的空对象obj
const result = Func.apply(obj,arguments)
//4.当函数也有返回值且为对象时返回该对象，否则返回创建的新对象obj
return (result instanceOf Object ? result : obj)
}
let ming = _new(Person,'xiaoming',18);
console.log(ming);

[].shift.call表⽰删除并返回auguments[0]。也可以通过以下⽅式取得函数名和函数的参数：

function _new(Func, ...params){
  ...
}
Object.create创建obj，使得obj.__proto__ = Func.prototype

3、 instanceof 原理

巩固原型链知识，如下代码：

function Person(name, age) {
  this.name = name;
  this.age = age;
}
let p = new Person()

p.proto = Person.prototype, Person.prototype.proto = Object.prototype, Object.prototype.proto = null
所以原理就是一层层往上找，如果一直找不到遇到 null 则返回 false

function Person(name, age) {
  this.name = name;
  this.age = age;
}
let p = new Person()
function _instanceOf(obj, obj2) {
  if (obj.__proto__ == obj2.prototype) {
    return true
  } else if (obj.__proto__ == null) {
    return false
  } else {
//使用了递归一直往上查找
    return _instanceOf(obj.__proto__, obj2)
  }
}
console.log(_instanceOf(p, Object))

4、call、apply

// 手写 call 原理详解
// 核心，在目标对象中创建函数方法等于执行的函数，然后用目标对象调用此方法(此时this指向目标对象)，然后删掉创建的方法，返回结果
// 使用 call apply bind 的都是函数 所以此方法写在 function 的构造函数 Function 的原型上面
Function.prototype.mycall = function(content){

    //创建一个变量，这个变量即一个参数传过来的对象， 所以这个变量为一个对象
    const context = content || window
    //此处的 this 为调用 .mycall 的函数，个人觉得，调用 mycall 方法的函数为Function的实例，实例调用原型上的 mycall 此处的 this 则指向实例
    // console.log(this)
    //context对象创建 一个函数方法fn 等于函数实例，也就是调用 mycall 的函数
    context.fn = this
    //此处获取除一个参数以后的所有参数
    const arg = [...arguments].slice(1)
    //在 context 对象中执行 函数实例，调用者为 context 对象
    const res = arg.length ? context.fn(...arg) : context.fn(...arg)
    //为了不影响 context 对象，所以把 context 上挂载的 fn 方法删掉
    delete context.fn
    //返回结果
    return res
}

Function.prototype.myApply = function(obj) {
    const context = obj || window
    context.fn = this
    const res = arguments[1] ? context.fn(...arguments[1]) : context.fn()
    delete context.fn
    return res
}

const age = 18
const obj = {
    name:'hong',
    objName : this.age,
    myFn(){
        console.log(this.name)
    }
}
const obj1 = {
    name: 'hong1',
    age: 18
}
// obj.myFn()
// obj.myFn.call(obj1)
// obj.myFn.mycall()
obj.myFn.myApply(obj1)

posted on 2023-03-09 22:40 京鸿一瞥阅读(214) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部