深入淺析JS中原型與原型鏈的區(qū)別

這篇文章將為大家詳細(xì)講解有關(guān)深入淺析JS中原型與原型鏈的區(qū)別，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

正如一些面向?qū)ο笳Z言中所實(shí)現(xiàn)的那樣，在JavaScript中我們有時(shí)也需要?jiǎng)?chuàng)建一個(gè)擁有公共函數(shù)與屬性的類作為父類來減少代碼重復(fù)、實(shí)現(xiàn)類型檢查與實(shí)現(xiàn)更加清晰地代碼結(jié)構(gòu)。在JavaScript中，繼承是通過原型鏈實(shí)現(xiàn)的。了解JavaScript的繼承與原型鏈之前首先需要了解JavaScript中對(duì)象創(chuàng)建的方式。

在JavaScript中創(chuàng)建對(duì)象

JavaScript中對(duì)象創(chuàng)建的方式有兩種：工廠方法（Factory Functions）、構(gòu)造器方法（Constructor Functions） 。

工廠方法

工廠方法在編程領(lǐng)域是一個(gè)非類或構(gòu)造器的返回對(duì)象的方法。在JavaScript中，任何返回不使用new關(guān)鍵詞創(chuàng)建對(duì)象的方法都是工廠方法。

function person(firstName, lastName, age) {
 const person = {};
 person.firstName = firstName;
 person.lastName = lastName;
 person.age = age;
 return person;
}

構(gòu)造器方法

構(gòu)造器方法和工廠方法的區(qū)別僅在用例和命名規(guī)范上。命名規(guī)范上一個(gè)構(gòu)造器方法的名字開頭字母需要大寫，我們需要通過new關(guān)鍵詞來調(diào)用構(gòu)造器方法生成實(shí)例。這個(gè)實(shí)例之后便可以通過instanceof關(guān)鍵詞來檢查。

function Person(firstName, lastName, age) {
 this.firstName = firstName;
 this.lastName = lastName;
 this.age = age;
}

new的行為

當(dāng)同時(shí)在工廠方法和構(gòu)造器方法上使用new關(guān)鍵詞創(chuàng)建時(shí)，工廠方法創(chuàng)建出的對(duì)象的__proto__屬性指向Object.prototype，構(gòu)造器方法創(chuàng)建出的對(duì)象的__proto__屬性指向本身的Xxx.prototype。

const mike = new person('mike', 'grand', 23);

mike.__proto__	// Object.prototype

const jack = new Person('jack', 'grand', 23);

jack.__proto__	// Person.protytype這里的prototype指向Person的Prototype Object
jack.__proto__.__proto__	// Object.prototype

new關(guān)鍵詞在后臺(tái)為構(gòu)造器方法執(zhí)行了以下幾步

1. 在構(gòu)造器方法內(nèi)創(chuàng)建一個(gè)新對(duì)象并將其賦值到this上
2. 設(shè)置對(duì)象的[[Prototype]]和__proto__為原型的構(gòu)造函數(shù)，這一步也讓新對(duì)象的構(gòu)造函數(shù)在構(gòu)造新對(duì)象時(shí)被添加到原型鏈上
3. 如果這個(gè)方法內(nèi)沒有返回object、function或array類型的結(jié)果，就返回this
4. 如果這個(gè)方法內(nèi)沒有返回任何值則返回this
    

下面是一個(gè)展示new關(guān)鍵詞在JavaScript引擎當(dāng)中執(zhí)行效果的偽代碼，注釋當(dāng)中的是用來示范new關(guān)鍵詞添加語句的偽代碼

function Person(firstName, lastName, age) {
 // this = {};
 // this.__proto__ = Person.prototype;
 this.firstName = firstName;
 this.lastName = lastName;
 this.age = age;
 // return this;
}

在構(gòu)造器方法上沒有返回值所以后臺(tái)創(chuàng)建的this將被返回，而工廠方法內(nèi)由于返回了對(duì)象所以后臺(tái)不再添加return this自然返回的內(nèi)容將不一致。

如果沒有在構(gòu)造器方法前使用new關(guān)鍵詞，而將構(gòu)造器方法直接調(diào)用執(zhí)行，其僅作為一個(gè)方法來被執(zhí)行而非構(gòu)造器。

const bob = Person('bob', 'grand', 23);
bob	// undefined. 因?yàn)檫@里Person當(dāng)作方法直接調(diào)用了且沒有返回值
window.firstName	// bob. 函數(shù)內(nèi)的this將指向全局作用域，導(dǎo)致意外操作

繼承與原型鏈

原型

原型（Prototype）可以認(rèn)為是一個(gè)JavaScript方法的屬性，每次在JavaScript代碼中創(chuàng)建方法時(shí)，JavaScript引擎會(huì)將一個(gè)名為prototype的屬性添加上去，這個(gè)prototype屬性是一個(gè)對(duì)象（原型對(duì)象），這個(gè)對(duì)象默認(rèn)有一個(gè)constructor屬性指向原方法對(duì)象。任何添加到prototype的屬性和方法都在這個(gè)對(duì)象里面，所有該類實(shí)例共享這個(gè)原型對(duì)象，實(shí)例對(duì)象的__proto__屬性指向這個(gè)對(duì)象，方法的prototype屬性指向這個(gè)對(duì)象。

在ECMAScript的標(biāo)準(zhǔn)里object.[[Prototype]]是訪問原型的方法，但在ECMAScript 2015中用Object.getPrototypeOf()和Object.setPrototypeOf()來替代。等價(jià)的__proto__是多數(shù)瀏覽器使用的事實(shí)上的但是非標(biāo)準(zhǔn)的實(shí)現(xiàn)。

function Person(firstName, lastName, age) {
 this.firstName = firstName;
 this.lastName = lastName;
 this.age = age;
}

Person.prototype === Person.prototype.constructor.prototype	// 指向Person的原型對(duì)象
Person.prototype.constructor === Person	// 指向Person方法對(duì)象

let bob = new Person("Bob", "Ross", 21);
Person.prototype === bob.__proto__;	// true

let alex = new Person("Alex", "Wang", 21);
Person.prototype === alex.__proto__;	// true
alex.__proto__ === bob.__proto__;	// true

原型鏈

首先我們需要了解對(duì)象查找機(jī)制。當(dāng)我們使用一個(gè)對(duì)象的屬性時(shí)，JavaScript引擎會(huì)首先查找本對(duì)象里是否有對(duì)應(yīng)屬性，如果沒有則去對(duì)象的原型里查找屬性，如果沒有則去對(duì)象的原型對(duì)象的原型對(duì)象里查找屬性，直至查詢到對(duì)象的__proto__為null的時(shí)候停止。

const obj = {};
console.log(obj);	// [object Object]	obj的toString()方法從Object的原型中查找到并使用

function Person(firstName, lastName, age) {
 this.firstName = firstName;
 this.lastName = lastName;
 this.age = age;
 // 在Person.prototype上定義了toString覆寫了Object.prototype上的toString
 Person.prototype.toString = function() {
  return `${this.firstName} It Is`;
 }
}

let bob = new Person("Bob", "Ross", 21);
let alex = new Person("Alex", "Wang", 21);
console.log(bob);	// Bob It Is
console.log(alex);	// Alex It Is

關(guān)于深入淺析JS中原型與原型鏈的區(qū)別就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。