你也学得会的Js原型和原型链啦

概述

1.在js中所有的实例对象(除了null和undefined)都有一个__proto__(注意不是prototype)属性指向构造函数的原型(即下图中的num.__proto__===Number.prototype;str.__proto__===Object.prototype)

2.在js中所有的函数不但有个__proto__属性，还有一个prototype属性(函数实例是没有prototype属性的)

3.函数的prototype属性是一个 实例对象，这个对象主要包括了constructor和__proto__两个属性,constructor属性指向函数本身(即下图中的Foo.prototype.constructor===Foo)，__proto__属性指向创建Foo.prototype实例对象的函数(这里是Object,如果改写了Foo.prototype，则会不一样)的原型(下图中的 Foo.prototype.__proto__===Object.prototype)

4.所有函数的__proto__属性指向Function的prototype属性

5.在Js中所有的对象(null和undefined除外)都继承自Object且 Object.prototype.__proto__===null

原型

有了以上的理论基础，下图所示就是Js中所谓的原型啦(哇~，这图真JB丑，没办法，男人嘛)

原型链

下图所示就是Js中所谓的原型链啦(这图稍微好看点，不错不错有点进步)，不知道细心的你发现没有Function的prototype和__proto__属性都是指向Function.prototype的(有些高大上的公司面试的时候是有可能会问这个的呦)

应用场景

原型和原型链最主要的应用场景就是继承了，基本的形式就是当访问一个实例对象上的属性或方法的时候要是自己身上没有，就往__proto__属性上找，如果没有的话再往上找，直到找到Object.prototype.__proto__上为止，要是实在找不到的话就返回undefined.这里举一个组合继承的例子，应该都懂的啦，

function Person(name){
    this.name=name;
}
Person.prototype.sayHello=function(){
     alert(this.name);
}
function Teacher(name,career){
    Person.call(this,name);
    this.career=career;
}
Teacher.prototype=Person.prototype;
Teacher.prototype.constructor=Teacher;
Teacher.prototype.sayWord=function(){
    this.sayHello();
    alert(this.career);
}
var teacher=new Teacher('隔壁老王','我是老师');
teacher.sayWord();

复制代码

虽然我在上面写的很起劲，但是在实际的应用中上面的继承方式可能已经过时了，因为我们有了ES6的class,Bable转码，webpack打包，react/vue的工程化开发等。

转载于:https://juejin.im/post/5cac93e0f265da039a3d50d8