原型以及原型鏈等相關(guān)概念總是離不開構(gòu)造函數(shù)。下面我們先從一個構(gòu)造函數(shù)來看啊易。
一、構(gòu)造函數(shù)創(chuàng)建對象
function Person(name,sex) {
this.name=name;
this.sex=sex;
}
var p1=new Person('小明','男');
console.log(p1.name);//小明
console.log(p1.sex);//男
通過new 構(gòu)造函數(shù)饮睬，創(chuàng)建了一個Person對象租谈。
思考：在new的過程中，整個執(zhí)行過程是怎么樣的捆愁？
- 當(dāng)new一個函數(shù)的時候割去，整個函數(shù)會作為構(gòu)造函數(shù)創(chuàng)建一個對象。
- 函數(shù)里面的this代表創(chuàng)建的這個對象昼丑。給this添加屬性就是給構(gòu)造函數(shù)創(chuàng)建的對象添加屬性呻逆。
- 上述代碼的執(zhí)行過程：
（1）創(chuàng)建一個空對象p1。
（2）執(zhí)行構(gòu)造函數(shù)菩帝，給p1添加屬性咖城。所以p1是一個對象（Person(name:'小明'，'男')）
二呼奢、原型
在以上構(gòu)造函數(shù)上宜雀，加一方法
function Person(name,sex) {
this.name=name;
this.sex=sex;
}
Person.prototype.sayName=function() {
console.log(this.name);
}
var p1=new Person('小明','男');
p1.sayName();//小明。
在上面的例子中握础，出現(xiàn)了prototype這個東西辐董，這個東西就和我們所說的原型有關(guān)。下面對原型來談?wù)勗汀?/p>
- 任何函數(shù)在聲明之后有一個prototype這個屬性弓候。其值是一個對象郎哭。
Paste_Image.png
- 對象里面有個proto隱藏屬性，指向構(gòu)造函數(shù)的原型對象菇存。(p1.proto===Person.prototype)
- 當(dāng)訪問對象的屬性時先從對象本身里找，找不到再從原型對象里找邦蜜。
下面我們畫出上面代碼的原型圖依鸥，以便更好的理解。
Paste_Image.png
在上面的代碼中我們p1中沒有sayName這個方法悼沈，在原型對象里找到了sayName這個方法贱迟。
三姐扮、 constructor
還是上面的例子，上面我們說了Person.prototype里面有個一個constructor屬性衣吠，那這個屬性是什么勒茶敏？
- constructor指向?qū)ο蟮膭?chuàng)造者。即Person.prototype.constructor===Person缚俏。
因為Person.prototype===p1.proto
因此有p1.proto.constructor===Person惊搏。
四、 原型鏈忧换，有了上面的知識恬惯，下面我們可以開始來看看原型鏈了
function Person(name,sex) {
this.name=name;
this.sex=sex;
}
Person.prototype.sayName=function() {
console.log(this.name)
}
var p1=new Person('小明','男')
p1.sayName();
p1.toString();
通過上面的原型分析，我們知道了p1的sayName方法來自其原型對象亚茬。那toString來自哪里勒酪耳？我們上面并沒有在其原型對象上綁定toString方法。
對象是由函數(shù)new出來的刹缝，那Person.prototype這個對象是由什么函數(shù)創(chuàng)建而來的碗暗？
- 我們來看一下原型鏈的取值圖
Paste_Image.png
可以發(fā)現(xiàn)Person.prototype這個對象是由object創(chuàng)建的
- 通過原型鏈取值圖畫出原型鏈圖
Paste_Image.png
通過這個圖，我們就知道toSring是由哪來的梢夯。
以上就是我對原型知識的一些理解讹堤。
