JavaScript继承：apply, call, prototype 实战解析

"本文主要探讨JavaScript中的继承方法，包括通过原型(prototype)、构造函数以及apply、call等方法实现的继承。" JavaScript是面向对象的编程语言，虽然它没有类的概念，但通过对象和原型机制实现了类似面向对象的特性。在JavaScript中，有多种方式可以实现对象间的继承。以下是对标题和描述中提到的几种继承方法的详细说明： 1. 原型(prototype)实现继承 JavaScript中的每个函数都有一个`prototype`属性，这个属性是一个对象，用于创建实例对象的原型。当访问一个对象的属性时，如果该对象自身没有该属性，JavaScript会查找其原型，直到找到该属性或者查找链结束（即原型为`null`）。以下是一个例子： ```javascript function Person(name, age) { this.name = name; this.age = age; } Person.prototype.sayHello = function() { alert("使用原型得到Name：" + this.name); }; var per = new Person("马小倩", 21); per.sayHello(); // 输出：使用原型得到Name:马小倩 function Student() {} Student.prototype = new Person("洪如彤", 21); Student.prototype.grade = 5; Student.prototype.intr = function() { alert(this.grade); } var stu = new Student(); stu.sayHello(); // 输出：使用原型得到Name:洪如彤 stu.intr(); // 输出：5 ``` 2. 构造函数实现继承 构造函数继承是通过在子构造函数内部调用父构造函数来实现的。这通常通过`call`或`apply`方法完成，将`this`上下文指向新创建的对象。下面是一个例子： ```javascript function Parent(name) { this.name = name; this.sayParent = function() { alert("Parent:" + this.name); }; } function Child(name, age) { Parent.call(this, name); // 调用父构造函数 this.age = age; this.sayChild = function() { alert("Child:" + this.name); }; } var child = new Child("小明", 10); child.sayParent(); // 输出：Parent:小明 child.sayChild(); // 输出：Child:小明 ``` 3. call和apply实现继承 `call`和`apply`方法可以改变函数调用时的上下文（即`this`的值），它们都可以用于实现继承，区别在于传递参数的方式。`call`接受一个对象和一系列参数，而`apply`接受一个对象和一个参数数组。 ```javascript function Parent(name) { this.name = name; } function Child(name, age) { Parent.call(this, name); // 使用call方法 this.age = age; } var child = new Child("小红", 12); console.log(child.name); // 输出：小红 ``` 4. 使用ES6的class和extends关键字 ES6引入了`class`关键字，提供了更简洁的语法糖来定义构造函数，`extends`关键字则用于实现继承。以下是一个示例： ```javascript class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { alert("使用ES6得到Name：" + this.name); } } class Student extends Person { constructor(name, age, grade) { super(name, age); // 调用父类构造函数 this.grade = grade; } intr() { alert(this.grade); } } let stu = new Student("小华", 15, 7); stu.sayHello(); // 输出：使用ES6得到Name:小华 stu.intr(); // 输出：7 ``` 总结，JavaScript中的继承可以通过原型链、构造函数调用以及`call`/`apply`方法来实现。随着语言的发展，ES6引入的`class`和`extends`提供了一种更加直观的方式来处理继承。选择哪种方法取决于项目需求和个人喜好，但理解这些基础概念对于深入JavaScript开发至关重要。