javascript中面向对象的继承详解

时间:2012-12-29 08:41来源:未知作者:admin 点击: 次

分享到：

本文章介绍了关于javascript 面向对象javascript中面向对象的继承，有需要学习的同学可以参考一下本文章啊。首先，我们从类式继承谈起。大家如果看过前面的文章的话，对在JS中如何创

本文章介绍了关于javascript 面向对象javascript中面向对象的继承，有需要学习的同学可以参考一下本文章啊。

首先，我们从类式继承谈起。大家如果看过前面的文章的话，对在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; }