AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

js 继承(1)

2016-05-10 1593
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

js 如何实现继承呢?

下面是一个简单的继承demo

Js代码   收藏代码
  1. console.clear();  
  2. //child 继承 parent  
  3. var extend=function(child,parent)  
  4. {  
  5.   child.prototype=new parent();  
  6.     
  7. }  
  8. function A(){  
  9.   this.name="A";  
  10.   this.sayHello=function(){  
  11.     console.log("Hello , "+this.name);  
  12.   }  
  13.     
  14. }  
  15.   
  16. function B(){  
  17.   this.sex='man';  
  18.   this.mySex=function(){  
  19.     console.log("sex:"+this.sex);  
  20.   }  
  21. }  
  22.   
  23.   
  24.   
  25. extend(B,A);  
  26.   
  27. var b=new B();  
  28. b.mySex();  
  29. b.sayHello();  

 运行结果:

sex:man
 
Hello , A

说明:B 本身没有sayHello 方法,而是从A 继承过来的.

 

那么我们再让B继承另外一个类C 

Js代码   收藏代码
  1. function C(){  
  2.   this.age=26;  
  3.   this.myAge=function(){  
  4.     console.log("age:"+this.age);  
  5.   }  
  6. }  
  7.   
  8.   
  9.   
  10. extend(B,A);  
  11. extend(B,C);  
  12. var b=new B();  
  13. b.mySex();  
  14. b.sayHello();  

 报错:

 继承C 之后,调用sayHello竟然报错,但是sayHello不是从A 继承过来的吗?

说明我们的继承方法有问题:

Js代码   收藏代码
  1. var extend=function(child,parent)  
  2. {  
  3.   child.prototype=new parent();  
  4.     
  5. }  

 B先继承A,然后继承C,那么之前继承A的属性都没了.这显然不合要求.

所以我优化一下继承方法:

Js代码   收藏代码
  1. //child 继承 parent  
  2. var extend=function(child,parent)  
  3. {  
  4.   var p1=child.prototype;  
  5.   child.prototype=new parent();  
  6.   child.prototype.__proto__=p1;  
  7.     
  8. }  

 完整代码如下:

Js代码   收藏代码
  1. console.clear();  
  2. //child 继承 parent  
  3. var extend=function(child,parent)  
  4. {  
  5.   var p1=child.prototype;  
  6.   child.prototype=new parent();  
  7.   child.prototype.__proto__=p1;  
  8.     
  9. }  
  10. function A(){  
  11.   this.name="A";  
  12.   this.sayHello=function(){  
  13.     console.log("Hello , "+this.name);  
  14.   }  
  15.     
  16. }  
  17.   
  18. function B(){  
  19.   this.sex='man';  
  20.   this.mySex=function(){  
  21.     console.log("sex:"+this.sex);  
  22.   }  
  23. }  
  24.   
  25. function C(){  
  26.   this.age=26;  
  27.   this.myAge=function(){  
  28.     console.log("age:"+this.age);  
  29.   }  
  30. }  
  31.   
  32.   
  33. extend(B,A);  
  34. extend(B,C);  
  35. var b=new B();  
  36. b.mySex();  
  37. b.sayHello();  
  38. b.myAge();  

 执行结果:

sex:man
 
Hello , A

age:26

 

 

即B 成功地调用了A和C 的方法

 我们继续优化,因为__proto__在IE中不能访问.

优化的结果:

Js代码   收藏代码
  1. //child 继承 parent  
  2.        var extend=function(child,parent)  
  3.        {  
  4.            var p1=child.prototype;  
  5.            var p2=parent.prototype;  
  6.            parent.prototype=p1;  
  7.            child.prototype=new parent();  
  8.            parent.prototype=p2;  
  9.   
  10.        }  
  11.        function A(){  
  12.            this.name="A";  
  13.            this.sayHello=function(){  
  14.                console.dir("Hello , "+this.name);  
  15.            }  
  16.   
  17.        }  
  18.   
  19.        function B(){  
  20.            this.sex='man';  
  21.            this.mySex=function(){  
  22.                console.dir("sex:"+this.sex);  
  23.            }  
  24.        }  
  25.   
  26.        function C(){  
  27.            this.age=26;  
  28.            this.myAge=function(){  
  29.                console.dir("age:"+this.age);  
  30.            }  
  31.        }  
  32.   
  33.   
  34.        extend(B,A);  
  35.        extend(B,C);  
  36.        var b=new B();  
  37.        b.mySex();  
  38.        b.sayHello();  
  39.        b.myAge();  
  40.        console.dir(A);  
  41.        console.dir(B);  
  42.        console.dir(C);  

 运行结果:

 

 继承方法:

Js代码   收藏代码
  1. //child 继承 parent  
  2.        var extend=function(child,parent)  
  3.        {  
  4.            var p1=child.prototype;  
  5.            var p2=parent.prototype;  
  6.            parent.prototype=p1;  
  7.            child.prototype=new parent();  
  8.            parent.prototype=p2;  
  9.            delete p1;  
  10.            delete p2;  
  11.        }  
文章标签：
JavaScript
关键词：
JavaScript继承
黄威的世界
目录
相关文章
我是快乐的嘟嘟
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承？
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承，避免出现意外的行为和错误。同时，在现代JavaScript中，也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法，但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
我是快乐的嘟嘟
275 50
众所周知
|
设计模式 JavaScript 前端开发
在JavaScript中，继承是一个重要的概念，它允许我们基于现有的类（或构造函数）创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展，创建类层次结构，但过深的继承链导致复杂性增加，紧密耦合增加维护成本，单继承限制灵活性，方法覆盖可能隐藏父类功能，且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
众所周知
131 7
龙大吉
|
JavaScript 前端开发
在 JavaScript 中，实现继承的方法有多种
【6月更文挑战第15天】JavaScript 继承常见方法包括：1) 原型链继承，利用原型查找，实例共享原型属性；2) 借用构造函数，避免共享，但方法不在原型上复用；3) 组合继承，结合两者优点，常用但有额外开销；4) ES6 的 class，语法糖，仍基于原型链，提供直观的面向对象编程。
龙大吉
128 7
john散漫
|
JavaScript 前端开发 开发者
js实现继承怎么实现
【10月更文挑战第26天】每种方式都有其优缺点和适用场景，开发者可以根据具体的需求和项目情况选择合适的继承方式来实现代码的复用和扩展。
john散漫
231 61
大树营养快线
|
JavaScript 前端开发
Javascript如何实现继承?
【10月更文挑战第24天】JavaScript 中实现继承的方式有很多种，每种方式都有其优缺点和适用场景。在实际开发中，我们需要根据具体的需求和情况选择合适的继承方式，以实现代码的复用和扩展。
大树营养快线
134 11
周一同学Zelina
|
自然语言处理 JavaScript 前端开发
一文梳理JavaScript中常见的七大继承方案
该文章系统地概述了JavaScript中七种常见的继承模式，包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承等，并探讨了每种模式的实现方式及其优缺点。
周一同学Zelina
366 3
一文梳理JavaScript中常见的七大继承方案
德国都芳最好
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承？
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系，但需要注意其共享性、查找效率以及参数传递等问题，根据具体的应用场景合理地选择和使用继承方式，以满足代码的复用性和可维护性要求。
德国都芳最好
198 1
游客j4mujezz7vm7y
|
JavaScript 前端开发
js之class继承|27
js之class继承|27
游客j4mujezz7vm7y
197 3
游客j4mujezz7vm7y
|
JSON JavaScript 前端开发
js原型继承|26
js原型继承|26
游客j4mujezz7vm7y
125 1
cqtianxin1
|
JavaScript 前端开发 开发者
JavaScript 类继承
JavaScript 类继承
cqtianxin1
118 1

热门文章

最新文章

  • 1
    好程序员web前端带你了解JS的作用域链
  • 2
    Ajax学习-JavaScript实例2
  • 3
    Rails中Form标签JavaScript验证
  • 4
    eclipse加速之禁用JS、jsp等文件的语法验证
  • 5
    JavaScript垃圾回收（三）——内存泄露
  • 6
    用JavaScript获取输入的特殊字符
  • 7
    [转]JavaScript程序编码规范
  • 8
    js拾遗：appendChild 添加移动节点
  • 9
    CSDN_投票评选_JS_分析脚本
  • 10
    10 个jQuery/JavaScript的圣诞主题效果
  • 1
    局域网监控其他电脑的设备信息管理 Node.js 跳表算法
    139
  • 2
    Chrome 下载大文件报错！用 Streamsaver.js 完美填坑
    732
  • 3
    百宝箱开放平台 ✖️ Node.js SDK
    205
  • 4
    电脑管控软件的进程优先级调度：Node.js 红黑树算法
    175
  • 5
    企业上网监控系统的恶意 URL 过滤 Node.js 布隆过滤器算法
    257
  • 6
    JavaScript进阶挑战：巩固核心知识点
    134
  • 7
    js实现promise常用场景使用示例
    243
  • 8
    基于 Node.js 图结构的局域网设备拓扑分析算法在局域网内监控软件中的应用研究
    255
  • 9
    Nest.js控制器深度解析：路由与请求处理的高级特性
    350
  • 10
    js react antd 实现页面低分变率和高分变率下字体大小自适用，主要是配置antd
    170

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例
    • 下一篇
    「直播预告」Streaming Lakehouse Meetup EP.2｜Paimon × StarRocks 共话实时湖仓