前端面試5：原型鏈

這裏有一份簡潔的前端知識體系等待你查收，看看吧，會有驚喜哦~若是以爲不錯，懇求star哈~

課程思惟導圖

Q：JavaScript如何建立對象？

// 字面量建立對象
var o1 = {name = "o1"};
var o2 = new Object({name : "o2"});
------------------------------------------
// 構造函數建立對象
var M = function () {
    this.name = "o3";
}
var o3 = new M();
------------------------------------------
// Object.create建立對象
var p = {name : 'o4'};
var o4 = Object.create(p);
複製代碼

Q：原型、構造函數、實例、原型鏈的關係如何？

1. javascript中的繼承是經過原型鏈來體現的。
2. 每一個對象都有一個__proto__屬性，指向構造函數的prototype。
3. 訪問一個對象的屬性時，先在基本屬性中查找，若是沒有，再沿着__proto__這條鏈向上找，這就是原型鏈。

注：咱們能夠經過hasOwnProperty方法來判斷一個屬性是否從原型鏈中繼承而來。

Q：instanceof的原理是怎樣的？

instanceof是原型鏈繼承中的重要環節，對instanceof的理解有利於理解原型鏈繼承的機制。

以A instanceof B爲例

1. instanceof的普通的用法，檢測B.prototype是否存在於參數A的原型鏈上。
2. 繼承中判斷實例是否屬於它的父類

簡單理解就是沿着A的__proto__跟B的prototype尋找，若是能找到同一引用，返回true，不然返回false。

如下是一些示例：

// 因爲函數也是對象，對象是函數建立的，因此有：
fn.__proto__ === Function.prototype
Object.__proto__ === Function.prototype
------------------------------------------
// Function是自身建立的，因此有：
Function.__proto__ === Function.prototype
------------------------------------------
// Function.prototype也是對象，因此有：
Function.prototype.__proto__ === Object.prototype
------------------------------------------
function Person() {}
console.log(Object instanceof Object);     //true

//第一個Object的原型鏈：Object=>Object.__proto__ => Function.prototype=>Function.prototype.__proto__=>Object.prototype
//第二個Object的原型：Object=> Object.prototype

console.log(Function instanceof Function); //true
//第一個Function的原型鏈：Function=>Function.__proto__ => Function.prototype
//第二個Function的原型：Function=>Function.prototype

console.log(Function instanceof Object);   //true
//Function=>
//Function.__proto__=>Function.prototype=>Function.prototype.__proto__=>Object.prototype
//Object => Object.prototype

console.log(Person instanceof Function);      //true
//Person=>Person.__proto__=>Function.prototype
//Function=>Function.prototype

console.log(String instanceof String);   //false
//第一個String的原型鏈：String=>
//String.__proto__=>Function.prototype=>Function.prototype.__proto__=>Object.prototype
//第二個String的原型鏈：String=>String.prototype

console.log(Boolean instanceof Boolean); //false
//第一個Boolean的原型鏈：
Boolean=>Boolean.__proto__=>Function.prototype=>Function.prototype.__proto__=>Object.prototype
//第二個Boolean的原型鏈：Boolean=>Boolean.prototype

console.log(Person instanceof Person); //false
//第一個Person的原型鏈：
Person=>Person.__proto__=>Function.prototype=>Function.prototype.__proto__=>Object.prototype
//第二個Person的原型鏈：Person=>Person.prototype
複製代碼

Q：new運算符的實現機制？

var new2 = function (func) {
    var o = Object.create(func.prototype);
    var k = func.call(o);
    if (typeof k === 'object') {
        return k;
    } else {
        return o;
    }
}
複製代碼

1. 建立一個新對象，繼承自func.prototype
2. 執行構造函數，this會指向新建立的對象
3. 若是構造函數返回一個對象，則該對象即是new出來的結果，若是構造函數沒有返回對象，那麼new出來的結果爲步驟1建立的對象。