De hecho, la herencia en JavaScript se refiere a un mecanismo que permite que un objeto (objeto hijo) obtenga las propiedades y métodos de otro objeto (objeto padre). De esta manera, los objetos secundarios pueden reutilizar el código del objeto principal y, al mismo tiempo, pueden agregar sus propias funciones específicas.
JavaScript utiliza herencia prototípica para implementar la relación de herencia entre objetos.
En primer lugar, debes conocer algunos conceptos básicos:
- Objetos: en JavaScript, casi todo es un objeto, incluidas matrices, funciones y fechas. Cada objeto tiene propiedades y métodos.
- Constructor: un constructor es una función especial que se utiliza para crear un objeto. Suelen empezar con mayúscula y se utilizan para crear objetos con propiedades y métodos similares.
- Prototipo: cada objeto JavaScript tiene un prototipo. Un prototipo es un objeto que contiene propiedades y métodos compartidos por ese objeto. Cuando accedemos a una propiedad o método de un objeto, el motor JavaScript primero lo buscará en el propio objeto y, si no puede encontrarlo, lo buscará en el prototipo.
Déjame darte un ejemplo sencillo para comprender mejor el mecanismo de herencia en 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
En el ejemplo anterior, definimos un constructor llamado Animal. new Animal("Tom")Un objeto Animal se crea utilizando , que tiene una namepropiedad denominada y un sayNamemétodo denominado . Agregamos sayNameel método Animal.prototypepara que todos los objetos creados a través del constructor Animal puedan acceder a él.
Hablemos del concepto de herencia, en JavaScript podemos usarlo prototypepara implementar la relación de herencia.
// 定义一个子构造函数
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!
En este ejemplo, definimos un subconstructor llamado Perro. Llamamos callal constructor principal en el constructor secundario usando métodos Animalpara asegurarnos de que los objetos secundarios también tengan namepropiedades. Luego utilizamos el prototipo que será Object.createel método , estableciendo así la cadena de prototipos. Esto significa propiedades y métodos heredados .Animal.prototypeDog.prototypeDog.prototypeAnimal.prototype
A continuación, configuraremos Dog.prototype.constructorpara Dogasegurarnos de que la referencia del constructor sea correcta. Esto se debe a que cuando se crea la cadena de prototipos, Dog.prototype.constructorse establece en Animaly debemos restaurarla en Dog.
Dog.prototypeFinalmente, definimos un nuevo método en el constructor secundario barkque es específico del objeto secundario.
Ahora podemos crear un Dogobjeto dogy llamar a los métodos de los que hereda, así como Animala los métodos que él mismo define .sayNameDogbark
A través de la cadena de prototipos, Dogel objeto hereda Animallas propiedades y métodos del objeto y también puede agregar sus propias funciones específicas.
Cabe señalar que la herencia prototípica se basa en objetos. Esto significa que cuando modificamos un objeto prototipo, todos los objetos que heredan de ese prototipo también se ven afectados.
Además de la herencia prototípica, ES6 (ECMAScript 2015) también introduce el concepto de clases y herencia, lo que hace que la herencia en JavaScript sea más fácil de entender y usar.
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!
Las palabras clave introducidas en ES6 classsimplifican la definición y herencia de clases. En el ejemplo anterior, definimos Animalclases y Dogclases e extendsimplementamos relaciones de herencia a través de palabras clave. superLa palabra clave se utiliza para llamar al constructor de la clase principal.
El mecanismo de herencia de JavaScript utiliza la cadena de prototipos para implementar la relación de herencia entre objetos. A través de la herencia, los objetos secundarios pueden adquirir las propiedades y métodos del objeto principal y pueden agregar su propia funcionalidad específica. La herencia de prototipos se basa en objetos y, al modificar un objeto prototipo, todos los objetos que heredan de ese prototipo se verán afectados. La sintaxis de clases y herencia introducida en ES6 hace que la herencia en JavaScript sea más fácil de entender y usar.