原型與原型鏈的差異與作用解析-js教程-PHP中文網

原型與原型鏈的差異與作用解析

PHPz

發布： 2024-01-13 10:11:05

原創

428 人瀏覽過

原型與原型鏈的差異與作用解析

解析原型和原型鏈的區別及作用

在JavaScript中，原型和原型鍊是物件導向程式設計中非常重要的概念。它們不僅是理解JavaScript中物件和繼承的基礎，也是深入了解JavaScript的關鍵。本文將透過具體的程式碼範例，來解析原型和原型鏈的差異及作用。

原型

原型是JavaScript中物件之間繼承的基礎。每個物件都有一個原型，可以透過__proto__屬性來存取。原型是一個普通的對象，它包含被繼承對象的屬性和方法。

下面是一個簡單的範例程式碼：

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

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

var person = new Person("Alice", 18);
person.sayHello(); // 输出: Hello, my name is Alice

登入後複製

在這個範例中，Person.prototype是一個原型對象，包含了sayHello方法。 person物件透過new關鍵字建構實例，並透過原型鏈繼承了Person.prototype中的方法。

原型鏈

原型鍊是一種物件之間透過原型關聯起來的機制。一個物件的原型也可以是另一個對象，這種關聯透過__proto__屬性進行連接。當我們存取一個物件的屬性或方法時，如果目前物件沒有，則會沿著原型鏈向上查找，直到找到該屬性或方法的定義。

下面繼續沿用上面的範例程式碼：

function Student(name, age, grade) {
  Person.call(this, name, age);  // 调用父类的构造函数
  this.grade = grade;
}

Student.prototype = Object.create(Person.prototype);  // 继承父类的原型

Student.prototype.sayGoodbye = function() {
  console.log("Goodbye, my name is " + this.name);
};

var student = new Student("Bob", 20, 5);
student.sayHello();  // 输出: Hello, my name is Bob
student.sayGoodbye();  // 输出: Goodbye, my name is Bob

登入後複製

在這個例子中，我們定義了一個Student類，它透過Person.call(this, name, age)呼叫父類別的建構函數，並透過Object.create(Person.prototype)繼承了父類別的原型。這樣，Student實例物件student就能夠存取並使用父類別Person中定義的方法。