JS之原型與原型鏈

Fourierr 發(fā)布于2019-08-23 12:56 / 386人閱讀

摘要：因此，就會(huì)形成一個(gè)原型鏈對(duì)象到原型，再到原型的原型如果一層層地上溯，所有對(duì)象的原型最終都可以上溯到，即構(gòu)造函數(shù)的屬性。

對(duì)于很多前端開(kāi)發(fā)者而言，JavaScript中原型與原型鏈?zhǔn)且粋€(gè)比較容易疑惑的點(diǎn)，所以本文記錄了自己對(duì)應(yīng)這方面的一點(diǎn)理解，以后有更深的理解再來(lái)更新。

對(duì)象

想要了解原型與原型鏈，首先要了解什么是對(duì)象？面向?qū)ο缶幊蹋∣bject Oriented Programming，縮寫(xiě)為 OOP）是目前主流的編程范式，即把實(shí)際上各種復(fù)雜關(guān)系抽象為多個(gè)對(duì)象后對(duì)它們進(jìn)行分工合作從而完成對(duì)現(xiàn)實(shí)環(huán)境的模擬。因此對(duì)象是單個(gè)實(shí)物的抽象，抽象所得的對(duì)象是一個(gè)容器，擁有屬性（property）和方法（method）。例如，我們把學(xué)生抽象為student對(duì)象，那么屬性就可以用來(lái)記錄具體是哪一個(gè)年級(jí)的學(xué)生（如初一、高一等），用方法來(lái)表示學(xué)生的某種行為（如學(xué)習(xí)、玩耍等）。

構(gòu)造函數(shù)（constructor）、實(shí)例對(duì)象與繼承

當(dāng)我們想要使用面向?qū)ο缶幊虝r(shí)，首要任務(wù)是生成對(duì)象。在JavaScript中，構(gòu)造函數(shù)（constructor）就是專(zhuān)門(mén)用來(lái)生成實(shí)例對(duì)象的。一個(gè)構(gòu)造函數(shù)，可以生成多個(gè)實(shí)例對(duì)象，這些實(shí)例對(duì)象都有相同的結(jié)構(gòu)。

var Student= function () {
  this.age= 18;
};

var s = new Student();
s.age// 18

特別需要注意的是：

以上代碼中，Student就是構(gòu)造函數(shù)，但是為了與普通函數(shù)區(qū)分，其名字的首字母要大寫(xiě)。

函數(shù)體內(nèi)部使用了this關(guān)鍵字，代表了所要生成的對(duì)象實(shí)例。

生成對(duì)象的時(shí)候，必須使用new命令。只有new了才會(huì)生成新的實(shí)例對(duì)象。

除了用new命令生成新的實(shí)例對(duì)象，我們還可以通過(guò)Object.create() 來(lái)創(chuàng)建，這種方法適用于我們沒(méi)有辦法拿到構(gòu)造函數(shù)而只能拿到一個(gè)現(xiàn)有的對(duì)象。

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對(duì)象為原型，生成了student2對(duì)象。student2繼承了student1的所有屬性和方法。

原型對(duì)象（prototype）

首先讓我們來(lái)了解一下為什么會(huì)有原型對(duì)象（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

從以上代碼可以看到，通過(guò)構(gòu)造函數(shù)實(shí)例出的對(duì)象，雖然都具有g(shù)reeting方法，但是因?yàn)檫@個(gè)方法是生成在自身的每個(gè)實(shí)例對(duì)象上，也就是每生成一個(gè)實(shí)例就會(huì)新建一個(gè)greeting方法。但是其實(shí)greeting方法都是同樣的，沒(méi)有必要多次生成造成資源浪費(fèi)，于是JavaScript的原型對(duì)象就誕生了。JavaScript規(guī)定，每個(gè)函數(shù)都有一個(gè)prototype屬性，指向一個(gè)對(duì)象。

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í)例對(duì)象cat1和cat2的原型對(duì)象。原型對(duì)象上添加一個(gè)color屬性，結(jié)果，實(shí)例對(duì)象都共享了該屬性。

原型對(duì)象的屬性不是實(shí)例對(duì)象自身的屬性。只要修改原型對(duì)象，變動(dòng)就立刻會(huì)體現(xiàn)在所有實(shí)例對(duì)象上。

Animal.prototype.color = "yellow";
cat1.color // "yellow"
cat2.color // "yellow"

如果實(shí)例對(duì)象自身就有某個(gè)屬性或方法，它就不會(huì)再去原型對(duì)象尋找這個(gè)屬性或方法。

cat1.color = "black";
cat1.color // "black"
cat2.color // "yellow"
Animal.prototype.color // "yellow";

原型鏈（prototype chain）

JavaScript 規(guī)定，所有對(duì)象都有自己的原型對(duì)象（prototype）。一方面，任何一個(gè)對(duì)象，都可以充當(dāng)其他對(duì)象的原型；另一方面，由于原型對(duì)象也是對(duì)象，所以它也有自己的原型。因此，就會(huì)形成一個(gè)“原型鏈”（prototype chain）：對(duì)象到原型，再到原型的原型……

如果一層層地上溯，所有對(duì)象的原型最終都可以上溯到Object.prototype，即Object構(gòu)造函數(shù)的prototype屬性。也就是說(shuō)，所有對(duì)象都繼承了Object.prototype的屬性。Object.prototype的原型是null。null沒(méi)有任何屬性和方法，也沒(méi)有自己的原型。因此，原型鏈的盡頭就是null。

總結(jié)

記住下面幾句話，這幾句話能解釋一切關(guān)于原型方面的問(wèn)題：
當(dāng) new 一個(gè)函數(shù)的時(shí)候會(huì)創(chuàng)建一個(gè)對(duì)象，『函數(shù).prototype』等于『被創(chuàng)建對(duì)象.__proto__』

一切函數(shù)都是由 Function 這個(gè)函數(shù)創(chuàng)建的，所以『Function.prototype === 被創(chuàng)建的函數(shù).__proto__』

一切函數(shù)的原型對(duì)象都是由 Object 這個(gè)函數(shù)創(chuàng)建的，所以『Object.prototype === 一切函數(shù).prototype.__proto__』