初學(xué)者快速學(xué)會javascript原型，原型鏈，原型繼承

hiYoHoo 發(fā)布于2019-08-21 16:22 / 1725人閱讀

摘要：學(xué)習(xí)，總繞不開原型，原型鏈，繼承等等這些知識。對象那么好，怎么才能找一個呸，其實是創(chuàng)建創(chuàng)建對象的方法對象字面量工廠模式構(gòu)造函數(shù)模式原型模式等。原型鏈有什么用來談?wù)劺^承，繼承可以利用構(gòu)造函數(shù)，使用屬性等來實現(xiàn)。

初學(xué)者學(xué)習(xí)javascript可能會感覺很困擾，但是你一旦真正了解了它，我相信你會愛上它。學(xué)習(xí)ECMAScript，總繞不開原型，原型鏈，繼承等等這些知識。今天把它們放在一塊兒，首先把理解他們作為小目標(biāo)，構(gòu)建一個完備的結(jié)構(gòu)。不要眼高手低，我們一步一步來理解。

從對象的開始

1.何為對象？對象是數(shù)據(jù)，這個數(shù)據(jù)擁有屬性和方法，有可以進(jìn)行封裝和繼承等等的特點。
2.何為面向?qū)ο缶幊蹋棵嫦驅(qū)ο缶幊淌且粋€使用一系列的對象進(jìn)行協(xié)作，從而靈活高效地解決復(fù)雜問題的編程思想。

對象那么好，怎么才能找一個（呸，其實是創(chuàng)建）？

創(chuàng)建對象的方法：對象字面量、工廠模式、構(gòu)造函數(shù)模式、原型模式等。
前面三個暫且不看，他們的短板大家應(yīng)該都知道。主要來看如何用原型模式創(chuàng)建一個對象。

來個看爛了的例子，把一個“人”作為對象，盡情地創(chuàng)建吧：

function Person(){
}
Person.prototype.name = "程流流";//是的，我的名字
Person.prototype.age = 21;
Person.prototype.job = "大學(xué)生";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"程流流"
var person2 = new Person()；
person2.sayName(); //"程流流"
alert(person1.sayName == person2.sayName); //true

例子雖然簡單，但是內(nèi)容豐富，來解剖一下：
這個例子里面有構(gòu)造函數(shù)，原型對象，實例對象， prototype
屬性，constructor屬性，_proto_屬性，很豐富吧。關(guān)于他們之間的關(guān)系，我學(xué)習(xí)的時候很容易弄混掉（因為我大腦不夠聰慧，這個沒辦法），但是有天上課的時候突然就想明白了，然后就寫在了書上。看圖：

是不是很簡單，明白了他們都是什么以及之間的關(guān)系后我們進(jìn)行到下一步...

原型鏈

原型鏈?zhǔn)且粭l鏈。我們前面利用構(gòu)造器（就是constructor）創(chuàng)建了新對象，新對象都有prototype屬性，而我們new出來的新實例對象有默認(rèn)的一個只想構(gòu)造器原型（原型對象）的內(nèi)部指針_proto_，那個原型prototype它也是個對象，它也有自己的原型，原型對象又包含一個指向另一個原型的指針，相應(yīng)地，另一個原型中也包含著一個指向另一個構(gòu)造函數(shù)
的指針。假如另一個原型又是另一個類型的實例，那么上述關(guān)系依然成立，如此層層遞進(jìn)，就構(gòu)成了實例與原型的鏈條。

原型鏈有什么用

來談?wù)?strong>繼承，繼承可以利用構(gòu)造函數(shù)，使用prototype屬性等來實現(xiàn)。原型繼承主要就是用原型鏈來實現(xiàn)，怎么個繼承法呢？就是利用原型讓一個引用類型來繼承另一個引用類型的屬性和方法。
記得上面的草圖吧，我來畫一個好看點的：

看到了嗎，沿著原型鏈一環(huán)一環(huán)的繼承。

初學(xué)者看到這里相信已經(jīng)對面向?qū)ο缶幊逃嘘P(guān)的重要概念有了一定理解，下一篇來談一談有關(guān)閉包的知識。第一次寫文章，文筆太差，也沒有高深的技術(shù)在里面，如果幫助初學(xué)者理清了思路，我的目的就達(dá)到了。