博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS面向对象组件 -- 继承的其他方式(类式继承、原型继承)
阅读量:7040 次
发布时间:2019-06-28

本文共 1343 字,大约阅读时间需要 4 分钟。

继承的其他形式:
  •类式继承:利用构造函数(类)继承的方式
  •原型继承:借助原型来实现对象继承对象
 
类 : JS是没有类的概念的 , 把JS中的构造函数看做的类
要做属性和方法继承的时候,要分开继承。
function Aaa(){   //父类    this.name = "小明";}Aaa.prototype.showName = function(){    alert( this.name );};function Bbb(){   //子类}Bbb.prototype = new Aaa();   //类式继承var b = new Bbb();b.showName();console.log(b);

而其中的

Bbb.prototype = new Aaa();是有这么一个图的。
  所以经常会有一个面试题目是,如何用一句话做到继承?答案就是这句话。Bbb.prototype = new Aaa();但是这句话会有点问题的,不完善。 第一问题: 例如再在上面代码中加句
alert(b.constructor);  //弹出来的Aaa的构造函数。
故而需要将
Bbb.prototype = new Aaa();  修改成  Bbb.prototype = new Aaa();  Bbb.prototype.constructor = Bbb;  //修改指向问题
再弹出 b.constructor 就正确了。
第二个问题: 将上面的this.name = "小明"; 改成 this.name = [1,2,3]; 再将 var b = new Bbb();b.showName(); 改成 var b = new Bbb();b1.name.push(4);var b2 = new Bbb();alert(b.name);   会发现结果是1,2,3,4。对象实例已经互相影响了。 看到上面那张图不难理解(都是Aaa中的name)。所以属性和方法要分开继承。解决方案如下:
function Aaa(){   //父类    this.name = [1,2,3];}    Aaa.prototype.showName = function(){    alert( this.name );};function Bbb(){   //子类        Aaa.call(this);    }var F = function(){};F.prototype = Aaa.prototype;Bbb.prototype = new F();Bbb.prototype.constructor = Bbb; //修正指向问题var b1 = new Bbb();//b1.showName();//alert( b1.name );//alert( b1.constructor );b1.name.push(4);var b2 = new Bbb();alert( b2.name );

F的作用就是 避免属性继承,而只是方法的继承

 
 

转载于:https://www.cnblogs.com/wanliyuan/p/5245285.html

你可能感兴趣的文章
[日推荐]『饿了么外卖服务』饿了么官方小程序,无需下载安装!
查看>>
JavaScript 作用域
查看>>
Linux Ubuntu 16.04 主机名设置
查看>>
CCNP 静态路由
查看>>
单链表二[不带头节点链表]
查看>>
Spring mvc 拦截器
查看>>
MySQL GROUP BY 和GROUP_CONCAT的一些用法
查看>>
## mysqldump 导出数据库各参数详细说明
查看>>
java中URL编码和中文相互转换
查看>>
影评:《云图》:生命并非微不足道
查看>>
hibernate4之一对一关系映射(二)
查看>>
我的友情链接
查看>>
Android第五课 编译错误分析
查看>>
VS_远程调试
查看>>
博为峰Java技术题 ——JavaSE Java实现在不同编码之间进行文件转换
查看>>
Throws与Throw
查看>>
php趣味编程 - php求黑色星期五
查看>>
zabbix安装
查看>>
ELK之权限管理
查看>>
×_7_12_2013 I: Light on or off
查看>>