阅读 55

原型和原型链,你会了没?

原型和原型链,你会了没?

早就会了?那就再看一遍加深记忆!

还不会,那就认真看一遍,包会哦! image.png

开始理解原型时,我们得明白:

  1. js里的对象分为函数对象普通对象,每个对象都有__proto__属性,但是只有函数对象才有prototype属性。
  2. 寻找函数方法时,会先从function函数里面寻找prototype,没找到就会往js内置Object对象函数里面找,还是找不到就会报错null。

原型

什么是原型?

Object.prototype 就是原型,它是一个对象,我们也称它为原型对象。

我们新建了一个对象,可以发现里面有个constructor构造函数! image.png 每个构造函数(constructor)都有一个原型对象(prototype) image.png

原型链

什么是原型链?

当我们new一个fod()函数实例时,我们并没有给他定义toString()方法,但是该fod还是可以调用toString()。

image.png

原理就是原型链的概念:当查找一个对象属性时,每个对象的原型往上寻找,寻找时候顺着一个链条,其中的所有对象全部找一遍,直到查找到当前对象的属性。如果没找到,就会沿着这个链条往上查找,一直查到Object,如果还没找到,就会报undefined。

原型链有三条公式:

Object.__proto__ === Function.prototype; 
Function.prototype.__proto__ === Object.prototype; 
Object.prototype.__proto__ === null;
复制代码

知道了原型和原型链,但是他们到底是用来干嘛的呢?

原型、原型链的用法

首先我们来了解instanceof运算符:

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上,如果是则返回true。

1.通过原型来给函数新增属性或方法:

function dog(name,age){
    this.name = name;
    this.age = age;
} 
dog.prototype.getMsg = function(){
    console.log(this.name,this.age);//打印 wanwan 1 
} //在原型上添加函数方法。 
let animal = new dog('wanwan',1);//新建实例对象
animal.getMsg();//调用原型上新增的getMsg函数
复制代码

2.通过原型链原理来达到继承:子类构造函数复制父类的自身属性和方法,子类原型只接受父类的原型属性和方法

//创建Carrier载体,用于装载父级原型属性,然后进行重新指定方向
function createCarrier(prototype) {
  function Carrier() {}
  Carrier.prototype = prototype //用super函数的原型,装载传进来的父级函数的prototype原型属性
  return new Carrier() //抛出装载着父级函数prototype原型属性的实例对象
}
//进行父子原型属性转换指向
function prototype(child, parent) {
  let prototype = createCarrier(parent.prototype) //调用Carrier载体,里面是父级的原型属性
  prototype.constructor = child // 把child的函数属性指向父级原型的构造函数,达到父级也装载着子级原型
  child.prototype = prototype //最终把父级与子级的原型,复制到子级的原型上,达到子级继承了父级的属性方法的同时,子级的属性方法也在里面。
}

function Person (age) {
  this.age = age || 18
}
//给Person原型上新增sleep属性方法
Person.prototype.sleep = function () {
  console.log('sleeping')
}

function Child(age, name) {
  Person.call(this, age)
  this.name = name
}

prototype(Child, Person);//调用进行父子原型属性转换指向方法

let py = new Child(18, 'py')
py.name // py
复制代码

总结

总的来说,我们要学会的是函数的prototype指向关系与运用,prototype 是个对象,只有函数上有。__proto__ 是个指向 prototype 的引用,用以辅助原型继承中向上查找的实现。constructor是对象上一个指向构造函数的引用,用来辅助 instanceof 等关键字的实现。

文章分类
前端
文章标签