《javascript高级程序设计》第六章 Object Creation VS Inheritance
6.1 理解对象
6.1.1 属性类型
6.1.2 定义多个属性
6.1.3 读取属性的特性
6.2 创建对象
6.2.1 工厂模式
6.2.2 构造函数模式
6.2.3 原型模式
6.2.4 组合使用构造函数模式和原型模式
6.2.5 动态原型模式
6.2.6 寄生构造函数模式
6.2.7 稳妥构造函数模式
6.3 继承
6.3.1 原型链
6.3.2 借用构造函数
6.3.3 组合继承
6.3.4 原型式继承
6.3.5 寄生式继承
6.3.6 寄生组合式继承
2017-09-15补充,看了面试题原型和原型链特点?
6.3.1 原型链
ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。.....
function Mother() {
this.a = true
}
Mother.prototype.getA = function() {
return this.a
}
function Daug() {
this.b = false
}
//继承Mother
Daug.prototype = new Mother()
Daug.prototype.getB = function() { return this.b }
var Helen = new Daug()
Helen.getA() //true
Helen.getB() //false
书上用的是SuperType SubType instance,我觉得我改的容易看出来
但是单独使用原型链继承有个不好的地方,包含引用类型值的原型属性会被实例共享:
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"
只贴两个比较经典的 object creation 和 inheritance (应该都属于原型和构造函数结合的方式)
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
Person.prototype = {
constructor: Person,
sayName : function () {
alert(this.name);
}
};
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Court,Van"
alert(person2.friends); //"Shelby,Court"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true
继承 inheritance
constructor pattern for custom types: methods must be defined inside the constructor,so there's no function reuse.
构造函数模式存在的问题--方法都在构造函数中定义,因此函数复用就无从谈起了。
2017-09-15补充,终于看到原来也看到的地方,但是完全记不得了
所以最佳方式组合继承(combination inheritance)
6.3.3组合继承
...
其背后的思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数的复用,又能够保证每个实例都有它自己的属性
function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name, age){
//inherit properties 继承属性
SuperType.call(this,name);
this.age = age;
}
//inherit methods 继承方法
SubType.prototype = new 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); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //
---------------------------------------------------------------------------------------关于继承的补充20130423
SubType.prototype = new SuperType(); 这句不要也可以实现继承,用call 或者 apply 即可
var superType = function (name){
this.name = name;
this.color = ["red,yellow,blue"];
}
superType.prototype.sayName = function (){alert(this.name)}
var subType = function (name,age,color){
superType.apply(this,[name,color]);
this.age = age;
}
subType.prototype.sayAge = function (){alert(this.age)};
var instance1 = new subType("vioya",30);
instance1.color.push("pink");
alert(instance1.name);
alert(instance1.color);
var instance2 = new subType("maggie",24);
alert(instance2.name);
alert(instance2.color);
《javascript高级程序设计》第六章 Object Creation VS Inheritance的更多相关文章
- JavaScript高级程序设计 第六章 面向对象程序设计
面向对象程序设计 ECMA-262将对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.”严格来讲,这就相当于说对象是一组没有特定顺序的值.对象的每个属性和方法都有一个名字,而每个名字都 ...
- JavaScript高级程序设计-第六章面向对象的程序设计
创建对象主要的两种形式,创建Object实例和创建对象字面量 对象包含属性和方法 数据 .属性有四个特性,特性是为了描述属性行为的,他们是: Configurable(可配置的)是否能删除或是否能修改 ...
- 《JavaScript高级程序设计》——第二章在HTML使用JavaScript
这章讲的是JavaScript在HTML中的使用,也就是<script>元素的属性.书中详细讲了async.defer.src和type四个<script>的属性. 下面是对第 ...
- JavaScript 高级程序设计 第5章引用类型 笔记
第五章 引用类型 一.object类型 1.创建方法: 1.使用new 操作符创建 var person=new object() Person.name=”Nicholasa” Porson.age ...
- 《JavaScript 高级程序设计》第一章:简介
JavaScript 历史 JavaScript的诞生的主要是当时的 netspace 公司谋求为自己的浏览器 Navigator 添加一种脚本语言,以便在本地客户端进行一些行为操作,而这一功能的需求 ...
- javascript高级程序设计第5章,引用类型
object类型: 创建object实列的方式有两种,一种是new()方法,一种是对象字面量表示法: 第一种法方: var obj = new object(); obj.name = 'name' ...
- javascript高级程序设计第四章 变量、作用域和内存问题
变量包含两种,,基本类型和引用类型 基本类型是指一些简单的字段: 引用类型是☞由多个值构成的对象 引用类型的值是保存在内存中的对象,在javascript中是不允许直接访问内存中的位置; 函数的参数 ...
- JavaScript高级程序设计第20章JSON 笔记 (学习笔记)
第二十章 JSON 1.Json 可以表示三种类型的值: 1.简单值: 表示数值:5 表示字符串:“hello wrold”注表示字符串时必须使用双引号 2.对象: {“name”:“mi”,”ag ...
- JavaScript高级程序设计第14章表单脚本 (学习笔记)
第十四章 表单脚本 1.阻止默认表单提交 1.提交表单数据 1.使用type=submit提交按钮 2.使用submit():方法 注意:当用户点击提交按钮时,会触发submit事件,从而在这里我们有 ...
随机推荐
- 判断List、Map、Set是否为空及效率比较
//如果object为null,则设置为defaultValue ObjectUtils.defaultIfNull(object, defaultValue); //判断集合是否为null Li ...
- BZOJ 1565 植物大战僵尸(最大权闭合图)
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1565 题意:植物大战僵尸,一个n*m的格子,每 个格子里有一个植物,每个植物有两个属性: ...
- TCP服务器不回复SYN的问题
个人问题发生环境: 1.TCP服务器是虚拟机,IP地址是192.168.8.12. 2.TCP客户端是宿主机,IP地址是192.168.8.11. 3.从宿主机(192.168.8.11)上启动Soc ...
- ADC驱动器或差分放大器设计指南
作为应用工程师,我们经常遇到各种有关差分输入型高速模数转换器(ADC)的驱动问题.事实上,选择正确的ADC驱动器和配置极具挑战性.为了使鲁棒性ADC电路设计多少容易些,我们汇编了一套通用“路障”及解决 ...
- hdu 1348 (凸包求周长)
链接:http://acm.hdu.edu.cn/showproblem.php?pid=1348 Wall Time Limit: 2000/1000 MS (Java/Others) Mem ...
- hdu 4223 Dynamic Programming?
Dynamic Programming? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Oth ...
- ubuntu 16.04 安装 QQ
需要在Ubuntu 16.04下使用QQ,查找了一下,知乎的办法可行. 参考了:http://www.zhihu.com/question/20176925 与 http://www.zhihu.co ...
- maven2 配置M2_REPO
从eclipse中增加了maven2的插件之后,maven默认的本地库的路径是${user}/.m2/repository/下,一般windows用户的操作系统都安装在C盘,所以这个目录 下的jar包 ...
- Nginx基础知识————生成自签名ca 证书 使nginx 支持https
创建服务器私钥,命令会让你输入一个口令: $ openssl genrsa -des3 -out server.key 1024 创建签名请求的证书(CSR): $ openssl req -new ...
- 前端代码新写法——Zen Coding
是不是还在为html繁琐的标签写法而苦恼? 是不是还在枯燥的写尖括号? Zen Coding的到来将让前端编码不在繁琐.不再拘泥html的尖括号和一堆一堆的标签. 先看看ZenCoding的效果图. ...