在JavaScript中實現繼承是Web開發者們經常遇到的問題之一。因為在JavaScript中,沒有 Class 這個概念,因此要實現繼承需要使用一些特殊的技巧。
比如說,當我們想要創建一個新的對象并且讓其具備一些父類對象的屬性和方法時,我們可以通過prototype
屬性來實現繼承。
function Person(name, age) { this.name = name; this.age = age; } Person.prototype.sayHello = function() { console.log('Hello, my name is ' + this.name); } function Student(name, age, grade) { this.grade = grade; Person.call(this, name, age); } Student.prototype = Object.create(Person.prototype); Student.prototype.constructor = Student; Student.prototype.sayGrade = function() { console.log('I am in grade ' + this.grade); } var alice = new Student('Alice', 16, 11); alice.sayHello(); // 'Hello, my name is Alice' alice.sayGrade(); // 'I am in grade 11'
這里,我們定義了一個Person
構造函數來創建一個 Person 對象,它具有name
和age
屬性以及一個sayHello
方法。接著我們定義了一個Student
構造函數來創建一個 Student 對象,它繼承自 Person,并且具有一個grade
屬性以及一個sayGrade
方法。
關鍵的部分是這行代碼:
Student.prototype = Object.create(Person.prototype);
這行代碼通過創建一個新對象,并將該對象的原型設置為 Person 的原型,從而實現了 Student 繼承自 Person。接著,我們還需要重置 Student 構造函數的指向:
Student.prototype.constructor = Student;
這便是我們實現繼承的基本思路。當使用new
關鍵字創建一個 Student 對象時,我們在 Student 構造函數中調用了 Person,并通過call
函數將新創建的 Student 對象作為 this 傳遞給它。于是,我們便可以在新創建的對象上添加新的屬性和方法及其繼承的屬性和方法。
JavaScript的繼承還可以使用 ES6 中的 class 語法來實現:
class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log('Hello, my name is ' + this.name); } } class Student extends Person { constructor(name, age, grade) { super(name, age); this.grade = grade; } sayGrade() { console.log('I am in grade ' + this.grade); } } let alice = new Student('Alice', 16, 11); alice.sayHello(); // 'Hello, my name is Alice' alice.sayGrade(); // 'I am in grade 11'
可以看到,class 中的 extends 關鍵字使得 Student 繼承自 Person,而不需要手動設置 Student 的原型。
JavaScript 的繼承雖然看起來有些奇怪,但是它的靈活性和可擴展性使得它成為了一個非常好用的編程語言。掌握了 JavaScript 的繼承,對于 Web 開發者們來說是一個非常重要的能力。