javascript 面向对象的继承的实现
上面这篇简单的记录了我对 JS面向对象实现的一点初步认识和了解,下面继续研究JS面向对象,实现继承和多态。
之前的学习我了解到了 :构造函数加属性,原型prototype加方法,这样就实现了JS的面向对象。所以当我们实现继承的时候,应该也分 属性 和 方法 两个部分实现。
说到继承 首先应该对构造函数开始下手 。现在有这样一个构造函数:
function Person(name){ this.name = name; }; Person.prototype.say = function (){ console.log(this.name +" say hello~"); }
下面创建一个继承Person的Student对象,就得这样写Student的构造函数,才可以让Student获得Person的属性
<pre name="code" class="javascript"> function Student(name,age){ Person.call(this,name);//将Student的this,传入到Peson中去 }
上面那句 Person.call(this,name),实际上改变了 Person的作用域 ,将他替换成了 Student的,这样才是算Stuent继承了Person的属性。
关于 this ,call() 这方面的一些内容,以后会详细分析。。。 这里先大概了解他们代表什么 有什么作用就行。。。
接下来就是从 prototype 上继承 方法。(我讨厌叫它原型。。)
要是想让 Student 拥有 Person的方法,而且Person的方法全都是在它的prototype上。所以,要实现所谓方法的继承,其实就是让Student拥有和Person一样的prototype。
但是如果我们这样写
B.prototype = A.prototype;
看上去是让B 有了A一样的prototype,其实这样并不能满足继承的要求。
因为JS中存在引用这个概念,上面的操作其实是让B的prototype 和 A的prototype 指向了同一块内存区域(我的理解 =。=),如果你要修改了B的prototype,A的prototype其实也被修改了,这样就没法满足重写和拓展自己的方法这样操作。(具体的要了解JS中的引用=。=)
所以得这写样
for(var i in A.prototype){ B.prototype[i] = A.prototype[i]; }
这样就满足B拥有了和A一样的prototype并且他们互相是独立的,也就可以实现方法的继承了。
现在把两个方面总结起来写个例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function Person(name){ this.name = name; }; Person.prototype.say = function (){ console.log(this.name +" say hello~"); } function Student(name,age){ Person.call(this,name); } for(var i in Person.prototype){ Student.prototype[i] = Person.prototype[i]; } //重写say 方法 Student.prototype.say = function(){ console.log(this.name +" is a Student"); } Student.prototype.study = function(){ console.log(this.name +" is studying"); } var tom = new Person('tom'); var jerry = new Person('jerry'); var danny = new Student("danny"); tom.say(); jerry.say(); danny.say(); danny.study(); tom.study(); </script> </head> <body> </body> </html>
2015.12.30