In fact, inheritance in JavaScript refers to a mechanism that allows an object (child object) to obtain the properties and methods of another object (parent object). In this way, child objects can reuse the code of the parent object, and at the same time, they can add their own specific functions.
JavaScript uses prototypal inheritance to implement the inheritance relationship between objects.
First of all, you must know some basic concepts:
- Objects: In JavaScript, almost everything is an object, including arrays, functions, and dates. Every object has properties and methods.
- Constructor: A constructor is a special function used to create an object. They usually start with a capital letter and are used to create objects with similar properties and methods.
- Prototype: Every JavaScript object has a prototype. A prototype is an object that contains properties and methods shared by that object. When we access a property or method of an object, the JavaScript engine will first look it up in the object itself, and if it cannot find it, it will look it up in the prototype.
Let me give you a simple example to better understand the inheritance mechanism in JavaScript:
// 定义一个构造函数
function Animal(name) {
this.name = name;
}
// 在原型上定义一个方法
Animal.prototype.sayName = function() {
console.log("My name is " + this.name);
};
// 创建一个Animal对象
var animal = new Animal("Tom");
animal.sayName(); // 输出: My name is Tom
In the example above, we defined a constructor named Animal. new Animal("Tom")An Animal object is created by using , which has a nameproperty named and a sayNamemethod named . We sayNameadd the method to Animal.prototype, so that all objects created through the Animal constructor can access it.
Let's talk about the concept of inheritance. In JavaScript, we can use it prototypeto realize the inheritance relationship.
// 定义一个子构造函数
function Dog(name, breed) {
Animal.call(this, name); // 调用父构造函数
this.breed = breed;
}
// 创建一个原型链
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
// 在子构造函数上定义一个方法
Dog.prototype.bark = function() {
console.log("Woof!");
};
// 创建一个Dog对象
var dog = new Dog("Max", "Labrador");
dog.sayName(); // 输出: My name is Max
dog.bark(); // 输出: Woof!
In this example, we define a subconstructor named Dog. We callcalled the parent constructor in the child constructor using methods Animalto make sure the child objects also have nameproperties. We then use the prototype that Object.createthe method will Animal.prototypebe Dog.prototype, thus establishing the prototype chain. This means Dog.prototypeinherited Animal.prototypeproperties and methods.
Next, we will Dog.prototype.constructorset to Dogto ensure that the constructor reference is correct. This is because when the prototype chain is created, Dog.prototype.constructorit is set to Animal, and we need to restore it to Dog.
Dog.prototypeFinally, we define a new method on the child constructor barkthat is specific to the child object.
Now we can create an Dogobject dogand call the methods it inherits from as well as Animalthe methods it defines itself .sayNameDogbark
Through the prototype chain, Dogthe object inherits Animalthe properties and methods of the object, and can also add its own specific functions.
It should be noted that prototypal inheritance is based on objects. This means that when we modify a prototype object, all objects that inherit from that prototype are also affected.
In addition to prototypal inheritance, ES6 (ECMAScript 2015) also introduces the concept of classes and inheritance, making inheritance in JavaScript easier to understand and use.
class Animal {
constructor(name) {
this.name = name;
}
sayName() {
console.log("My name is " + this.name);
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name);
this.breed = breed;
}
bark() {
console.log("Woof!");
}
}
var dog = new Dog("Max", "Labrador");
dog.sayName(); // 输出: My name is Max
dog.bark(); // 输出: Woof!
Keywords introduced in ES6 classsimplify class definition and inheritance. In the above example, we defined Animalclasses and Dogclasses, and extendsimplemented inheritance relationships through keywords. superThe keyword is used to call the constructor of the parent class.
The inheritance mechanism of JavaScript uses the prototype chain to realize the inheritance relationship between objects. Through inheritance, child objects can acquire the properties and methods of the parent object, and can add their own specific functionality. Prototype inheritance is object-based, and by modifying a prototype object, all objects that inherit from that prototype will be affected. The class and inheritance syntax introduced in ES6 makes inheritance in JavaScript easier to understand and use.