传统的继承在JavaScript中的应用

简介:

  简单的意译,JavaScript仿照传统的继承方式进行继承(如:Java的继承方式)

  JavaScript是一种弱类型,面向对象的语言,正因为如此,它使用原型继承,而不是经典的继承。这些让使用传统的面向对象语言,如C++和Java的程序员很不能理解。 JavaScript的原型继承比传统的继承有着更强的表现力。


  不过要问,我们为什么关心继承呢?主要有两个原因:

  第一:类型的便利。我们想要的语言系统自动转化相似类的引用。强类型语言(如Java),类型系统要求对对象的引用要进行显示的类型转换,而对于弱类型的JavaScript中的对象引用不存在转换问题。

  第二:代码的重用。有一定数量的对象实现了相同的方法,或者一个对象与其他对象具有共同部分,其余都是给该对象增加或减少少量的方法,这时候就用继承来提取公共部分,这将是非常有用。而JavaScript的Prototype继承更加有用。


 下面是用JavaScript来模仿传统的继承。

 Java示例:类Parenizor


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public  class  Parenizor{
     private  String value;
                                                                                                                                                                                                                                                                                           
     public  Parenizor(value){
         this .value=value;
     }
                                                                                                                                                                                                                                                                                           
     public  void  setValue(value){
         this .value=value;
     }
                                                                                                                                                                                                                                                                                           
     public  String getValue(){
         return  this .value;
     }
                                                                                                                                                                                                                                                                                           
     public  String toString(){
         return  "Parenizor[value:" +value+ "]" ;
     }
                                                                                                                                                                                                                                                                                           
}

 JavaScript示例:原型对象Parenizor

1
2
3
4
5
6
7
8
9
10
11
12
13
function  Parenizor(value) {
     this .setValue(value);
}
Parenizor.method( 'setValue' function  (value) {
     this .value = value;
     return  this ;
});
Parenizor.method( 'getValue' function  () {
     return  this .value;
});
Parenizor.method( 'toString' function  () {
     return  '('  this .getValue() +  ')' ;
});

 上面JavaScript模仿的例子还不能使用,method是Function内置对象的方法,而该方法是用户自己为Function对象添加的原型方法。因此要添加如下方法,上面JavaScript模仿Java的类定义中的方法才能正常使用。

 Function.prototype.method方法如下:


1
2
3
4
Function.prototype.method =  function  (name, func) {
     this .prototype[name] = func;
     return  this ;
};

关于继承:再次扩充了函数,使它继承了父类的一个实例并将它用于一个新的原型,并且修改constructor部分,并将uber方法一并添加到这个原型中来了。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Function.method( 'inherits' function  (parent) {
     this .prototype =  new  parent();
     var  d = {},
         p =  this .prototype;
     this .prototype.constructor = parent;
     this .method( 'uber' function  uber(name) {
         if  (!(name  in  d)) {
             d[name] = 0;
         }
         var  f, r, t = d[name], v = parent.prototype;
         if  (t) {
             while  (t) {
                 v = v.constructor.prototype;
                 t -= 1;
             }
             f = v[name];
         else  {
             f = p[name];
             if  (f ==  this [name]) {
                 f = v[name];
             }
         }
         d[name] += 1;
         r = f.apply( this , Array.prototype.slice.apply(arguments, [1]));
         d[name] -= 1;
         return  r;
     });
     return  this ;
});

关于多继承:

使用函数的Prototype对象是可以实现多继承的,通过使用多个类来构造一个新类,不过这样的多重继承会很复杂和不易维护。


1
2
3
4
5
6
7
Function.method( 'swiss' function  (parent) {
     for  ( var  i =  1 ; i < arguments.length; i +=  1 ) {
         var  name = arguments[i];
         this .prototype[name] = parent.prototype[name];
     }
     return  this ;
});

   swiss方法中循环访问arguments数组中的元素。对于每一个名称,它从父级prototype中复制一个member到它的新类的prototype中去。

   使用方式:

 

1
ZParenizor.swiss(NumberValue,  'setValue' 'setRange' );

  只需要为ZParenizor添加上需要的NumberValue的方法setValue和setRange.


译文末:

  传统意义上的对象是固化的,只有新建一个类才能添加对象的成员。但是在JavaScript中,对象是开放的,能够非常方便的添加成员。



本文转自 secondriver 51CTO博客,原文链接:http://blog.51cto.com/aiilive/1273037,如需转载请自行联系原作者

相关文章
|
1天前
|
设计模式 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 设计模式与实战应用
【4月更文挑战第30天】本文探讨JavaScript设计模式在提升开发效率和代码质量中的关键作用。涵盖单例、工厂、观察者、装饰器和策略模式,并通过实例阐述其在全局状态管理、复杂对象创建、实时数据更新、功能扩展和算法切换的应用。理解并运用这些模式能帮助开发者应对复杂项目,提升前端开发能力。
|
1天前
|
JavaScript 前端开发
js变量的作用域、作用域链、数据类型和转换应用案例
【4月更文挑战第27天】JavaScript 中变量有全局和局部作用域,全局变量在所有地方可访问,局部变量只限其定义的代码块。作用域链允许变量在当前块未定义时向上搜索父级作用域。语言支持多种数据类型,如字符串、数字、布尔值,可通过 `typeof` 检查类型。转换数据类型用 `parseInt` 或 `parseFloat`,将字符串转为数值。
18 1
|
1天前
|
设计模式 JavaScript 算法
js设计模式-策略模式与代理模式的应用
策略模式和代理模式是JavaScript常用设计模式。策略模式通过封装一系列算法,使它们可互换,让算法独立于客户端,提供灵活的选择。例如,定义不同计算策略并用Context类执行。代理模式则为对象提供代理以控制访问,常用于延迟加载或权限控制。如创建RealSubject和Proxy类,Proxy在调用RealSubject方法前可执行额外操作。这两种模式在复杂业务逻辑中发挥重要作用,根据需求选择合适模式解决问题。
|
1天前
|
存储 监控 JavaScript
使用Node.js构建实时聊天应用的技术指南
【5月更文挑战第12天】本文指导使用Node.js、Express.js和Socket.IO构建实时聊天应用。技术栈包括Node.js作为服务器环境、WebSocket协议、Express.js作为Web框架和Socket.IO处理实时通信。步骤包括项目初始化、安装依赖、搭建服务器、实现实时聊天功能、运行应用以及后续的完善和部署建议。通过这个指南,读者可以学习到创建简单实时聊天应用的基本流程。
|
1天前
|
JavaScript 前端开发
JavaScript 中最常用的继承方式
【5月更文挑战第9天】JavaScript中的继承有多种实现方式:1) 原型链继承利用原型查找,但属性共享可能引发问题;2) 借用构造函数避免共享,但方法复用不佳;3) 组合继承结合两者优点,是最常用的方式;4) ES6的class继承,是语法糖,仍基于原型链,提供更直观的面向对象编程体验。
17 1
|
1天前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念
【5月更文挑战第9天】JavaScript继承有优点和缺点。优点包括代码复用、扩展性和层次结构清晰。缺点涉及深继承导致的复杂性、紧耦合、单一继承限制、隐藏父类方法以及可能的性能问题。在使用时需谨慎,并考虑其他设计模式。
15 2
|
1天前
|
JavaScript 前端开发 开发者
JavaScript 继承的方式和优缺点
JavaScript 继承的方式和优缺点
12 0
|
1天前
|
数据采集 JavaScript 数据可视化
Node.js爬虫在租房信息监测与分析中的应用
Node.js爬虫在租房信息监测与分析中的应用
|
1天前
|
开发框架 JavaScript 前端开发
【JavaScript 与 TypeScript 技术专栏】TypeScript 在 Web 开发中的前沿应用
【4月更文挑战第30天】TypeScript在Web开发中日益重要,以其强大的类型系统提升代码质量,支持组件化开发,与React、Vue、Angular等框架良好集成。在大型项目管理中,TypeScript助于代码组织和优化,提高团队协作效率。此外,它提升开发体验,提供智能提示和错误检测。众多成功案例证明其前沿应用,未来将在Web开发领域持续发挥关键作用。
|
1天前
|
前端开发 JavaScript 网络协议
【JavaScript技术专栏】WebSockets在JavaScript中的应用
【4月更文挑战第30天】WebSocket是为解决HTTP协议在实时通信上的局限而诞生的技术,提供全双工、持久连接的通信方式,适合在线聊天、实时游戏等场景。JavaScript中的WebSocket API使浏览器与服务器能建立持久连接,通过事件处理连接、发送/接收数据及错误。相较于AJAX轮询和长轮询,WebSockets更高效、实时,是现代Web实时通信的优选。