溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關深入淺析JS中原型與原型鏈的區別，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
正如一些面向對象語言中所實現的那樣，在JavaScript中我們有時也需要創建一個擁有公共函數與屬性的類作為父類來減少代碼重復、實現類型檢查與實現更加清晰地代碼結構。在JavaScript中，繼承是通過原型鏈實現的。了解JavaScript的繼承與原型鏈之前首先需要了解JavaScript中對象創建的方式。
在JavaScript中創建對象
JavaScript中對象創建的方式有兩種：工廠方法（Factory Functions）、構造器方法（Constructor Functions） 。
工廠方法
工廠方法在編程領域是一個非類或構造器的返回對象的方法。在JavaScript中，任何返回不使用new關鍵詞創建對象的方法都是工廠方法。
function person(firstName, lastName, age) {
const person = {};
person.firstName = firstName;
person.lastName = lastName;
person.age = age;
return person;
}構造器方法
構造器方法和工廠方法的區別僅在用例和命名規范上。命名規范上一個構造器方法的名字開頭字母需要大寫，我們需要通過new關鍵詞來調用構造器方法生成實例。這個實例之后便可以通過instanceof關鍵詞來檢查。
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}new的行為
當同時在工廠方法和構造器方法上使用new關鍵詞創建時，工廠方法創建出的對象的__proto__屬性指向Object.prototype，構造器方法創建出的對象的__proto__屬性指向本身的Xxx.prototype。
const mike = new person('mike', 'grand', 23);
mike.__proto__ // Object.prototypeconst jack = new Person('jack', 'grand', 23);
jack.__proto__ // Person.protytype這里的prototype指向Person的Prototype Object
jack.__proto__.__proto__ // Object.prototypenew關鍵詞在后臺為構造器方法執行了以下幾步
下面是一個展示new關鍵詞在JavaScript引擎當中執行效果的偽代碼，注釋當中的是用來示范new關鍵詞添加語句的偽代碼
function Person(firstName, lastName, age) {
// this = {};
// this.__proto__ = Person.prototype;
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
// return this;
}在構造器方法上沒有返回值所以后臺創建的this將被返回，而工廠方法內由于返回了對象所以后臺不再添加return this自然返回的內容將不一致。
如果沒有在構造器方法前使用new關鍵詞，而將構造器方法直接調用執行，其僅作為一個方法來被執行而非構造器。
const bob = Person('bob', 'grand', 23);
bob // undefined. 因為這里Person當作方法直接調用了且沒有返回值
window.firstName // bob. 函數內的this將指向全局作用域，導致意外操作繼承與原型鏈
原型
原型（Prototype）可以認為是一個JavaScript方法的屬性，每次在JavaScript代碼中創建方法時，JavaScript引擎會將一個名為prototype的屬性添加上去，這個prototype屬性是一個對象（原型對象），這個對象默認有一個constructor屬性指向原方法對象。任何添加到prototype的屬性和方法都在這個對象里面，所有該類實例共享這個原型對象，實例對象的__proto__屬性指向這個對象，方法的prototype屬性指向這個對象。
在ECMAScript的標準里object.[[Prototype]]是訪問原型的方法，但在ECMAScript 2015中用Object.getPrototypeOf()和Object.setPrototypeOf()來替代。等價的__proto__是多數瀏覽器使用的事實上的但是非標準的實現。
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
Person.prototype === Person.prototype.constructor.prototype // 指向Person的原型對象
Person.prototype.constructor === Person // 指向Person方法對象
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原型鏈
首先我們需要了解對象查找機制。當我們使用一個對象的屬性時，JavaScript引擎會首先查找本對象里是否有對應屬性，如果沒有則去對象的原型里查找屬性，如果沒有則去對象的原型對象的原型對象里查找屬性，直至查詢到對象的__proto__為null的時候停止。
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關于深入淺析JS中原型與原型鏈的區別就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
