填坑-十萬個為什麼？（15）

程式碼牛發表於2018-12-31

簡介:很多概念不清或忘記，重新構建自己的知識體系。每天問自己1~多個問題。我是菜鳥 成為大神之路!

1. new和instanceof的內部機制？

  • 建立一個新物件，同時繼承物件類的原型，即Person.prototype；
  • 執行物件類的建構函式，同時該例項的屬性和方法被this所引用，即this指向新構造的例項；
  • 如果建構函式return了一個新的“物件”，那麼這個物件就會取代整個new出來的結果。如果建構函式沒有return物件，那麼就會返回步驟1所建立的物件，即隱式返回this。（一般情況下建構函式不會返回任何值，不過在一些特殊情況下，如果使用者想覆蓋這個值，可以選擇返回一個普通的物件來覆蓋。）

用程式碼來闡述

// let p = new Person()
let p = (function () {
    let obj = {};
    obj.__proto__ = Person.prototype;
    
    // 其他賦值語句...
    
    return obj;
})();
複製程式碼

下面通過程式碼闡述instanceof的內部機制，假設現在有x instanceof y一條語句，則其內部實際做了如下判斷：

while(x.__proto__!==null) {
    if(x.__proto__===y.prototype) {
        return true;
    }
    x.__proto__ = x.__proto__.proto__;
}
if(x.__proto__==null) {return false;}
複製程式碼

x會一直沿著隱式原型鏈__proto__向上查詢直到x.__proto__.__proto__......===y.prototype為止，如果找到則返回true，也就是x為y的一個例項。否則返回false，x不是y的例項。 觸類旁通

function F() {}
function O() {}

O.prototype = new F();
var obj = new O();

console.log(obj instanceof O); // true
console.log(obj instanceof F); // true
console.log(obj.__proto__ === O.prototype); // true
console.log(obj.__proto__.__proto__ === F.prototype); // true
複製程式碼

複製程式碼根據new的內部機制改寫上面程式碼

function F() {}
function O() {}

var obj = (function () {
    var obj1 = {};
    obj1.__proto__ = F.prototype; // new F();
    O.prototype = obj1; // O.prototype = new F();
    obj.__proto__ = O.prototype; // new O();
    obj.__proto__ = obj1;
    return obj;
})();
複製程式碼

複製程式碼結合instanceof內部機制很容易得出正確答案。 如果稍微調整一下程式碼順序，結果將迥然不同

function F() {}
function O() {}

var obj = new O();
O.prototype = new F();

console.log(obj instanceof O); // false
console.log(obj instanceof F); // false
console.log(obj.__proto__ === O.prototype); // false
console.log(obj.__proto__.__proto__ === F.prototype); // false
複製程式碼

參考文章：
①騰訊前端面試篇（一）

相關文章