javascript学习十二:面向对象之extends
来源:互联网 发布:windows下安装sass 编辑:程序博客网 时间:2024/06/05 08:34
基于原型链的方式实现继承
js实现继承的第一种方式是基于原型链的方式
在使用原型链进行继承一定要注意一下问题:
1、不能在设定了原型链之后,再重新为原型链赋值。
2、一定要在原型链赋值之后才能添加或者覆盖方法。
function Parent() { this.pv = "parent"; } Parent.prototype.pp = "ok"; Parent.prototype.showParentValue = function() { alert(this.pv); } function Child() { this.cv = "child"; } /** * 如果想进行赋值之后,才进行原型链的设定,这样赋值的原型对象 * 就会被重写掉,赋值的对象就不存在在新的原型对象中 */ // Child.prototype.showChildValue = function() { // alert(this.cv); // } /** * 让Child的原型链指向Parent对象,也就等于完成了一次继承 * 注意内存模型 */ Child.prototype = new Parent(); Child.prototype.showChildValue = function() { alert(this.cv); } /** * 此时完成的对父类对象的覆盖 */ Child.prototype.showParentValue = function() { alert("override parent"); } /** * 当执行了下面这句话之后,意味着Child的原型又重写了 * 这样就不存在任何的继承关系了 * 使用原型链需要注意的第一个问题 */ // Child.prototype = { // showChildValue:function() { // alert(this.v); // } // } var c = new Child(); c.showParentValue(); c.showChildValue(); alert(c.pp);
使用原型链继承的缺点
1.使用原型链继承,最大的缺点是,无法从子类中调用父类的构造函数这样就没有办法把子类中的属性赋值到父类;
2.如果父类中有引用类型,此时这个引用类会添加到子类的原型中,当第一个对象的修改了这个引用之后,其他对象的引用同时修改。
所以一般都不会单纯的使用原型链来实现继承。
function Parent() { this.color = ["red","yellow"]; } function Child() { } Child.prototype = new Parent(); var c1 = new Child(); //Child中的原型的color被修改 c1.color.push("blue"); alert(c1.color);//red,yellow blue var c2 = new Child(); alert(c2.color);//red yellow blue
基于函数伪装实现继承
每调用一次new Child()就等于执行了一次对象属性的设定,此时,每个对象的空间中都有color和name,就不再会在原型中存在。所以就不会被共享。
function Parent() { this.color = ["red","blue"]; this.name = "Leon"; } function Child() { //在Child中的this明显应该是指向Child的对象 //当调用Parent方法的时候,而且this又是指向了Child //此时就等于在这里完成this.color = ["red","blue"] //也就等于在Child中有了this.color属性,这样也就变相的完成了继承 Parent.call(this); //如果调用Parent();就仅仅完成了函数的调用,根本无法实现继承 } var c1 = new Child(); c1.color.push("green"); alert(c1.color);//red,blue,green var c2 = new Child(); alert(c2.color);//red,blue alert(c2.name);//Leon
使用伪造的方式就可以把子类的构造函数参数传递到父类中
function Parent(name) { this.color = ["red","blue"]; this.name = name; } function Child(name,age) { this.age = age; Parent.call(this,name); } var c1 = new Child("Leon",12); var c2 = new Child("Ada",22); alert(c1.name+","+c1.age); alert(c2.name+","+c2.age);
基于函数伪装实现继承的缺点
由于使用伪造的方式,不会完成Child的原型指向Parent。所以say方法不存在,解决方法是,将这个方法放置到Parent中使用this来创建,但是此时每个对象中又存在say,这样空间占用太大,所以也不会单独的使用伪造的方式实现继承。
function Parent(name) { this.color = ["red","blue"]; this.name = name; this.say = function() { alert(this.name); } } // Person.prototype.say = function() { // alert(this.name); // } function Child(name,age) { this.age = age; /* * 使用伪造的方式就可以把子类的构造函数参数传递到 * 父类中 */ Parent.call(this,name); } var c1 = new Child("Leon",12); var c2 = new Child("Ada",22); c1.say(); c2.say();
基于组合的方式实现继承
组合的实现方式是属性通过伪造的方式实现,方法通过原型链的方式实现。
function Parent(name) { this.color = ["red","blue"]; this.name = name; } Parent.prototype.ps = function() { alert(this.name+"["+this.color+"]"); } function Child(name,age) { //已经完成了伪造 Parent.call(this,name); this.age = age; } Child.prototype = new Parent(); Child.prototype.say = function() { alert(this.name+","+this.age+"["+this.color+"]"); } var c1 = new Child("Leon",22); c1.color.push("green"); c1.say();//Leon,22[red,blue,green] c1.ps(); //Leon[red,blue,green] var c2 = new Child("Ada",23); c2.say();//Ada,23[red,blue] c2.ps();//Ada [red,blue]
0 0
- javascript学习十二:面向对象之extends
- 轻松学习JavaScript十二:JavaScript基于面向对象之创建对象(一)
- 轻松学习JavaScript十二:JavaScript基于面向对象之创建对象(一)
- 轻松学习JavaScript十二:JavaScript基于面向对象之创建对象(二)
- 轻松学习JavaScript十二:JavaScript基于面向对象之创建对象(二)
- javascript面向对象(十二)
- JavaScript学习之路<十二> JS面向对象程序设计--原型深入
- javascript学习之面向对象
- java 面向对象之继承extends
- JavaScript之面向对象编程学习
- javascript学习十一:面向对象之prototype
- JavaScript学习笔记之面向对象编程
- javascript面向对象学习
- javascript面向对象学习
- javascript 之面向对象
- JavaScript之面向对象
- javascript之面向对象
- Javascript之面向对象
- XDOJ 简单逆序对
- lua函数式编程应用
- MFC按钮添加提示文字
- 求公约数与公倍数的问题
- 三角形测试用例
- javascript学习十二:面向对象之extends
- Android仿新浪微博ListView效果
- nginx 403 forbidden 二种原因
- 代码总结
- extern用法
- 数据结构:图的邻接表存储表示
- 《剑指Offer》学习笔记--面试题17:合并两个排序的链表
- const T*& 指针的引用、指针的指针、const
- MyBatis对于Java对象里的枚举类型处理