這篇文章給大家分享的是有關(guān)JavaScript中原型與原型鏈的案例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
對于很多前端開發(fā)者而言，JavaScript中原型與原型鏈?zhǔn)且粋€比較容易疑惑的點(diǎn)，所以本文記錄了自己對應(yīng)這方面的一點(diǎn)理解，以后有更深的理解再來更新。
對象
想要了解原型與原型鏈，首先要了解什么是對象？面向?qū)ο缶幊蹋∣bject Oriented Programming，縮寫為 OOP）是目前主流的編程范式，即把實(shí)際上各種復(fù)雜關(guān)系抽象為多個對象后對它們進(jìn)行分工合作從而完成對現(xiàn)實(shí)環(huán)境的模擬。因此對象是單個實(shí)物的抽象，抽象所得的對象是一個容器，擁有屬性（property）和方法（method）。例如，我們把學(xué)生抽象為student對象，那么屬性就可以用來記錄具體是哪一個年級的學(xué)生（如初一、高一等），用方法來表示學(xué)生的某種行為（如學(xué)習(xí)、玩耍等）。
構(gòu)造函數(shù)（constructor）、實(shí)例對象與繼承
當(dāng)我們想要使用面向?qū)ο缶幊虝r，首要任務(wù)是生成對象。在JavaScript中，構(gòu)造函數(shù)（constructor）就是專門用來生成實(shí)例對象的。一個構(gòu)造函數(shù)，可以生成多個實(shí)例對象，這些實(shí)例對象都有相同的結(jié)構(gòu)。
重慶分公司
重慶分公司
var Student= function () {
this.age= 18;
};
var s = new Student();
s.age// 18特別需要注意的是：
以上代碼中，Student就是構(gòu)造函數(shù)，但是為了與普通函數(shù)區(qū)分，其名字的首字母要大寫。
函數(shù)體內(nèi)部使用了this關(guān)鍵字，代表了所要生成的對象實(shí)例。
生成對象的時候，必須使用new命令。只有new了才會生成新的實(shí)例對象。
除了用new命令生成新的實(shí)例對象，我們還可以通過Object.create() 來創(chuàng)建，這種方法適用于我們沒有辦法拿到構(gòu)造函數(shù)而只能拿到一個現(xiàn)有的對象。
var student1 = {
name:'Solar',
age:18,
greeting:function(){
console.log('Hello!');
}
};
var student2 = Object.create(student1);
student2.name//Solar
student2.greeting()//Hello!上面代碼中，Object.create方法以student1對象為原型，生成了student2對象。student2繼承了student1的所有屬性和方法。
原型對象（prototype）
首先讓我們來了解一下為什么會有原型對象（prototype）？
function Student(name, age) {
this.name = name;
this.age = age;
this.greeting = function(){
console.log('Hello!');
}
}
var student1= new Student('Solar', '18');
var student2 = new Student('Moonbyul', '17');
student1.greeting=== student2.greeting
// false從以上代碼可以看到，通過構(gòu)造函數(shù)實(shí)例出的對象，雖然都具有g(shù)reeting方法，但是因?yàn)檫@個方法是生成在自身的每個實(shí)例對象上，也就是每生成一個實(shí)例就會新建一個greeting方法。但是其實(shí)greeting方法都是同樣的，沒有必要多次生成造成資源浪費(fèi)，于是JavaScript的原型對象就誕生了。JavaScript規(guī)定，每個函數(shù)都有一個prototype屬性，指向一個對象。
function Animal(name) {
this.name = name;
}
Animal.prototype.color = 'white';
var cat1 = new Animal('大毛');
var cat2 = new Animal('二毛');
cat1.color // 'white'
cat2.color // 'white'上面代碼中，構(gòu)造函數(shù)Animal的prototype屬性，就是實(shí)例對象cat1和cat2的原型對象。原型對象上添加一個color屬性，結(jié)果，實(shí)例對象都共享了該屬性。
原型對象的屬性不是實(shí)例對象自身的屬性。只要修改原型對象，變動就立刻會體現(xiàn)在所有實(shí)例對象上。
Animal.prototype.color = 'yellow'; cat1.color // "yellow" cat2.color // "yellow"
如果實(shí)例對象自身就有某個屬性或方法，它就不會再去原型對象尋找這個屬性或方法。
cat1.color = 'black'; cat1.color // 'black' cat2.color // 'yellow' Animal.prototype.color // 'yellow';
原型鏈（prototype chain）
JavaScript 規(guī)定，所有對象都有自己的原型對象（prototype）。一方面，任何一個對象，都可以充當(dāng)其他對象的原型；另一方面，由于原型對象也是對象，所以它也有自己的原型。因此，就會形成一個“原型鏈”（prototype chain）：對象到原型，再到原型的原型……
如果一層層地上溯，所有對象的原型最終都可以上溯到Object.prototype，即Object構(gòu)造函數(shù)的prototype屬性。也就是說，所有對象都繼承了Object.prototype的屬性。Object.prototype的原型是null。null沒有任何屬性和方法，也沒有自己的原型。因此，原型鏈的盡頭就是null。
感謝各位的閱讀！關(guān)于JavaScript中原型與原型鏈的案例分析就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
