深度探析JavaScript中的原型鏈機制-js教程-PHP中文網

深度探析JavaScript中的原型鏈機制

PHPz

發布： 2024-02-18 19:20:06

原創

812 人瀏覽過

深度探析JavaScript中的原型鏈機制

JS中prototype原型鏈詳解

在Javascript中，每個物件都有原型（prototype），原型是一個對象，它包含了共享屬性和方法，原型鍊是一種機制，它允許物件繼承和共享屬性和方法。

原型鍊是透過每個物件的_proto_屬性來實現的，這個屬性指向物件的原型。如果物件無法找到所需的屬性或方法，它會沿著原型鏈繼續查找，直到找到或達到原型鏈的末端。

我們來看一個例子，建立一個叫Person的建構子和它的實例物件：

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

var person1 = new Person('Alice', 25);

登入後複製

使用new運算子建立person1物件時，會進行以下操作：

建立一個空物件person1。
將person1的_proto_屬性指向Person建構子的原型，也就是Person.prototype。
執行Person建構函數，將this指向person1，並賦值name和age屬性。

實際上，Person.prototype就是person1的原型，我們可以為原型添加方法和屬性：

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

登入後複製

現在，person1物件可以使用sayHello方法：

person1.sayHello();  // 输出: Hello, my name is Alice

登入後複製

當我們呼叫person1.sayHello()方法時，Javascript首先在person1物件中尋找是否有這個方法，如果沒有找到，它會繼續沿著原型鏈去Person.prototype中查找，找到後執行。

如果我們在Person.prototype中加入一個新的屬性，person1也能使用它：

Person.prototype.gender = 'Female';
console.log(person1.gender);  // 输出: Female

登入後複製

原型鏈還可以實現繼承，我們可以建立一個新的建構子Student，並讓它繼承自Person：

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

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

登入後複製

上面的程式碼中，我們使用Object.create()方法建立了Student.prototype對象，將它的_proto_屬性指向Person.prototype，並將Student.prototype .constructor指向Student建構子。

現在，我們可以建立一個student1對象，並使用繼承自Person的屬性和方法：

var student1 = new Student('Bob', 20, 'ABC School');

console.log(student1.name);   // 输出: Bob
console.log(student1.age);    // 输出: 20
student1.sayHello();          // 输出: Hello, my name is Bob
console.log(student1.school);  // 输出: ABC School

登入後複製

在上面的例子中，student1物件可以存取到繼承自Person的屬性和方法，原因就是透過原型鏈，它能找到這些屬性和方法。

原型鍊是Javascript中實現物件繼承和共享屬性和方法的重要機制，它使得程式碼更有效率和更靈活。在編寫Javascript程式碼時，深入理解原型鍊是非常重要的。

總結：