淺談JS原型

CodeForBetter發表於2023-02-23
JS原型

前言

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程式碼至關重要。

相關文章