《Javascript高级程序设计》读书笔记之继承
1.原型链继承
让构造函数的原型对象等于另一个类型的实例,利用原型让一个引用类型继承另一个引用类型的属性和方法
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.getSuperValue());//true
代码示例中,完整原型链如下

原型链继承的问题:父类型引用类型的属性会被所有子类型实例共享,这是不符合预期的
function SuperType()
{
this.colors=["red","blue","green"];
} function SubType()
{
}
//继承SuperType
SubType.prototype=new SuperType(); 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","black"
2.借用构造函数继承
基本思想是在子类型构造函数内部调用超类型构造函数
function SuperType()
{
this.colors=["red","blue","green"];
} function SubType()
{
//继承SuperType
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,"Jim");
this.age=28;
} var instance1=new SubType();
alert(instance1.name);//"Jim"
alert(instance1.age);//
借用构造函数的问题:不能复用超类型的方法
3.组合继承
使用原型链实现对原型属性和方法的继承,通过借用构造函数实现对实例属性的继承
function SuperType(name)
{
this.name=name;
this.colors=["red","blue","green"];
}
SuperType.prototype.sayName=function(){
alert(this.name);
};
function SubType(name,age)
{
//继承SuperType
SuperType.call(this,name);
this.age=age;
}
SubType.prototype=new SuperType();
SubType.prototype.sayAge=function(){
alert(this.age);
}
var instance1=new SubType("Jim",29);
instance1.colors.push("black");
alert(instance1.colors);//"red","blue","green","black"
instance1.sayName();//"Jim"
instance1.sayAge();// var instance2=new SubType("Jack",28);
alert(instance2.colors);//"red","blue","green"
instance2.sayName();//"Jack"
instance2.sayAge();//
4.寄生组合式继承
寄生组合式继承,解决了组合继承中,两次调用超类型构造函数的问题
function object(o)
{
function F(){}
F.prototype=o;
return new F();
}
function inheritPrototype(subType,superType)
{
var prototype =object(superType.prototype);
prototype.constructor=superType;//原书是prototype.constructor=subType,看书时认为这里应该是superType
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
SuperType.call(this,name);
this.age=age;
}
inheritPrototype(SubType,SuperType);
SubType.prototype.sayAge=function(){
alert(this.age);
}
var instance1=new SubType("Jim",29);
instance1.colors.push("black");
alert(instance1.colors);//"red","blue","green","black"
instance1.sayName();//"Jim"
instance1.sayAge();// var instance2=new SubType("Jack",28);
alert(instance2.colors);//"red","blue","green"
instance2.sayName();//"Jack"
instance2.sayAge();//
《Javascript高级程序设计》读书笔记之继承的更多相关文章
- javascript高级程序设计读书笔记-事件(一)
读书笔记,写的很乱 事件处理程序 事件处理程序分为三种: 1.html事件2. DOM0级,3,DOM2级别 没有DOM1 同样的事件 DOM0会顶掉html事件 因为他们都是属性 而 ...
- 《JavaScript高级程序设计》笔记——关于继承
继承在JavaScript中是一种“奇葩”的存在,因为其本身并没有类(class)的概念(ES5),所以只能用其他方式(原型链.构造函数.对象实例)来模拟继承的行为.既然是模拟,那就应该是想办法实现继 ...
- javascript高级程序设计读书笔记
第2章 在html中使用javascript 一般都会把js引用文件放在</body>前面,而不是放在<head>里, 目的是最后读取js文件以提高网页载入速度. 引用js文 ...
- Javascript高级程序设计读书笔记(第六章)
第6章 面向对象的程序设计 6.2 创建对象 创建某个类的实例,必须使用new操作符调用构造函数会经历以下四个步骤: 创建一个新对象: 将构造函数的作用域赋给新对象: 执行构造函数中的代码: 返回新 ...
- JavaScript高级程序设计-读书笔记(7)
第22章 高级技巧 1.高级函数 (1)安全的类型检测 在任何值上调用Object原生的toString()方法,都会返回一个[object NativeConstructorName]格式的字符串. ...
- JavaScript高级程序设计-读书笔记(3)
第8章 BOM 1.window对象 (1)全局作用域 BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象既是通过JavaScript访问浏览器窗口的一个接口,又是E ...
- JavaScript高级程序设计-读书笔记(2)
第6章 面向对象的程序设计 创建对象 1.最简单方式创建Object的实例,如 var person = new Object(); person.name = “Greg”; person.age ...
- JavaScript高级程序设计-读书笔记(1)
第1章 JavaScript简介 JavaScript是一种专为与网页交互而设计的脚本语言,由下列三个不同的部分组成: l ECMAScript:提供核心语言功能: l 文 ...
- javascript高级程序设计读书笔记----引用类型
Array类型. ECMAScript数组的每一项可以保存任何类型的数据. 数组大小是可以动态调整的. 创建数组第一种基本方式方式: 使用Array构造函数 var colors = new ...
- JavaScript高级程序设计 读书笔记
第一章 JavaScript 简介 第二章 Html中使用JavaScript 第三章 基本概念 第四章 变量,作用域,内存 第五章 引用类型 第六章 面向对象 第七章 函数表达式 第八章 BOM 第 ...
随机推荐
- ZigBee研究之旅(一)
*********************************************************************** 以下有引用webee公司的文档的内容,版权属于webee ...
- leetcode Sum Root to Leaf Numbers(所有路径之和)
转载请注明来自souldak,微博:@evagle 观察题目给的返回值类型是int,可以断定这棵树的高度不会超过10,所以数据量其实是非常小的.那就直接dfs遍历这棵树,然后到叶子节点的时候将值加到最 ...
- Html网页表格结构化标记的应用
在讲网页表格的结构化标记之前,还是先看几幅图片. Html表格的结构化 所谓的结构化,正如上述第一副图所看到的,就是把我们的表格划分为三种:表头.表体.表尾.从而当我们在改动表体部分的时候,不会影响到 ...
- Windows 编程之 对话框总结
关于对话框 1 对话框种类 对话框也是一种资源,Windows中对话框分为模态的和非模态的,以及Windows系统中已经定义好的那些通用对话框,比方打开文件,目录,调色板,字符串查找等. 2 模态对话 ...
- 【读书笔记】《未来闪影》罗伯特·J·索耶
真是一本引人入胜的书! 看了不到一半,就有一种置身其中的感觉,要是我也能看到自己二十年后的生活,哪怕只有1分43秒,该是一件多么奇妙的事情.但忧虑也随之而来,如果二十年后我没有成为现在想成为的人,现在 ...
- CSS——inline-block属性
Inline-block 是元素 display属性的一个值 .这个名字的由来是因为,可以简单的解释为inline+block :display设置这个值的元素,兼具行内元素( inline elem ...
- apk应用的反编译和源代码的生成
对于反编译一直持有无所谓有或无的态度.经过昨天一下午的尝试,也有了点心得和体会: 先给大家看看编译的过程和我们反编译的过程概图吧: 例如以下是反编译工具的根文件夹结构: 三个目录也实际上是下面三个步骤 ...
- ANDROID L——Material Design综合应用(Demo)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Material Design: Material Design是Google推出的一个全 ...
- VC++ 视频播放器 图文步骤记录
1.安装DirectShow9.0 SDK DirectShow9 SDK下载链接http://download.csdn.net/detail/jindou910101/5591169 2.运行Di ...
- Android获得Manifest在<meta-data>元件的值
前段时间攻略完成游戏开发项目.其中用于包装散装. 目前市场上的网络不提交.但是,通过设置Manifest中的Meta_data>去获得相关參数,游戏ID号改变.游戏ID改变,然后游戏内容就改变. ...