資訊專欄INFORMATION COLUMN
摘要：因此，就會形成一個原型鏈對象到原型，再到原型的原型如果一層層地上溯，所有對象的原型最終都可以上溯到，即構(gòu)造函數(shù)的屬性。
對于很多前端開發(fā)者而言，JavaScript中原型與原型鏈是一個比較容易疑惑的點，所以本文記錄了自己對應(yīng)這方面的一點理解，以后有更深的理解再來更新。
對象想要了解原型與原型鏈，首先要了解什么是對象？面向?qū)ο缶幊蹋∣bject Oriented Programming，縮寫為 OOP）是目前主流的編程范式，即把實際上各種復(fù)雜關(guān)系抽象為多個對象后對它們進行分工合作從而完成對現(xiàn)實環(huán)境的模擬。因此對象是單個實物的抽象，抽象所得的對象是一個容器，擁有屬性（property）和方法（method）。例如，我們把學(xué)生抽象為student對象，那么屬性就可以用來記錄具體是哪一個年級的學(xué)生（如初一、高一等），用方法來表示學(xué)生的某種行為（如學(xué)習(xí)、玩耍等）。
構(gòu)造函數(shù)（constructor）、實例對象與繼承當我們想要使用面向?qū)ο缶幊虝r，首要任務(wù)是生成對象。在JavaScript中，構(gòu)造函數(shù)（constructor）就是專門用來生成實例對象的。一個構(gòu)造函數(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)鍵字，代表了所要生成的對象實例。
生成對象的時候，必須使用new命令。只有new了才會生成新的實例對象。
除了用new命令生成新的實例對象，我們還可以通過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ù)實例出的對象，雖然都具有g(shù)reeting方法，但是因為這個方法是生成在自身的每個實例對象上，也就是每生成一個實例就會新建一個greeting方法。但是其實greeting方法都是同樣的，沒有必要多次生成造成資源浪費，于是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屬性，就是實例對象cat1和cat2的原型對象。原型對象上添加一個color屬性，結(jié)果，實例對象都共享了該屬性。
原型對象的屬性不是實例對象自身的屬性。只要修改原型對象，變動就立刻會體現(xiàn)在所有實例對象上。
Animal.prototype.color = "yellow"; cat1.color // "yellow" cat2.color // "yellow"
如果實例對象自身就有某個屬性或方法，它就不會再去原型對象尋找這個屬性或方法。
cat1.color = "black"; cat1.color // "black" cat2.color // "yellow" Animal.prototype.color // "yellow";原型鏈（prototype chain）
JavaScript 規(guī)定，所有對象都有自己的原型對象（prototype）。一方面，任何一個對象，都可以充當其他對象的原型；另一方面，由于原型對象也是對象，所以它也有自己的原型。因此，就會形成一個“原型鏈”（prototype chain）：對象到原型，再到原型的原型……
如果一層層地上溯，所有對象的原型最終都可以上溯到Object.prototype，即Object構(gòu)造函數(shù)的prototype屬性。也就是說，所有對象都繼承了Object.prototype的屬性。Object.prototype的原型是null。null沒有任何屬性和方法，也沒有自己的原型。因此，原型鏈的盡頭就是null。
總結(jié)記住下面幾句話，這幾句話能解釋一切關(guān)于原型方面的問題：
當 new 一個函數(shù)的時候會創(chuàng)建一個對象，『函數(shù).prototype』 等于 『被創(chuàng)建對象.__proto__』
一切函數(shù)都是由 Function 這個函數(shù)創(chuàng)建的，所以『Function.prototype === 被創(chuàng)建的函數(shù).__proto__』
一切函數(shù)的原型對象都是由 Object 這個函數(shù)創(chuàng)建的，所以『Object.prototype === 一切函數(shù).prototype.__proto__』
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/99101.html
摘要：每一個由構(gòu)造函數(shù)創(chuàng)建的對象都會默認的連接到該神秘對象上。在構(gòu)造方法中也具有類似的功能，因此也稱其為類實例與對象實例一般是指某一個構(gòu)造函數(shù)創(chuàng)建出來的對象，我們稱為構(gòu)造函數(shù)的實例實例就是對象。表示該原型是與什么構(gòu)造函數(shù)聯(lián)系起來的。 本文您將看到以下內(nèi)容： 傳統(tǒng)構(gòu)造函數(shù)的問題 一些相關(guān)概念 認識原型 構(gòu)造、原型、實例三角結(jié)構(gòu)圖 對象的原型鏈 函數(shù)的構(gòu)造函數(shù)Function 一句話說明什么...
摘要：在構(gòu)造函數(shù)中的中定義的屬性和方法，會被創(chuàng)建的對象所繼承下來。從上面的輸出結(jié)果看出，指向了其構(gòu)造函數(shù)的，而本身也是一個對象，其內(nèi)部也有屬性，其指向的是直到最后指向，這條原型鏈才結(jié)束。和都指向，說明原型鏈到終止。 prototype原型對象 每個函數(shù)都有一個默認的prototype屬性，其實際上還是一個對象，如果被用在繼承中，姑且叫做原型對象。 在構(gòu)造函數(shù)中的prototype中定義的屬性...
摘要：原型鏈與繼承當談到繼承時，只有一種結(jié)構(gòu)對象。如果對該圖不怎么理解，不要著急，繼續(xù)往下看基于原型鏈的繼承對象是動態(tài)的屬性包指其自己的屬性。當使用操作符來作用這個函數(shù)時，它就可以被稱為構(gòu)造方法構(gòu)造函數(shù)。 原型鏈與繼承 當談到繼承時，JavaScript 只有一種結(jié)構(gòu)：對象。每個實例對象（object ）都有一個私有屬性（稱之為proto）指向它的原型對象（prototype）。該原型對象也...
摘要：簡單回顧一下構(gòu)造函數(shù)原型和實例對象之間的關(guān)系每個構(gòu)造函數(shù)都有一個原型對象。找到生成構(gòu)造函數(shù)的原型對象的構(gòu)造函數(shù)，搜索其原型對象，找到了。 JS面向?qū)ο蟮某绦蛟O(shè)計之繼承的實現(xiàn) - 原型鏈 前言：最近在細讀Javascript高級程序設(shè)計，對于我而言，中文版，書中很多地方翻譯的差強人意，所以用自己所理解的，嘗試解讀下。如有紕漏或錯誤，會非常感謝您的指出。文中絕大部分內(nèi)容引用自《JavaS...
摘要：我們用一張圖表示構(gòu)造函數(shù)和實例原型之間的關(guān)系好了構(gòu)造函數(shù)和實例原型之間的關(guān)系我們已經(jīng)梳理清楚了，那我們怎么表示實例與實例原型，也就是或者和之間的關(guān)系呢。 開篇： 在Brendan Eich大神為JavaScript設(shè)計面向?qū)ο笙到y(tǒng)的時候，借鑒了Self 和Smalltalk這兩門基于原型的語言，之所以選擇基于原型的面向?qū)ο笙到y(tǒng)，并不是因為時間匆忙，它設(shè)計起來相對簡單，而是因為從一開始B...
閱讀 884·2019-08-30 14:05
閱讀 1773·2019-08-30 11:08
閱讀 3280·2019-08-29 15:41
閱讀 3645·2019-08-23 18:31
閱讀 1587·2019-08-23 18:29
閱讀 606·2019-08-23 14:51
閱讀 2160·2019-08-23 13:53
閱讀 2201·2019-08-23 13:02
