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 ...
随机推荐
- [bzoj1019][SHOI2008]汉诺塔 (动态规划)
Description 汉诺塔由三根柱子(分别用A B C表示)和n个大小互不相同的空心盘子组成.一开始n个盘子都摞在柱子A上,大的在下面,小的在上面,形成了一个塔状的锥形体. 对汉诺塔的一次合法的操 ...
- wampserver -- 取消PHP页面Warning和Notice级别的报错
Learn from:http://yige.org/p/91 一般遇到这样的问题,有两个方法:1.如果有服务器权限,直接把服务器上的php.ini的配置改了,改成不输出Warning和Notice级 ...
- Codeforces Round #346 (Div. 2) G. Fence Divercity dp
G. Fence Divercity 题目连接: http://www.codeforces.com/contest/659/problem/G Description Long ago, Vasil ...
- CDOJ 842 天下归晋 树状数组
天下归晋 Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/842 Descrip ...
- Tasker 中文版(4.6u2)
http://www.anzhi.com/soft_1868913.html Tasker绝对称得上是Android系统的神器之一,与Auto Memory Manager不同,Tasker不是加速型 ...
- Digital Current-Mode Control Challenges Analog Counterparts
http://electronicdesign.com/digital-ics/digital-current-mode-control-challenges-analog-counterparts ...
- 【翻译自mos文章】job 不能自己主动运行的解决方法
job 不能自己主动运行的解决方法 參考原文: Jobs do not execute automatically (Doc ID 309945.1) 适用于: Oracle Server - Ent ...
- Flume的安装配置
flume是一个分布式.可靠.和高可用的海量日志采集.聚合和传输的系统.支持在日志系统中定制各类数据发送方,用于收集数据;同时,Flume提供对数据进行简单处理,并写到各种数据接受方(比如文本.HDF ...
- Django练习
实现功能: 登录功能 添加功能 删除功能(未实现) 代码: index.html <!DOCTYPE html> <html lang="en"> < ...
- Node.js:Web模块、文件系统
一.web模块 Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,Web服务器的基本功能就是提供Web信息浏览服务.它只需支持HTTP协议.HTML文档格式及URL,与客户端的网络 ...