javascript之原型(prototype)
阿新 • • 發佈:2021-01-03
一、由來
- 當初在設計javascript時不想引入類的概念,但要實現類的功能。借鑑了高階面嚮物件語言中,建立一個例項時,其實就是執行了該類的建構函式,因此,作者用new + 建構函式 的形式來表示生成的例項。這裡提到的建構函式其實就是我們平時常見到的普通函式,只是為了區分,首字母大寫。
- 還有一個問題:這樣創建出來的例項,來自同一個“類”,但卻不知道,這時提出了prototype的概念,用來存放該例項的建構函式。
- 除了通過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