google closure--继承模块一:goog.inherits()
最近在项目是使用了google closure框架,深入研究了一下源码,先从最简单的继承系统吧。
废话不多说,closure继承模块主要有2个API:
goog.inherits(childCtor,parentCtor);
goog.base(me,opt_methodName,var_args);
先看一下,goog.inherits的源码
goog.inherits = function(childCtor, parentCtor) {
function tempCtor() {};
tempCtor.prototype = parentCtor.prototype;
childCtor.superClass_ = parentCtor.prototype;//给子构造函数添加superClass_属性,指向父构造函数的原型对象
childCtor.prototype = new tempCtor();
childCtor.prototype.constructor = childCtor;
childCtor.base = function(me, methodName, var_args) {//子构造函数绑定base方法,调用父构造函数原型对象方法
// Copying using loop to avoid deop due to passing arguments object to
// function. This is faster in many JS engines as of late 2014.
var args = new Array(arguments.length - 2);
for (var i = 2; i < arguments.length; i++) {
args[i - 2] = arguments[i];
}
return parentCtor.prototype[methodName].apply(me, args);
};
};
代码中有一个小技巧,就是采用利用一个空构造函数,使子构造函数的原型对象只继承父构造函数的原型对象,构造函数内部创建时将不绑定,目的很明确,通过原型链只继承父构造函数的原型对象。

这里还有2个值得注意的地方,一个是:childCtor.superClass_ = parentCtor.prototype,这个相当于在子构造函数上加一个指针superClass_指向父构造函数的原型,这个有什么作用呢?先不用着急,到后面自会揭晓。
第二个指的注意的地方是,为子构造函数添加了一个名为base的方法(不要忘记函数是一等对象哦),可以通过childCtor.base(me,method,arg),me是子构造函数的实例对象,method是想要调取父构造函数原型对象的方法名,arg是传入的参数,这个
有点像通过子构造函数提供函数式调用父构造函数原型对象的方法。
总结一下:
通过goog.inherits()完成了:
1."干净"的继承父构造函数的原型对象.
2."武装“了子构造函数,可以通过childCtor的base方法和所需方法名调用父构造函数原型对象的方法。
3.为子构造函数新加了一个属性,指向父构造函数的原型对象。
疑问:在阅读代码的时候,一定会产生这样的疑问,已经可以通过子构造函数的base访问到父构造函数的相应方法,为什么还要为自构造函数添加一个superClass_的属性指向父构造函数的原型对象呢?不是多次一举了吗?
下一章将揭晓,别忘了还有一个goog.base()呢。
看了这么多有木有同情父构造函数呢,父亲奋斗了那么多年好不容易有了个prototype的小金库,却被儿子无情的压榨,儿子已经享有继承使用权了,还要自己已经有了个小金库弄了个base的钥匙直接用父亲的小金库。。。。。。
可怜天下父母心啊,可是有没有想过,假如父亲不准备为自己创建一个实例,这个prototype小金库有啥用呢,还不如给儿子用。。。。。给孙子用。。。。。
有木有突然恍然大悟,原来千辛万苦,只为一个实例。其实我猜想这段代码的作者的想法是,通过这个简单的api完成,多个构造函数构建一个“超级实例”的想法,可是有什么用处呢~请见下回分晓
google closure--继承模块一:goog.inherits()的更多相关文章
- google closure继承模块三:goog.base()源码分析
直接看代码吧: base: function (me, opt_methodName, var_args) { var caller = arguments.callee.caller; if (ca ...
- google closure--继承模块二:goog.base()demo分析
昨天已经讲到了goog.inherits(),主要负责通过为子构造函数原型对象通过原型链继承父构造函数的原型对象的方法,完成继承.这样继承只完成了原型对象的继承,看看之前的那张图: 是不是感觉父构造函 ...
- Google Closure Compiler 高级模式及更多思考(转)
前言 Google Closure Compiler 是 Google Closure Tools 的一员,在 2009 年底被 Google 释出,早先,有 玉伯 的 Closure Compile ...
- First Adventures in Google Closure -摘自网络
Contents Introduction Background Hello Closure World Dependency Management Making an AJAX call with ...
- 主流JavaScript框架(Dojo、Google Closure、jQuery、Prototype、Mootools和YUI)的分析和对比
本文主要选取了目前比较流行的JavaScript框架Dojo.Google Closure.jQuery.Prototype.Mootools和YUI进行对比,主要是根据网上的资料整理而成,希望可以供 ...
- 使用Google Closure Compiler高级压缩Javascript代码注意的几个地方
介绍 GCC(Google Closure Compiler)是由谷歌发布的Js代码压缩编译工具.它可以做到分析Js的代码,移除不需要的代码(dead code),并且去重写它,最后再进行压缩. 三种 ...
- Google Closure Compiler高级压缩混淆Javascript代码
一.背景 前端开发中,特别是移动端,Javascript代码压缩已经成为上线必备条件. 如今主流的Js代码压缩工具主要有: 1)Uglify http://lisperator.net/uglifyj ...
- JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
网上搜索了,目前主流的Js代码压缩工具主要有Uglify.YUI Compressor.Google Closure Compiler,简单试用了UglifyJS 和Google Closure Co ...
- 使用Google Closure Compiler全力压缩代码(转)
JavaScript压缩代码的重要性不言而喻,如今的压缩工具也有不少,例如YUI Compressor,Google Closure Compiler,以及现在比较红火的UglifyJS.Uglify ...
随机推荐
- left和offsetLeft
left: 1.当该对象的定位position为absolute时left是相对于拥有定位属性(position的值为默认值"static"时除外)的父级对象的左边距. 例1:当父 ...
- HTML meta锚点跳转 小tips
小tips meta锚点跳转 http://www.zhangxinxu.com/wordpress/2015/03/meta-http-equiv-refresh-content/
- ES6 对象增强和结构赋值
The enhanced Object literals: ES6 has added some new syntax-based extensions to {} object literal fo ...
- antd 学习
1,react中文文档http://reactjs.cn/react/docs/thinking-in-react-zh-CN.html 2,antd文档 https://ant.design/doc ...
- 浅谈 原生javaScript&&react 实现全局触摸按钮(附带对addeventlistener的了解)
1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...
- 初识Polymer框架
什么是polymer? polymer由谷歌的Palm webOS团队打造,并在2013 Google I/O大会上推出,旨在实现Web Components,用最少的代码,解除框架间的限制的UI 框 ...
- Head First 设计模式-- 总结
模式汇总:装饰者 :包装一个对象以得到新的行为状态 :封装了基于状态的行为,并使用委托在行为之间切换迭代器 :在对象的结合中游走,而不暴露集合的实现外观 :简化一群类的接口策略 :封装可以 ...
- jQuery Mobile学习日记之HelloWorld
这里是本人学习jQuery Mobile的过程,主要用于记录,过程中有不对的地方或不严谨的地方,欢予以指出纠正,非常感谢! 1.首先是下载安装以下文件: [Opera Mobile Emulator] ...
- 面试中常用的__proto__,prototype和原型链,你都了解了吗?
上一篇随笔主要讲了变量提升的问题,今天我们来讲讲很多前端er在初期很长一段时间内都没有完全搞明白的原型链和构造函数. 1,什么是构造函数 那么要讲到构造函数,必须要有一个函数,所以我们建立一个函数 f ...
- onthink 数据库连接配置
define('UC_DB_DSN', 'mysql://root:@127.0.0.1:3306/app'); // 数据库连接,使用Model方式调用API必须配置此项 /* 数据库配置 */ ' ...