1. 程式人生 > 實用技巧 >javascript之原型(prototype)

javascript之原型(prototype)

一、由來

  1. 當初在設計javascript時不想引入類的概念,但要實現類的功能。借鑑了高階面嚮物件語言中,建立一個例項時,其實就是執行了該類的建構函式,因此,作者用new + 建構函式 的形式來表示生成的例項。這裡提到的建構函式其實就是我們平時常見到的普通函式,只是為了區分,首字母大寫。
  2. 還有一個問題:這樣創建出來的例項,來自同一個“類”,但卻不知道,這時提出了prototype的概念,用來存放該例項的建構函式。
  3. 除了通過bind繫結的沒有,每個函式都有prototype屬性,prototype屬性包含了contructor和在建構函式中定義的所有屬性和方法。其中,contructor是真正存放該例項的建構函式的地方。

二、與constructor的關係

  其實真正存放例項的建構函式是在constructor,constructor指向建構函式,constructor又是prototype的屬性,prototype還是建構函式的屬性。是不是亂了,反正我是傻了~~

  

三、prototype 和 __proto__ 區別:

  建構函式對應的是prototype,例項物件對應的是_proto_,兩者都是相同的,都指向建構函式的原型。 

  例子:

function Demo(){
            this.name = "demo";
        }

        const demo = new Demo();

        console.dir(Demo.prototype);
        console.dir(demo.__proto__);
        console.log(Demo.prototype == demo.__proto__);

  

四、相關的方法

  1.判斷例項的建構函式:Object instanceof Function 和 Function.prototype.isPrototypeOf(Object)

  例如:

        function Demo(){
            this.name = "demo";
        }

        const demo = new Demo();

        console.log(demo instanceof Demo);
        console.log(Demo.prototype.isPrototypeOf(demo));

  

2.檢測屬性來著與例項還是原型:hasOwnProperty()

例如:

function Demo(){
            this.name = "demo";
        }
        Demo.prototype.age = 11;

        const demo = new Demo();
        console.dir(demo.name+'.....'+demo.hasOwnProperty('name'));     //demo.....true
        console.dir(demo.age+'.....'+demo.hasOwnProperty('age'));       //11.....false

 

五、查閱的資料

  1. 阮一峰的網路日誌
  2. 神祕者007-簡書