JS原型相關

東東dd發表於2019-02-11
JS原型

個人對於原型鏈的相關東西一直處於一個很混亂的狀態，一直沒找時間梳理，春節之際給自己放個假，也整理下自己想看的東西

相關書籍《你不知道的JavaScript上卷》

  • for...in會遍歷原型鏈上所有屬性

屬性的設定和遮蔽

假設有一個物件myObj，執行語句

myObj.foo = "a";
複製程式碼

可能出現的幾種情況：

  • 如果myObj的原型鏈和myObj都沒有這個屬性，則會直接新增到myObj上
  • 如果myObj有改屬性，則會修改已有屬性
  • 如果foo存在在原型鏈上，並且沒有被標記為只讀，則會直接在myObj上新增一個foo，他會遮蔽原型鏈上的foo
  • 如果foo存在在原型鏈上，並且被標記為只讀，則無法修改該屬性，也無法賦值
  • 如果foo存在在原型鏈上且是一個setter，則會呼叫，不會新增到myObj上

"類"函式

經常看到這種寫法

function Foo () {};
var a = new Foo();
複製程式碼

這裡執行new的這一步實際是將a的原型鏈指向Foo.prototype,注意這裡比較坑的是new的時候並不是複製Foo.prototype而是直接指向，所以如果new多個物件，他們所有的原型鏈都指向同一個物件！

"建構函式"

function Foo () {};
var a = new Foo();
Foo.prototype.constructor === Foo; //true
a.constructor === Foo;
複製程式碼

使用Object.create()繼承

Object.create()會建立一個新物件，並把該物件的原型鏈關聯到指定物件上;

// Object.create()的polyfill程式碼
if (!Object.create) {
    Object.create = function (obj) {
        function F () {}
        F.prototype = obj;
        return new Foo();
    }
}
複製程式碼

檢查“類”的關係

  • 通過instanceof
function Foo () {}
Foo.prototype.blah = 'a';
var a = new Foo();
a instanceof Foo //true;
複製程式碼

這裡判斷的是a的原型鏈是否有指向Foo.prototype;

幾個方法

  • Object.isPrototypeOf();
  • Object.getPrototypeOf();

相關文章