深入JavaScript之原型和原型鏈

所有引用型別（函式、陣列、物件）都擁有__proto__屬性（隱式原型）

所有函式擁有prototype屬性（顯式原型）（僅限函式）

原型物件：擁有prototype屬性的物件，在定義函式時就被建立

//建立建構函式  
function word(words) 
word.prototype = 
} //建立例項 
var w = new word("hello world"); 
w.print = function() 
w.print(); //hello world 
w.alert(); //hello world

print()方法是w例項本身具有的方法，所以w.print()列印hello world；

alert()不屬於w例項的方法，屬於建構函式的方法，

w.alert()也會列印hello world，因為例項繼承建構函式的方法

例項w的隱式原型指向它建構函式的顯式原型

w.__proto__ === word.prototype

當呼叫某種方法或查詢某種屬性時，首先會在自身呼叫和查詢，如果自身並沒有該屬性或方法，則會去它的__proto__屬性中呼叫查詢，也就是它建構函式的prototype中呼叫查詢。所以很好理解例項繼承建構函式的方法和屬性：

w本身沒有alert()方法，所以會去word()的顯式原型中呼叫alert()，即例項繼承建構函式的方法。

function.prototype.a = "a";  
object.prototype.b = "b"; 
function person(){} 
console.log(person); //function person() 
let p = new person(); 
console.log(p); //person {} 物件 
console.log(p.a); //undefined 
console.log(p.b); //b

想一想

p.a列印結果為undefined

p.b結果為b

p是person()的例項，是乙個person物件，

它擁有乙個屬性值__proto__，並且__proto__是乙個物件，

包含兩個屬性值constructor和__proto__。

console.log(p.__proto__.__proto__); //物件{}，擁有很多屬性值

我們會發現

p.__proto__.constructor返回的結果為建構函式本身

p.__proto__.__proto__有很多引數。

我們呼叫constructor屬性，p.__proto__.__proto__.constructor得到擁有多個引數的object()函式，person.prototype的隱式原型的constructor指向object()，即person.prototype.__proto__.constructor == object()。

從p.__proto__.constructor返回的結果為建構函式本身得到person.prototype.constructor == person()所以p.__proto__.__proto__== object.prototype 。

所以p.b列印結果為b，p沒有b屬性，會一直通過__proto__向上查詢，最後當查詢到object.prototype時找到，最後列印出b，向上查詢過程中，得到的是object.prototype，而不是function.prototype，找不到a屬性，所以結果為undefined，這就是原型鏈，通過__proto__向上進行查詢，最終到null結束。

查詢屬性，如果本身沒有，則會去__proto__中查詢，也就是建構函式的顯式原型中查詢，如果建構函式中也沒有該屬性，因為建構函式也是物件，也有__proto__，那麼會去它的顯式原型中查詢，一直到null，如果沒有則返回undefined。

通過__proto__形成原型鏈而非protrotype

原型鏈最終指向null

深入JavaScript之原型和原型鏈

深入javascript之原型和原型鏈

JavaScript系列深入之從原型到原型鏈

javascript之原型，原型鏈

深入JavaScript之原型和原型鏈

深入javascript之原型和原型鏈

JavaScript系列 深入之從原型到原型鏈

javascript之原型，原型鏈

相關推薦

JavaScript系列深入之從原型到原型鏈