你也學得會的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的工程化開發等。