浅谈JavaScript中继承的实现
谈到js中的面向对象编程,都有一个共同点,选择原型属性还是构造函数,两者各有利弊,而就片面的从js的对象创建以及继承的实现两个方面来说,官方所推荐的是两个相结合,各尽其责,各取其长,在前面的例子中,我已就在JavaScript中对象创建的方法做了一些总结,下面就其继承来道说一二:
:原型链继承:
每一个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象内部的指针
(默认的原型,所有默认类型都继承了Object,而这个继承也是用过原型链实现)
function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
};
function SubType(){
this.subproperty = false;
}
//继承SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function(){
return this.subproperty;
};
var instance = new SubType();
alert(instance.property);
alert(instance.getSuperValue());
alert(instance.getSubValue());
原型继承的问题:
1:原型属性被所有实例所共享 一个改变,其余跟着改变。
2:在创建子类型的实例时,不能向超类型的构造函数中传递参数
总结:实践中很少会单独使用原型链 (这似乎和对象创建时的问题如出一辙) 2:借用构造函数创建:
function SuperType(){
this.colors = ["red","blue","green"];
}
function SubType(){
// 继承了SubType
SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //["red", "blue", "green", "black"]
var instance2 = new SubType()
alert(instance2.colors); //["red", "blue", "green"]没哟随某个实例
//的更改而更改
//--------------------------------------------------------------------------
// 参数传递:
function SuperType(name){
this.name = name;
}
function SubType(){
// 继承了SuperType,同时还传递了参数
SuperType.call(this , "Nicholas");
// 实例属性
this.age = 29;
}
var instance = new SubType();
alert(instance.name); //Nicholas
alert(instance.age); //29
缺点:方法都在构造函数里面定义,因此函数复用就无从谈起(什么意思呢:摸索中)。
组合继承:
// 组合继承:
function SuperType(name){
this.name = name;
this.colors = ["red","blue","green"];
} SuperType.prototype.sayName = function(){
alert(this.name);
} function SubType(name , age){
//继承属性: 调用构造函数
SuperType.call(this , name);//第一次调用SuperType()
this.age = age;
} //继承方法:
SubType.prototype = new SuperType(); //第二次调用SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
alert(this.age);
}; var instance1 = new SubType("Nicholas",29);
instance1.colors.push("black");
alert(instance1.colors);
instance1.sayName();
instance1.sayAge(); var instance2 = new SubType("Greg",27);
alert(instance2.colors);
instance2.sayName();
instance2.sayAge();
自然,这种组合式创建也有其不到之处,即来两次调用了SuperType构造函数,使得实例属性colors和name的重复创建,后一次创建的自然会覆盖前面的。
随引出<寄生组合式继承>
上代码:
//寄生组合式继承:
function inheritPrototype(subType , superType){
var prototype = Object(superType.prototype); //创建对象原型的一
//个副本
//为创建的副本添加constructor属性,使其指向自己的构造函数
prototype.constructor = subType;//将新创建(副本)的对象赋给子类型的一个原型
subType.prototype = prototype;
} function SuperType(name){
this.name = name;
this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name, age){
SuperType.call(this,name); this.age = age;
}
inheritPrototype(SubType , SuperType);
SubType.prototype.sayAge = function(){
alert(this.age);
};
从代码中,咋们可以看出,值调用了一次SuperType的构造函数,固然就没有什么多余的不必要的属性创建。
浅谈JavaScript中继承的实现的更多相关文章
- 浅谈JavaScript中的闭包
浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...
- 浅谈JavaScript中的null和undefined
浅谈JavaScript中的null和undefined null null是JavaScript中的关键字,表示一个特殊值,常用来描述"空值". 对null进行typeof类型运 ...
- 浅谈JavaScript中的正则表达式(适用初学者观看)
浅谈JavaScript中的正则表达式 1.什么是正则表达式(RegExp)? 官方定义: 正则表达式是一种特殊的字符串模式,用于匹配一组字符串,就好比用模具做产品,而正则就是这个模具,定义一种规则去 ...
- 浅谈JavaScript中的继承
引言 在JavaScript中,实现继承的主要方式是通过原型链技术.这一篇文章我们就通过介绍JavaScript中实现继承的几种方式来慢慢领会JavaScript中继承实现的点点滴滴. 原型链介绍 原 ...
- 浅谈 JavaScript 中的继承模式
最近在读一本设计模式的书,书中的开头部分就讲了一下 JavaScript 中的继承,阅读之后写下了这篇博客作为笔记.毕竟好记性不如烂笔头. JavaScript 是一门面向对象的语言,但是 ES6 之 ...
- 浅谈Javascript中的原型、原型链、继承
构造函数,原型,实例三者的关系 构造函数: 构造函数是创建对象的一种常用方式, 其他创建对象的方式还包括工厂模式, 原型模式, 对象字面量等.我们来看一个简单的构造函数: function Produ ...
- 浅谈JavaScript中的内存管理
一门语言的内存存储方式是我们学习他必须要了解的,接下来让我浅谈一下自己对他的认识. 首先说,JavaScript中的变量包含两种两种类型: 1)值类型或基本类型:undefined.null.numb ...
- 【总结】浅谈JavaScript中的接口
一.什么是接口 接口是面向对象JavaScript程序员的工具箱中最有用的工具之一.在设计模式中提出的可重用的面向对象设计的原则之一就是“针对接口编程而不是实现编程”,即我们所说的面向接口编程,这个概 ...
- 浅谈JavaScript中闭包
引言 闭包可以说是JavaScript中最有特色的一个地方,很好的理解闭包是更深层次的学习JavaScript的基础.这篇文章我们就来简单的谈下JavaScript下的闭包. 闭包是什么? 闭包是什么 ...
随机推荐
- HDU4866 Shooting (要持久段树)
意甲冠军: 给你一些并行x行轴.总是询问坐标x的顶部之前,k一个段高度,.标题是必须在线. 思路: 首先要会可持久化线段树(又称主席树和函数式线段树).不会的能够去做下POJ 2104. 把全部线段高 ...
- [LeetCode235]Lowest Common Ancestor of a Binary Search Tree
题目: Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in th ...
- XML数据读取方式性能比较(一)
原文:XML数据读取方式性能比较(一) 几个月来,疑被SOA,一直在和XML操作打交道,SQL差不多又忘光了.现在已经知道,至少有四种常用人XML数据操作方式(好像Java差不多),不过还没有实际比较 ...
- [原创].NET 业务框架开发实战之八 业务层Mapping的选择策略
原文:[原创].NET 业务框架开发实战之八 业务层Mapping的选择策略 .NET 业务框架开发实战之八 业务层Mapping的选择策略 前言:在上一篇文章中提到了mapping,感觉很像在重新实 ...
- Http与协议TCP协议简单易懂
于C#编写代码,很多时候会遇到Http协议或TCP合约,这里做一个简单的了解. TCP对应于该传送层协议,和HTTP对应于应用层协议,从本质上讲,两者是没有可比性.Http该协议是基于TCP之上的,当 ...
- 如何更好地理解和使用Github
只知道几乎在顶部看到一对Github用通俗易懂的解释: 你或许不懂怎样造一辆凯迪拉克,但你能够驾驶凯迪拉克. 你或许不懂Evernote是用什么技术做出来的,但你也能够使用Evernote. 你或许不 ...
- apache tomcat 集群! (转)
公司需要一个内部测试局域网, 要求可以支持3000并发访问!以前也没做过服务器这方面.临时抱佛脚,查看了N多文档,他人经验,布置好之后,又遇到了N多问题,功夫不负有心人.终于还是完成了要求!观他人的布 ...
- dba_dependencies查询结果视图
[oracle@rhel63single ~]$ sqlplus / as sysdba SQL*Plus: Release 11.2.0.4.0 Production on Fri Mar 13 0 ...
- 人迹罕至的android要完全退出程序的一种方法
最近的一个项目,无意中发现了一个方法,使android要完全退出程序的一种方法,遥想当年,以便找到让的有效途径android遇险完全退出程序,我不由得有些感慨. 在这里,不敢独享.和大家分享一下,还启 ...
- rails 4.0.2 + mongoid 对mongodb进行增删改查
新建项目 rails new mongoid_app --skip-active-record --skip-test-unit --skip-bundle create create README. ...