首先，我们从类式继承谈起。大家如果看过前面的文章的话，对在JS中如何创建一个类应该早已胸有成竹了，那我直接从例子讲解。我们定义一个简单的类Person并实例化一个对象。
| 代码如下 | 复制代码 |
|
function Person(name) { this.name = name; } Person.prototype.getName = function() { return this.name; } var reader = new Person("Miracle"); reader.getName();//Miracle |
|
接下来我们再添加一个Person的子类Author，看看如何去继承父类的方法呢？
| 代码如下 | 复制代码 |
|
function Author(name, books) { Person.call(this, name); this.books = books; } Author.prototype = new Person(); Author.prototype.constructor = Author; Author.prototype.getBooks = function() { return this.books; } var author = new Author("Miracle He", ["JavaScript Learning"]); author.getName(); author.getBooks(); |
|
可能有的朋友不是很明白上面的代码了，我重点对其中几句一一解释。首先创建了Author的构造函数，我们都知道在使用new运算符创建一个对象时，首先将创建一个空对象并调用构造函数，同时这个空对象将位于作用域链的最前端，在这里Person调用自身构造函数并将name参数传入实现赋值。那接下来就是Author.prototype = new Person();大家都知道在JS中不管是什么对象都会有prototype这个属性，当在调用该对象的方法时，会首先从该对象的类寻找，如果不存在再继续到该类prototype所指的类寻找，会一直沿原型链往上寻找直到找到该方法为止。那既然我已经给了Person作为Author的原型了，那接下来将constructor属性重设为Author。从上述代码可以看出，尽管实现继承有点难度，但是在子类的调用上却非常简单。那接下来我们就重构一下我们的代码。添加了一个扩展方法：
| 代码如下 | 复制代码 |
| function extend(subclass, superclass) { var F = function() {}; F.prototype = superclass.prototype; subclass.prototype = new F(); subclass.prototype.constructor = subclass; } function Author(name, books) { Person.call(this, name); this.books = books; } extend(Author, Person); Author.prototype.getBooks = function() { return this.books; } |
|
可能大家还发现，在Author的构造函数中还有Person这个固化的身影，我们赶紧把它通用化。
| 代码如下 | 复制代码 |
|
function extend(subclass, superclass) { var F = function() {}; F.prototype = superclass.prototype; subclass.prototype = new F(); subclass.prototype.constructor = subclass; subclass.parent = superclass.prototype; if(superclass.prototype.constructor == Object.prototype.constructor) { superclass.prototype.constructor = superclass; } } function Author(name, books) { Author.parent.constructor.call(this, name); this.books = books; } extend(Author, Person); Author.prototype.getBooks = function() { return this.books; } |
|
时间： 2024-09-20 08:07:56