4.原型和原型链

2021-06-30 本文已影响0人 yaoyao妖妖

image.png

声明一个函数，则这个函数默认会有一个属性叫 prototype 。而且浏览器会自动按照一定的规则创建一个对象，这个对象就是这个函数的原型对象，prototype属性指向这个原型对象。这个原型对象有一个属性叫constructor 执行了这个函数，注意：原型对象默认只有属性：constructor。其他都是从Object继承而来，暂且不用考虑。
通过 new 生成的所有的实例对象共享同一个原型；
原型链其实是一种链表的结构，将next 换成 __ proto__, 同时生成一个 contructor 指针指向自己；

image.png

原型链就是多个对象通过 proto 的方式连接了起来。为什么 obj 可以访问到 valueOf 函数，就是因为 obj 通过原型链找到了 valueOf 函数。

Object 是所有对象的爸爸，所有对象都可以通过 proto 找到它
Function 是所有函数的爸爸，所有函数都可以通过 proto 找到它
函数的 prototype 是一个对象
对象的 proto 属性指向原型， proto 将对象和原型连接起来组成了原型链

image.png

重点：继承的本质其实是原型链的形成；

继承实现的效果是：

 Child.prototype.__proto__ = Parent.Prototype；(子类原型的 __proto__  指向父类原型)

// 然后我们知道的是 parent.__proto__ = Parent.Prototype；
// 所以只要 Child.prototype = parent；（子类的原型指向父类的实例即可，父类的实例是共享一个父类的原型对象的）

应用：原型继承

组合继承

function Parent() {
  this.val = value;
}
Parent.prototype.getValue = function() {
   console.log(this.val);
}

function Child(val) {
  Parent.call(this, value);
}
Child.prototype = new Parent();

核心：子类的构造函数中通过 Parent.call(this)来继承父类的属性，
然后改变子类的原型为 new Parent() 来继承父类的函数；
这种继承的优点在于构造函数可以传参，不会和父类应用属性共享，可以复用父类的函数；
缺点：继承父类函数的时候调用了父类的构造函数，导致子类的原型上多了不需要的父类属性，存在内存上的浪费

寄生组合继承（对组合继承优化）

function Parent(value) {
  this.val = value;
}
Parent.prototype.getValue = function() {
  console.log(this.val);
}

function Child() {
  Parent.call（this，value）
}
// 创建一个对象，以 Parent.protptype 为原型，而且拥有constructor属性的；
Child.Prototype = Object.create(Parent.protptype，{
  constructor: {
   value: Child,
   enumerable: false,
   writeable: true,
   configurable: true
  }
})

核心：将父类的原型赋值给了子类，并且将构造函数设置为子类

Class 继承

Class Parent {
  constructor（value）{
      this.val = value;
  }
  getValue() {
     console.log(this.val);
  }
}

Class Child extends Parent {
 constructor(value) {
    super(value)
    this.val = value;
  }
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

class 实现继承的核心在于使用 extends 表明继承哪个父类，并且在子类构造函数中必须调用 super，因为这段代码可以看成 Parent.call(this, value).
js 中并不存在类，class 语法只是语法糖；

组合继承图：

f657770d9caa88ff0f2ddce6adf679f.png

寄生继承图：

d7179e0ad06ddce5c4b015297e15f01.png
Class 继承图：

0ec8b771ceb3c6eb4ad9f8d126607cd.png

4.原型和原型链

猜你喜欢

热点阅读