其实JavaScript中的继承,就是指的是一种机制,它允许一个对象(子对象)获取另一个对象(父对象)的属性和方法。这样的话子对象可以重用父对象的代码,同时还可以添加自己的特定功能。
JavaScript是使用原型继承的方式来实现对象之间的继承关系。
首先你肯定得知道一些基本概念:
举个简单的例子希望你能更好地理解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
上面的例子,我们定义了一个名为Animal的构造函数。通过使用new Animal("Tom")
创建了一个Animal对象,这个对象有一个名为name
的属性和一个名为sayName
的方法。我们将sayName
方法添加到Animal.prototype
中,以便所有通过Animal构造函数创建的对象都可以访问它。
再说一下继承的概念,在JavaScript里面,我们可以使用prototype
来实现继承关系。
// 定义一个子构造函数
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!
这个例子,我们定义了一个名为Dog的子构造函数。我们使用call
方法在子构造函数中调用了父构造函数Animal
,以确保子对象也具有name
属性。然后,我们使用Object.create
方法将Animal.prototype
作为Dog.prototype
的原型,从而建立了原型链。这意味着Dog.prototype
继承了Animal.prototype
的属性和方法。
接着,我们将Dog.prototype.constructor
设置为Dog
,以确保构造函数引用正确。这是因为在创建原型链时,Dog.prototype.constructor
会被设置为Animal
,我们需要将它恢复为Dog
。
最后,我们在子构造函数Dog.prototype
上定义了一个新的方法bark
,这个方法是子对象特有的。
现在我们可以创建一个Dog
对象dog
,调用继承自Animal
的sayName
方法以及Dog
自身定义的bark
方法。
通过原型链的方式,Dog
对象继承了Animal
对象的属性和方法,还可以添加自己特定的功能。
需要注意的是,原型继承是基于对象的。这意味着当我们修改原型对象时,所有继承自该原型的对象也会受到影响。
除了原型继承,ES6(ECMAScript 2015)也引入了类和继承的概念,让JavaScript中的继承更加易于理解和使用。
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!
ES6中引入的class
关键字简化了类的定义和继承。在上面的例子中,我们定义了Animal
类和Dog
类,通过extends
关键字实现了继承关系。super
关键字用于调用父类的构造函数。
JavaScript的继承机制使用原型链来实现对象之间的继承关系。通过继承,子对象可以获取父对象的属性和方法,并且可以添加自己的特定功能。原型继承是基于对象的,通过修改原型对象,所有继承自该原型的对象都会受到影响。ES6中引入的类和继承语法使得JavaScript中的继承更加易于理解和使用。
黑马程序员前端JavaScript入门到精通全套视频教程,javascript核心进阶ES6语法、API、js高级等基础知识和实战教程