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

js 继承(1)

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

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继承
黄威的世界
目录
相关文章
周一同学Zelina
|
8天前
|
自然语言处理 JavaScript 前端开发
一文梳理JavaScript中常见的七大继承方案
该文章系统地概述了JavaScript中七种常见的继承模式，包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承等，并探讨了每种模式的实现方式及其优缺点。
周一同学Zelina
17 3
一文梳理JavaScript中常见的七大继承方案
众所周知
|
4月前
|
设计模式 JavaScript 前端开发
在JavaScript中，继承是一个重要的概念，它允许我们基于现有的类（或构造函数）创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展，创建类层次结构，但过深的继承链导致复杂性增加，紧密耦合增加维护成本，单继承限制灵活性，方法覆盖可能隐藏父类功能，且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
众所周知
45 7
龙大吉
|
4月前
|
JavaScript 前端开发
在 JavaScript 中，实现继承的方法有多种
【6月更文挑战第15天】JavaScript 继承常见方法包括：1) 原型链继承，利用原型查找，实例共享原型属性；2) 借用构造函数，避免共享，但方法不在原型上复用；3) 组合继承，结合两者优点，常用但有额外开销；4) ES6 的 class，语法糖，仍基于原型链，提供直观的面向对象编程。
龙大吉
34 7
游客j4mujezz7vm7y
|
9天前
|
JavaScript 前端开发
js之class继承|27
js之class继承|27
游客j4mujezz7vm7y
27 3
游客j4mujezz7vm7y
|
9天前
|
JSON JavaScript 前端开发
js原型继承|26
js原型继承|26
游客j4mujezz7vm7y
27 1
cqtianxin1
|
9天前
|
JavaScript 前端开发 开发者
JavaScript 类继承
JavaScript 类继承
cqtianxin1
12 1
六卿
|
11天前
|
JavaScript 前端开发
JS的几种继承方式
JavaScript中的几种继承方式视频。
六卿
11 0
土木林森
|
2月前
|
开发者 图形学 iOS开发
掌握Unity的跨平台部署与发布秘籍，让你的游戏作品在多个平台上大放异彩——从基础设置到高级优化，深入解析一站式游戏开发解决方案的每一个细节，带你领略高效发布流程的魅力所在
【8月更文挑战第31天】跨平台游戏开发是当今游戏产业的热点，尤其在移动设备普及的背景下更为重要。作为领先的游戏开发引擎，Unity以其卓越的跨平台支持能力脱颖而出，能够将游戏轻松部署至iOS、Android、PC、Mac、Web及游戏主机等多个平台。本文通过杂文形式探讨Unity在各平台的部署与发布策略，并提供具体实例，涵盖项目设置、性能优化、打包流程及发布前准备等关键环节，助力开发者充分利用Unity的强大功能，实现多平台游戏开发。
土木林森
54 0
土木林森
|
2月前
|
JavaScript 前端开发 开发者
揭开JavaScript的神秘面纱：原型链背后隐藏的继承秘密
【8月更文挑战第23天】原型链是JavaScript面向对象编程的核心特性，它使对象能继承另一个对象的属性和方法。每个对象内部都有一个[[Prototype]]属性指向其原型对象，形成链式结构。访问对象属性时，若当前对象不存在该属性，则沿原型链向上查找。
土木林森
27 0
阿福的工作室
|
2月前
|
JavaScript 前端开发
JS的6种继承方式
JS的6种继承方式
阿福的工作室
27 0