JavaScript 之 原型和原型鏈

幾個概念

1. 構造函數： 構造函數實際上是一個普通函數，通過new操作符，可以利用構造函數快速創建對象；
2. prototype：每個構造函數自身上都會有一個prototype屬性，該屬性值爲一個對象，這個對象具有一個constructor屬性，constructor指向構造函數自身；
3. 實例： 通過構造函數創建的對象，可以看做是該構造函數的實例；
4. __proto__：通過構造函數創建的每個對象上面，都會有一個__proto__屬性，該屬性指向構造函數的prototype；

什麼是原型

在JavaScript中，每個對象會有一個原型對象。對象會從原型對象繼承一些屬性和方法。

什麼是原型鏈

在JavaScript中，訪問一個對象的屬性時，JS引擎會首先在該對象自身上線查找該屬性。如果找到了，則直接返回該屬性的值；如果沒有找到，則會去改對象的原型上面繼續查找。如果對象的原型上面也沒有這個屬性，則繼續在原型對象的上原型上面查找，如此一級級繼續往上，直到原型爲null，此時JS引擎返回該對象的屬性值爲undefined。

繼承

        /**
         * two methods to implement inheritance;
        */

        function Base(type){ 
            this.type = type;
        }
        Base.prototype.base=function(){
            console.log(`${this.type} is in base func`);
        }
        // method one
        function Sub(type){
            this.type = type;
        }
        Sub.prototype = Object.create(new Base('base'));
        Sub.prototype.sub=function(){
            console.log(`${this.type} is in sub func`);
        }

        // method two
        function Foo(type){
            this.type = type;
        }
        Object.setPrototypeOf( Foo.prototype, new Sub('sub'));
        Foo.prototype.foo=function(){
            console.log(`${this.type} is in foo func`);
        }

        let sub = new Sub('sub1');
        sub.base();
        sub.sub();
        sub instanceof Sub; // true
        sub instanceof Base; // true

        let foo = new Foo('foo1');
        foo.base();
        foo.sub();
        foo.foo();
        foo instanceof Foo; // true
        foo instanceof Sub; // true
        foo instanceof Base; // true

一些實例

Object.getPrototype

預測下面幾個表達式的結果

Object.getPrototypeOf(function(){}).constructor === Function;
Object.getPrototypeOf(Function).constructor === Function;
Object.getPrototypeOf(Object.getPrototypeOf(Function)).constructor === Object;

答案：

true;

如何創建一個沒有任何原型的對象？

let obj = Object.create(null);
console.log(obj);

這篇medium上獲得8.6K讚的文章Prototypes in JavaScript講得很清楚了。