前言
JavaScript 原型是該語言中一個非常重要的概念，理解原型是理解 JavaScript 的關鍵，在本篇技術博客中，我們將深入探討 JavaScript 的原型概念，并介紹常用的操作物件原型的方法，(歡迎點評,歡迎指正!)
什么是原型？
在 JavaScript 中，每個物件都有一個原型（prototype）物件，原型可以看做是物件的“父類”，包含了一些共有的屬性和方法，當我們試圖訪問物件的屬性時，JavaScript 首先查找該物件本身是否有該屬性，如果沒有，就會在該物件的原型中查找，如果還沒有，就會一直沿著原型鏈(也可理解為原型物件的原型物件)向上查找，直到找到該屬性或者查找到原型鏈的頂端為止，
在 JavaScript 中，我們可以使用 Object.getPrototypeOf 方法來獲取一個物件的原型，例如：
const obj = {};
console.log(Object.getPrototypeOf(obj)); // 輸出：{}
這里的 {} 就是 obj 物件的原型，
原型鏈
每個物件的原型也可以有自己的原型，這樣就形成了一個鏈式結構，我們稱之為“原型鏈”，
在 JavaScript 中，原型鏈的頂端是 Object.prototype，它是所有物件的默認原型，Object.prototype 物件中包含了一些常用的屬性和方法，例如 toString、valueOf 等，
const obj = {};
console.log(Object.getPrototypeOf(obj) === Object.prototype); // 輸出：true
console.log(obj.toString()); // 輸出：[object Object]
在 JavaScript 中，我們可以通過 Object.create 方法來創建一個新物件，并將其原型指向指定物件，例如：
const obj1 = { name: 'Jack' };
const obj2 = Object.create(obj1);
console.log(obj2.name); // 輸出：'Jack'
在上面的代碼中，我們創建了一個物件 obj1，然后通過 Object.create 方法創建了一個新物件 obj2，并將其原型指向 obj1，由于 obj1 中包含了一個屬性 name，所以在 obj2 中也能訪問到該屬性，
建構式創建物件
在JavaScript中，通過建構式創建物件時，這些物件都會有一個內部屬性Prototype，指向建構式的原型物件，例如：
function Person(name, age) {
this.name = name;
this.age = age;
}
const person = new Person('Tom', 20);
console.log(person.__proto__ === Person.prototype); // true
這里的person.__proto__就是指向Person建構式的原型物件Person.prototype，通過new關鍵字創建的實體物件就是建構式的一個實體，因此它繼承了建構式的原型物件中定義的屬性和方法，
如果我們想要給Person建構式的原型物件添加一個方法，可以通過給Person.prototype賦值來實作：
Person.prototype.sayHello = function() {
console.log(`Hello, my name is ${this.name}`);
}
現在，Person建構式的所有實體物件都可以訪問這個新定義的方法：
const person = new Person('Tom', 20);
person.sayHello(); // Hello, my name is Tom
當我們訪問一個物件的屬性或方法時，JavaScript引擎會首先查找物件本身是否有該屬性或方法，如果物件本身沒有定義，就會沿著它的原型鏈向上查找，直到找到為止，如果一直查找到最頂層的原型物件還沒有找到，則回傳undefined，
__proto__ 與 Prototype 區別
在JavaScript中，每個物件都有一個__proto__ 屬性和一個建構式的 prototype 屬性，它們兩者都與物件原型有關，但是它們的作用和用法是不同的，
__proto__ 是一個物件的內部屬性，用于指向該物件的原型，當我們訪問物件的某個屬性時，JavaScript引擎會先查找該物件本身是否有該屬性，如果沒有則會去該物件的原型鏈中查找，因此，我們可以通過修改 __proto__ 來修改物件的原型鏈，但是不建議這樣做，因為 __proto__ 是一個非標準的屬性，在一些瀏覽器中可能會出現兼容性問題，
相比之下，prototype 是一個建構式特有的屬性，它是一個物件，包含了該建構式的所有實體共享的屬性和方法，當我們使用 new 運算子創建一個實體時，實體物件會繼承其建構式的 prototype 屬性，因此，我們可以通過在建構式的 prototype 上定義屬性和方法來實作所有實體共享這些屬性和方法的效果，
下面是一個簡單的例子，演示了 __proto__ 和 prototype 的使用方法和區別：
function Animal(name) {
this.name = name;
}
// 通過 prototype 定義方法
Animal.prototype.sayName = function() {
console.log('My name is', this.name);
};
// 創建實體
const cat = new Animal('Tom');
// 訪問實體屬性和方法
console.log(cat.name); // 'Tom'
cat.sayName(); // 'My name is Tom'
// 修改實體的 __proto__
const dog = {};
dog.__proto__ = Animal.prototype;
dog.name = 'Spike';
dog.sayName(); // 'My name is Spike'
上述例子中，我們首先定義了一個 Animal 建構式，并通過 prototype 定義了一個 sayName 方法，然后，我們創建了一個 cat 實體，訪問了實體的 name 屬性和 sayName 方法，接著，我們創建了一個 dog 物件，并將其 __proto__ 屬性設定為 Animal.prototype，這樣 dog 物件就可以繼承 Animal 的 prototype 上定義的方法和屬性，最后，我們訪問了 dog 物件的 name 屬性和 sayName 方法，驗證了 __proto__ 和 prototype 的區別，
操作物件原型的方法
在 JavaScript 中，我們可以使用一些方法來操作物件原型,下面是一些常用的操作物件原型的方法：
- Object.getPrototypeOf(obj)：獲取物件的原型，
- Object.setPrototypeOf(obj, prototype)：設定物件的原型，
- obj.hasOwnProperty(prop)：判斷物件是否有自有屬性prop，
- obj.isPrototypeOf(obj2)：判斷物件是否是另一個物件的原型，
需要注意的是，修改原型物件會對繼承自它的所有實體物件生效，因此，在修改原型物件時需要特別小心，確保不會對其他物件產生影響，
Object.create()
Object.create()：創建一個新物件，使用現有物件作為新物件的原型，
const parent = {
name: "parent",
sayHello: function () {
console.log(`Hello, I'm ${this.name}.`);
},
};
const child = Object.create(parent);
child.name = "child";
child.sayHello(); // Hello, I'm child.
Object.getPrototypeOf()
Object.getPrototypeOf()：獲取物件的原型，
const parent = {
name: "parent",
};
const child = Object.create(parent);
console.log(Object.getPrototypeOf(child) === parent); // true
Object.setPrototypeOf()
Object.setPrototypeOf()：設定物件的原型，
const parent = {
name: "parent",
};
const child = {};
Object.setPrototypeOf(child, parent);
console.log(Object.getPrototypeOf(child) === parent); // true
Object.prototype.hasOwnProperty()
Object.prototype.hasOwnProperty()：判斷物件是否擁有某個屬性，不包括原型鏈上的屬性，
const obj = { a: 1 };
console.log(obj.hasOwnProperty("a")); // true
console.log(obj.hasOwnProperty("toString")); // false
Object.prototype.isPrototypeOf()
Object.prototype.isPrototypeOf()：判斷物件是否是另一個物件的原型，
const parent = {};
const child = Object.create(parent);
console.log(parent.isPrototypeOf(child)); // true
console.log(child.isPrototypeOf(parent)); // false
Object.prototype.constructor
Object.prototype.constructor：獲取物件的建構式，
function Person(name) {
this.name = name;
}
const person = new Person("Tom");
console.log(person.constructor === Person); // true
使用場景
JS的原型在實際開發中有許多使用場景，其中一些常見的包括：
- 原型繼承：使用原型鏈實作繼承，可以減少代碼的冗余，提高代碼的可重用性，
- 動態添加方法：在原型物件上動態添加方法，可以使得所有實體都能共享該方法，避免每個實體都單獨創建方法，節省記憶體，
- 實作多型：利用原型鏈的特性，可以實作多型，即同一個方法可以有多種不同的實作方式，根據實際物件型別進行呼叫，
- 擴展和覆寫原型屬性和方法：可以通過修改原型物件來實作對所有實體屬性和方法的擴展或覆寫，具有很大的靈活性，
舉例說明幾個使用場景
創建物件
在JavaScript中，可以使用原型來創建物件，這種方式可以避免多次創建相同的物件，提高代碼的性能，例如：
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function() {
console.log(`Hello, my name is ${this.name}`);
}
const person1 = new Person('John');
person1.sayHello(); // 輸出：Hello, my name is John
const person2 = new Person('Jane');
person2.sayHello(); // 輸出：Hello, my name is Jane
繼承
JavaScript中沒有類的概念，繼承是通過原型來實作的，子類通過原型鏈繼承父類的屬性和方法，例如：
function Animal(name) {
this.name = name;
}
Animal.prototype.sayName = function() {
console.log(`My name is ${this.name}`);
}
function Dog(name, breed) {
Animal.call(this, name); // 繼承父類的屬性
this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype); // 繼承父類的方法
Dog.prototype.constructor = Dog;
Dog.prototype.sayBreed = function() {
console.log(`My breed is ${this.breed}`);
}
const dog = new Dog('Buddy', 'Golden Retriever');
dog.sayName(); // 輸出：My name is Buddy
dog.sayBreed(); // 輸出：My breed is Golden Retriever
修改物件
通過原型，可以方便地對現有物件進行修改或添加新的屬性和方法，例如：
const person = { name: 'John' };
Object.getPrototypeOf(person).sayHello = function() {
console.log(`Hello, my name is ${this.name}`);
}
person.sayHello(); // 輸出：Hello, my name is John
多型
在 JavaScript 中，可以使用原型實作多型，多型是指在不同的物件實體中，同一個方法可以有不同的實作方式，通過原型，可以在不改變物件實體自身的情況下，實作方法的多型性，
舉個例子，假設有一個名為 Animal 的建構式，其原型物件有一個方法 speak，并且有兩個子建構式 Cat 和 Dog，它們繼承了 Animal 的原型物件，現在我們希望在 Cat 和 Dog 的實體中，分別實作 speak 方法的不同實作方式，
function Animal() {}
Animal.prototype.speak = function() {
console.log('Animal speaks');
}
function Cat() {}
Cat.prototype = Object.create(Animal.prototype);
Cat.prototype.constructor = Cat;
Cat.prototype.speak = function() {
console.log('Meow');
}
function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.speak = function() {
console.log('Woof');
}
const cat = new Cat();
const dog = new Dog();
cat.speak(); // Meow
dog.speak(); // Woof
在上述例子中，我們通過將 Cat 和 Dog 的原型物件設定為 Animal 的原型物件，并分別實作了它們自己的 speak 方法，使得它們的 speak 方法在不同的實體中有不同的實作方式，這就是使用 JS 原型實作多型的一種方法，
說明：在JavaScript中，每個函式都有一個默認的 prototype 屬性，它指向一個物件，即該函式的原型物件，該原型物件是包含建構式所有實體共享的屬性和方法，
而 constructor 是原型物件上的一個屬性，它指向創建當前物件的建構式，因此 Cat.prototype.constructor = Cat 的作用是將 Cat 函式的原型物件上的 constructor 屬性指向 Cat 函式本身，以確保 Cat 函式作為建構式創建的物件，其 constructor 屬性正確地指向 Cat 函式本身，
在上述代碼中，由于將 Animal 函式的原型物件替換為 Cat 函式的實體，因此也需要將 constructor 屬性指向 Cat 函式本身，以確保 constructor 屬性的正確性，
總結
JavaScript 中的所有物件都有一個內置的屬性 __proto__，用于指向其原型物件，每個建構式都有一個名為 Prototype 的屬性，該屬性指向一個物件，該物件是由該建構式創建的所有實體物件的原型，因此，可以通過建構式的 Prototype 屬性來擴展物件的原型，物件可以訪問其原型中的屬性和方法，就像它們是物件自身的屬性和方法一樣，當物件嘗試訪問其自身不存在的屬性或方法時，它會沿著原型鏈向上查找，直到找到匹配的屬性或方法為止，
在 JavaScript 中，原型可以用于實作繼承和共享屬性和方法，通過創建一個新物件，并將其原型設定為另一個物件，可以實作原型繼承，此外，可以使用原型將屬性和方法添加到物件中，這些屬性和方法可以被該物件的所有實體共享，
總之，原型是JavaScript中一個非常重要的概念，掌握原型的原理和使用方法對于撰寫高效、優雅的JavaScript代碼至關重要，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544889.html
標籤：其他