传统的继承在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,如需转载请自行联系原作者

相关文章
|
24天前
|
JavaScript 前端开发 安全
使用TypeScript增强JavaScript应用的类型安全性
【5月更文挑战第23天】TypeScript是微软开发的JavaScript超集,引入静态类型检查和面向对象特性,提升代码可维护性和可靠性。它在编译阶段捕获类型错误,增强代码可读性,并通过接口、类、泛型和类型断言等工具确保类型安全。使用TypeScript能有效避免复杂项目中的调试难题,尤其适合大型项目。
|
25天前
|
数据可视化 JavaScript 架构师
D3.js实战:数据可视化高级技巧实例应用
本文介绍了D3.js入门,包括创建HTML文件引入库、绘制简单线图、柱状图和饼图。示例展示了数据绑定、交互性和动画效果,如柱状图的悬停效果和线图的数据平滑过渡。此外,还提及力导向图和地图可视化的实现,以及使用Enter, Update, Exit模式进行动态更新。最后提到了复杂图表和高级技巧,如使用组件库、动画、交互性和性能优化。
31 0
|
1天前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念,它允许我们基于现有的类(或构造函数)创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展,创建类层次结构,但过深的继承链导致复杂性增加,紧密耦合增加维护成本,单继承限制灵活性,方法覆盖可能隐藏父类功能,且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
12 7
|
1天前
|
JavaScript 前端开发
在 JavaScript 中,实现继承的方法有多种
【6月更文挑战第15天】JavaScript 继承常见方法包括:1) 原型链继承,利用原型查找,实例共享原型属性;2) 借用构造函数,避免共享,但方法不在原型上复用;3) 组合继承,结合两者优点,常用但有额外开销;4) ES6 的 class,语法糖,仍基于原型链,提供直观的面向对象编程。
11 7
|
2天前
|
JavaScript 前端开发
JavaScript 继承的方式和优缺点
JavaScript 继承的方式和优缺点
|
2天前
|
JavaScript Shell 开发者
怎样使用Nest.js快速构建高效Node.js应用?
这篇博客介绍了Nest.js,一个基于TypeScript的Node.js框架,适用于构建可维护和可扩展的服务器端应用。文章引导读者快速入门,包括安装Node.js和Nest.js CLI,创建新项目,安装依赖以及启动开发服务器。通过访问`http://localhost:3000`,可以看到&quot;Hello World!&quot;,证明应用已成功运行。Nest.js因其模块化架构和强大的功能,成为现代Web开发的热门选择。
|
4天前
|
前端开发 JavaScript 网络协议
深入探讨其在JavaScript中的应用
【6月更文挑战第12天】WebSockets是为解决HTTP协议在实时通信中的局限而生的一种全双工通信协议,基于TCP,适合在线聊天、游戏等场景。JavaScript中的WebSocket API使浏览器与服务器能建立持久连接,方便数据实时传输。通过创建WebSocket对象、监听事件(open、message、error、close)来管理连接、发送/接收数据及处理错误。相较于AJAX轮询和长轮询,WebSockets更高效实时,是现代Web实时应用的理想选择。
19 3
|
4天前
|
JavaScript 前端开发
深入解析JavaScript中的面向对象编程,包括对象的基本概念、创建对象的方法、继承机制以及面向对象编程的优势
【6月更文挑战第12天】本文探讨JavaScript中的面向对象编程,解释了对象的基本概念,如属性和方法,以及基于原型的结构。介绍了创建对象的四种方法:字面量、构造函数、Object.create()和ES6的class关键字。还阐述了继承机制,包括原型链和ES6的class继承,并强调了面向对象编程的代码复用和模块化优势。
11 0
|
6天前
|
前端开发 JavaScript 开发者
函数式编程在JavaScript中的应用
【6月更文挑战第10天】本文探讨了函数式编程在JavaScript中的应用,介绍了函数式编程的基本概念,如纯函数和不可变数据。文中通过示例展示了高阶函数、不可变数据的使用,以及如何编写纯函数。此外,还讨论了函数组合和柯里化技术,它们能提升代码的灵活性和可重用性。掌握这些函数式编程技术能帮助开发者编写更简洁、可预测的JavaScript代码。
|
11天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的代驾应用系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的代驾应用系统附带文章和源代码部署视频讲解等
156 21