【读书笔记】读《JavaScript模式》 - 函数复用模式之类式继承模式
实现类式继承的目标是通过构造函数Child()获取来自于另外一个构造函数Parent()的属性,从而创建对象。
1.类式继承模式#1 —— 默认方式(原型指向父函数实例)
function Parent(name) {
this.name = name || 'king';
}
Parent.prototype.say = function () {
return this.name;
};
function Child(name) {
this.name = name;
}
function inherit(C, P) {
/**
* 1>该继承模式同时继承了两个对象的属性,即添加到this的属性以及原型属性。
* 在绝大多数的时候,并不需要这些自身的属性,因为它们很可能是指向一个特定的实例,而不是复用。
* 但是我们可以提供覆盖属性的方式进行实例化更新。
* 2>对于构造函数的一般经验法则是:应该将可服用的成员添加到原型中。
*/
C.prototype = new P();
}
inherit(Child, Parent);
var child = new Child('kingChild');
console.log(child.say()); //king
2.类式继承模式#2 —— 借用构造函数
function Parent(name) {
this.name = name || 'king';
}
Parent.prototype.say = function () {
return this.name;
};
function Child(name) {
/**
* 1>优点:可以获得父对象自身成员的真实副本,不会存在子对象意外覆盖父对象属性的风险。
* 2>缺点:无法从原型中继承任何东西 ,它并不会为每个实例重新创建原型。
*/
Parent.apply(this, arguments);
}
var child = new Child('kingChild');
console.log(child.say()); //Object #<Child> has no method 'say'
3.类式继承模式#3 —— 借用和设置原型(调用了两次父构造)
function Parent(name) {
this.name = name || 'king';
}
Parent.prototype.say = function () {
return this.name;
};
function Child(name) {
//1>先借用构造函数
Parent.apply(this, arguments);
}
//2>设置子构造函数的原型使其指向父构造函数创建的新实例
Child.prototype = new Parent();
var child = new Child('kingChild');
console.log(child.say()); //kingChild
4.类式继承模式#4 —— 共享原型
function Parent(name) {
this.name = name || 'king';
}
Parent.prototype.say = function () {
return this.name;
};
function Child(name) {
this.name = name;
}
/**
* 所以的对象实例实际上都共享了同一个原型。但是,这同时也是一个缺点,
* 因为如果在继承链下方的某处存在一个子对象或者孙子对象修改了原型,它将会影响到所有的父对象和祖先对象。
*/
function inherit(C, P) {
C.prototype = P.prototype;
}
inherit(Child, Parent);
var child = new Child('kingChild');
console.log(child.say()); //kingChild
5.类式继承模式#5 —— 临时构造函数
function Parent(name) {
this.name = name || 'king';
}
Parent.prototype.say = function () {
return this.name;
};
function Child(name) {}
/**
* 这里的子对象仅仅继承了父对象的原型中的属性,这种方式是可取的,因为原型正是放置可复用功能的位置。
* 在这种模式中,父构造函数添加到this中的任何成员都不会被继承。
*/
function inherit(C, P) {
var F = function () {};
F.prototype = P.prototype;
C.prototype = new F();
}
inherit(Child, Parent);
var child = new Child('kingChild');
console.log(child.name); //undefined
console.log(child.say); //function () {...}
类式继承模式 —— 总结
var inherit = (function () {
/**
* 应用闭包使得在每次需要继承时都创建临时(代理)构造函数。
*/
var F = function () {};
return function (C, P) {
F.prototype = P.prototype;
C.prototype = new F();
/**
* uber属性是指向超类的指针(不使用super仅仅是因为它是关键字),
* 这就像在其他编程语言中访问超类一样,这可以偶尔排上用场。
*/
C.uber = P.prototype;
/**
* 充值构造函数指针
* 如果不充值该构造函数指针,那么所有子对象将会报告Parent()是它们的构造函数,这是没有任何用处的。
* 重置constructor属性使其指向期望的构造函数且不会影响其功能,这是由于该属性主要是用于提供对象的信息。
*/
C.prototype.constructor = C;
}
})();
源自《JavaScript模式》
【读书笔记】读《JavaScript模式》 - 函数复用模式之类式继承模式的更多相关文章
- 《JavaScript 模式》读书笔记(6)— 代码复用模式2
上一篇讲了最简单的代码复用模式,也是最基础的,我们普遍知道的继承模式,但是这种继承模式却有不少缺点,我们下面再看看其它可以实现继承的模式. 四.类式继承模式#2——借用构造函数 本模式解决了从子构造函 ...
- 《JavaScript 模式》读书笔记(6)— 代码复用模式3
我们之前聊了聊基本的继承的概念,也聊了很多在JavaScript中模拟类的方法.这篇文章,我们主要来学习一下现代继承的一些方法. 九.原型继承 下面我们开始讨论一种称之为原型继承(prototype ...
- 精读JavaScript模式(八),JS类式继承
一.前言 这篇开始主要介绍代码复用模式(原书中的第六章),任何一位有理想的开发者都不愿意将同样的逻辑代码重写多次,复用也是提升自己开发能力中重要的一环,所以本篇也将从“继承”开始,聊聊开发中的各种代码 ...
- javascript类式继承模式#4——共享原型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript类式继承模式#3——借用和设置原型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript类式继承模式#2——借用构造函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript类式继承模式#1——默认模式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js类式继承模式学习心得
最近在学习<JavaScript模式>,感觉里面的5种继承模式写的很好,值得和大家分享. 类式继承模式#1--原型继承 方法 让子函数的原型来继承父函数实例出来的对象 <script ...
- 《JavaScript 模式》读书笔记(4)— 函数5
这一篇是函数部分的最后一篇.我们来聊聊Curry化. 十.Curry 这部分我们主要讨论Curry化和部分函数应用的内容.但是在深入讨论之前,我们需要先了解一下函数应用的含义. 函数应用 在一些纯粹的 ...
随机推荐
- [IOS Block和delegate的对比]
原文:http://blog.sina.com.cn/s/blog_9e8867eb0102uykn.html 这篇文章建议和前一篇一起看, 另外先弄清楚IOS的block是神马东东. 委托和bloc ...
- 详细解读MySQL中的权限
一.前言 很多文章中会说,数据库的权限按最小权限为原则,这句话本身没有错,但是却是一句空话.因为最小权限,这个东西太抽象,很多时候你并弄不清楚具体他需要哪 些权限. 现在很多mysql用着root账户 ...
- C#实现eval 进行四则运算
昨天在园子里看到有园友,写了相同标题的一篇文章.重点讲的是中缀表达式转换为后缀表达式的算法,但是实现的四则运算 有bug.其实我没看之前也不懂什么是 中缀和后缀表达式,之前有用过js eval 内置函 ...
- C# 反射创建对象,包括创建引用外部程序集类的实例
#region 根据对象名成创建对象 /// <summary> /// 根据对象名成创建对象 /// </summary> /// <param name=" ...
- iOS-Auto property synthesis will not synthesize property 'delegate'; it will be implemented by its super
今天在XCode6.3上面重写TabBar的时候,自定义tabBar的代理遇到的一个问题 在重写tabBar的代理的时候遇到了一个警告. 解决方法: 在.m文件中 警告消失.
- (转)MFC的一些宏的整理 (DECLARE_DYNCREATE/IMPLEMENT_DYNCREATE)
很早看了MFC的一些宏的实现,什么RUNTIME_CLASS, DECLARE_DYNAMIC, DECLARE_DYNCREATE,IMPLEMENT_DYNCREATE, etc,看了就烦,现在整 ...
- NAT/PAT
NAT/PAT 编辑 NAT就是网络地址翻译的英文缩写,在路由器上配置NAT服务,可提供公司内100~200人同时上网的服务.不需要Proxy Server,所有的服务都可顺利使用(除Netmeeti ...
- JavaScript简易缩放程序
一.前言: 上一篇随笔中已经把拖动程序完成了,这篇主要把缩放程序完成,后面合并后可以做成一个图片裁剪的功能 简易缩放程序DEMO:http://jsfiddle.net/UN99R/ 限制缩放程序DE ...
- CSS居中完全解决方案
上次面试面试官问到了,问了个定宽局中和不定宽局中,下来我把所有有关CSS居中都总结了一下 原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 水平居中 行内元素 把行内元素 ...
- php面试题之二——Javascript(基础部分)
二.JavaScript部分 1. JS 表单弹出对话框函数是?获得输入焦点函数是? 弹出对话框函数:alert(), prompt(), confirm() 获得输入焦点函数:focus() 2. ...