javascript 的继承实例
shape.prototype = {
getEdge:function(){
return this.edge;
},
getArea:function(){
return this.a*this.b;
}
}
function shape(edge, a, b)
{
this.edge = edge;
this.a = a;
this.b = b;
} //三角形继续形状
triangle.prototype = new shape();
triangle.prototype.getName = function(){alert('I am a triangle');}
function triangle(bottom ,height)
{
shape.call(this, 3, bottom ,height);
} //四边形继续形状
rectangle.prototype = new shape();
rectangle.prototype.getName = function(){alert('I am a rectangle');}
rectangle.prototype.getArea = function(){alert('I rewrite parent getArea method');}
function rectangle(bottom ,height)
{
shape.call(this, 4, bottom ,height);
} var t = new triangle(10, 5); var r = new rectangle(10, 5); console.dir(r);
继承方面,javascript中的每个对象都有一个内部私有的链接指向另一个对象 (或者为 null
),这个对象就是原对象的原型. 这个原型也有自己的原型, 直到对象的原型为null为止. 这种一级一级的链结构就称为原型链.
基于原型链的继承
javascript对象有两种不同的属性,一种是对象自身的属性,另外一种是继承于原型链上的属性.下面的代码演示了当访问一个对象的属性时,到底发生了什么
// 假定我们有个对象o,并且o所在的原型链如下:
// {a:1, b:2} ---> {b:3, c:4} ---> null
// 'a'和'b'是o自身的属性. // 该例中,用"对象.[[Prototype]]"来表示这个对象的原型.
// 这只是一个纯粹的符号表示(ECMAScript标准中也这样使用),不能在实际代码中使用. console.log(o.a); // 1
// a是o的自身属性吗?是的,该属性的值为1 console.log(o.b); // 2
// b是o的自身属性吗?是的,该属性的值为2
// o.[[Prototype]]上还有一个'b'属性,但是它不会被访问到.这种情况称为"属性遮蔽". console.log(o.c); // 4
// c是o的自身属性吗?不是,那看看o.[[Prototype]]上有没有.
// c是o.[[Prototype]]的自身属性吗?是的,该属性的值为4
console.log(o.d); // undefined
// d是o的自身属性吗?不是,那看看o.[[Prototype]]上有没有.
// d是o.[[Prototype]]的自身属性吗?不是,那看看o.[[Prototype]].[[Prototype]]上有没有.
// o.[[Prototype]].[[Prototype]]为null,原型链已到顶端,没有d属性,返回undefined
在原型链上查找属性比较耗时,对性能有副作用,这在性能要求苛刻的情况下很重要。另外,试图访问不存在的属性时会遍历整个原型链。
更详细的继承介绍:http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html
MDN继承介绍:https://developer.mozilla.org/zh-CN/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain
javascript 的继承实例的更多相关文章
- javascript 用call来继承实例属性
xxx.call(thisObj, arg1,...)的调用可以改变当前函数的执行环境为传入的thisObj对象.利用这一点可以实现继承————当前的对象获得XXX的属性和方法. 例子: functi ...
- Javascript模拟继承(赠送.net吐槽一段)
首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...
- 详解Javascript的继承实现(二)
上文<详解Javascript的继承实现>介绍了一个通用的继承库,基于该库,可以快速构建带继承关系和静态成员的javascript类,好使用也好理解,额外的好处是,如果所有类都用这种库来构 ...
- JavaScript之继承(原型链)
JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...
- 面向对象继承实例(a如何继承b)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- TDD测试驱动的javascript开发(3) ------ javascript的继承
说起面向对象,人们就会想到继承,常见的继承分为2种:接口继承和实现继承.接口继承只继承方法签名,实现继承则继承实际的方法. 由于函数没有签名,在ECMAScript中无法实现接口继承,只支持实现继承. ...
- 彻底理解Javascript原型继承
彻底理解Javascript原型继承 之前写过一篇Javascript继承主题的文章,这篇文章作为一篇读书笔记,分析的不够深入. 本文试图进一步思考,争取彻底理解Javascript继承原理 实例成员 ...
- Javascript原型继承容易忽略的错误
编写Javascript的开发者都知道,JS虽然没有类(ES6添加了class语法),但是可以模拟出OOP语言的类和面向对象的概念,比如我们都知道的一句话,Javascript中处处是对象,而面向对象 ...
- Javascript 组合继承 原型链继承 寄生继承
Javascript继承通常有三种方式. 第一种:组合式继承: function SuperType(name) { this.name = name; this.colors = ["re ...
随机推荐
- 记git升级版本之后出现fatal: NullReferenceException encountered问题
问题缘由 因为实习的时候,公司要求将Git升级到最新版本,然后我就升级了. 这里之前有一段小插曲: 因为最初下载Git的本地目录是中文目录,然后在webstorm里面配置Git的路径时最好是用英文的路 ...
- Java获取Access数据库连接单例简单实例
Java在连接Access数据库时比较方便,不用导入第三方的jar包,jdk中内置的odbc可以完成Access数据库的访问,需要注意的是,我们首先要配置Access数据库的数据源,还要区分x86和x ...
- 设计模式 -- 访问者模式(Visitor)
写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------主要内容包括: 初识访问者模 ...
- Codeforces Round #300 A. Cutting Banner 水题
A. Cutting Banner Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/538/pro ...
- Spring Bean引用例子
在Spring,bean可以“访问”对方通过bean配置文件指定相同或不同的引用. 1. Bean在不同的XML文件 如果是在不同XML文件中的bean,可以用一个“ref”标签,“bean”属性引用 ...
- setTimeout你知多少
假期这么快就结束了,其实对我来说没什么影响,因为我一周才两节课,对于课多的同学来说,我天天在休假,不要羡慕哟~ 但休假并不代表闲着,还是得苦逼的编代码,唉..一入程序深似海.. 不管学得多少,还是总 ...
- /dev/fb0入门练习
转:http://hi.baidu.com/fsx92/item/bdbf90d8adab409f260ae738 大家都知道Unix/Linux系统是由命令驱动的.那么最基本的系统是命令行的(就是想 ...
- linux下关于压缩、解压相关的操作
本文转自: http://alex09.iteye.com/blog/647128 很不错的linux下关于压缩.解压相关的操作,适合于linux初学者. .tar 解包:tar xvf Fil ...
- windows服务与计划任务
1. 打开Visual Studio 2012新建一个project Solution: 2. 选择Windows->windows Service,修改服务名称:MyFirstService: ...
- Nuget server on IIS6 returns 404
Nuget server on IIS6 returns 404 when downloading package after upgrade 2011年9月2日 8:03:30 (GMT Dayli ...