西红柿爱番茄

Feed Rss

Javascript“继承”的简单理解方式

12.16.2009, Javascript, by .

Javascript里面没有类、继承这样的概念,但是并不代表Javascript不能够实现“继承”。Javascript是一种基于原型链的解释语言,当然也是一种面向对象的语言。既然它面向对象,就不得不需要使用OOP这样的编程方式来编写良好的Javascript代码,编写OOP方式的代码的好处就在于易封装、广重用、易维护等等。Javascript里的知识繁多,现在来简单的讲一下我对Javascript继承的理解。

首先,我们先写一个简单的“父类”Person:
[javascript]
var Person=function(n){
this.name=n;
}
Person.prototype={ //这里Person.prototype给赋值了一个对象,有意思
getName:function(){
return this.name;
}
}
[/javascript]
我相信上面的代码是Front-End都能看懂的。上面的代码有意思的地方是Person.prototype给赋值了一个对象。好,下面来简单实现一个“子类”Student:
[javascript]
var Student=function(n,a){
Person.call(this,n); //这里也非常有意思
this.age=a;
}
Student.prototype=new Person(); //给Student.prototype赋值了一个Person实例对象,记住,是实例对象。
Student.prototype.getAge=function(){
return this.age;
}
[/javascript]

现在让我们来解释上面的Student的实现继承的方式。在Student内部的Person.call(this,n),实际上是把Person当作一个函数来调用,并使用了call方法来改变Person内this的上下文为Student,这个时候Person内部的this.name中的this就是Student了,这就给Student子类添加了一个name属性。而之后的Student.prototype被赋值了一个Person的实例对象,下面我们用代码来分析:
[javascript]
//Person实例化后的对象为:
var person=new Person("ILoveJS");
//这个时候的person可以理解为这样的了
person={
name:"ILoveJS",
getName:function(){
return this.name;
}
}
//当我们把这个person实例对象赋值给Student.prototype的时候,不就像这种方式了吗:
Student.prototype={
name:"ILoveJS",
getName:function(){
return this.name;
}
}
//这就扩展了Student.prototype原型的属性和方法了。在加上Student类里面以及最后给它添加的getAge方法,这样Student类就是这样的了:
var Student=function(n,a){
this.name=n;
this.age=a;
}
Student.prototype={
getName:function(){
return this.name;
},
getAge:function(){
return this.age;
}
}
[/javascript]
上面分析的就是Student从Person的“继承”过程。其实也都没有什么“继承”机制,无非就是通过扩展prototype/原型和修改context/上下文来达到继承的效果而已。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>