【深入JavaScript】一种JS的继承方法
这些天读了John Resig的《Secrets of JavaScript Ninja》，其中讨论到JS中实现继承的方案，非常有趣，自己探索了一下，形成了笔记，放到这里。
这个方案在Resig的博客上也有，虽然代码略微有点不一致，但核心思想是一样的，请戳 这里 。
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
// call a immediate funciton，prevent global namespace from being polluted.
(function(){
// 这个initializing变量用于标识当前是否处于类的初始创建阶段，下面会继续详述
var initializing = false,
// 这是一个技巧性的写法，用于检测当前环境下函数是否能够序列化
// 附一篇讨论函数序列化的文章：http://www.cnblogs.com/ziyunfei/archive/2012/12/04/2799603.html
// superPattern引用一个正则对象，该对象用于验证被验证函数中是否有使用_super方法
superPattern = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; Object.subClass = function(properties){
// 当前对象（父类）的原型对象
var _super = this.prototype; // initializing = true表示当前处于类的初始创建阶段。
// this构造函数里会判断initializing的状态，如果为false则不执行Init方法。
// 事实上这也是非常需要的，因为在这个时候，我们需要的只是一个干净的虚构的构造函数，完全不需要其执行init函数，以避免污染。init方法只有在当前类被实例化的时候才需要被执行，而当前正执行继承行为，不应该执行Init方法。
initializing = true;
// 当前对象（父类）的一个实例对象
var proto = new this();
// 初始创建阶段完成，置initializing为false
initializing = false; // 在properties里提供的属性，作为当前对象（父类）实例的公共属性，供其子类实例共享；
// 在properties里提供的方法，作为当前对象（父类）实例的公共方法，供其子类实例共享。
for(var name in properties){
proto[name] = typeof properties[name] == 'function' && //检测当前提供的是否为函数
typeof _super[name] == 'function' && //检测当前提供的函数名是否已经存在于父类的原型对象中，如果是，则需要下面的操作，以保证父类中的方法不会被覆盖且可以以某种方式被调用，如果否，则直接将该函数赋值为父类实例的方法
superPattern.test(properties[name]) ? f//检测当前提供的函数内是否使用了_super方法，如果有使用_super方法，则需要下面的操作，以保证父类中的方法不会被覆盖且可以以某种方式被调用，如果没有用到_super方法，则直接将该函数赋值为父类实例的方法，即使父类原型中已经拥有同名方法（覆盖） // 使用一个马上执行的函数，返回一个闭包，这样每个闭包引用的都是各自的name和fn。
(function(name, fn){
return function() {
// 首先将执行方法的当前对象（子类的实例化对象）的_super属性保存到tmp变量里。
// 这是非常必要的， 因为this永远指向当前正在被调用的对象。
// 当C继承B，B继承A，而A\B\C均有一个dance方法且B\C的dance方法均使用了this._super来引用各自父类的方法时，下面这句操作就显得非常重要了。它使得在方法调用时，this._super永远指向“当前类”的父类的原型中的同名方法，从而避免this._super被随便改写。
var tmp = this._super; // 然后将父类的原型中的同名方法赋值给this._super，以便子类的实例化对象可以在其执行name方法时通过this._super使用对应的父类原型中已经存在的方法
this._super = _super[name]; // 执行创建子类时提供的函数，并通过arguments传入参数
var ret = fn.apply(this, arguments); // 将tmp里保存的_super属性重新赋值回this._super中
this._super = tmp; // 返回函数的执行结果
return ret;
};
})(name, properties[name]) :
properties[name];
} // 内部定义个名叫Class的类，构造函数内部只有一个操作：执行当前对象中可能存在的init方法
// 这样做的原因：新建一个类（闭包），可以防止很多干扰（详细可对比JS高级设计第三版）
function Class(){
// 如果不是正在实现继承，并且当前类的init方法存在，则执行init方法
// 每当subClass方法执行完毕后，都会返回这个Class构造函数，当用户使用new 方法时，就会执行这里面的操作
// 本质：每次调用subClass都新建一个类（闭包）
if(!initializing && this.init){
// 这是子类的初始化方法，里面可以定义子类的私有属性，公共属性请在上方所述处添加
this.init.apply(this, arguments);
}
} // 重写Class构造函数的prototype，使其不再指向了Class原生的原型对象，而是指向了proto，即当前对象（类）的一个实例
// 本质：一个类的原型是另一个类的实例（继承）
Class.prototype = proto;
// 为什么要重写Class的构造函数？因为这个Class函数，它原来的constructor指向的是Function对象，这里修正它的指向，使其指向自己。
Class.constructor = Class;
// 就是这个操作，使得每次调用subClass都会新生命的Class对象，也拥有subClass方法，可以继续被继承下去
// 本质：使得每次继承的子类都拥有被继承的能力
Class.subClass = arguments.callee;
// 返回这个内部新定义的构造函数（闭包）
return Class;
};
})(); var Person = Object.subClass({
init: function(isDancing) {
this.dancing = isDancing;
},
dance: function(){
console.log('i am a person,i dance.');
return this.dancing;
}
}); var Ninja = Person.subClass({
init:function(){ },
dance: function() {
console.log('i am an Ninja,i dance.');
this._super();
return;
},
swingSword:function(){
return true;
}
}); var Chileung = Ninja.subClass({
dance: function(){
console.log('i am Chileung.i dance.');
this._super();
return;
}
}); var p = new Person();
p.dance(); var n = new Ninja();
n.dance(); var c = new Chileung();
c.dance();
</script>
</body>
</html>
在博客园里也找到了一篇不错的有关这种继承方式的讨论，参见 这里
另外自己以前曾经也思考过Zakas提出的继承方案，文章见 这里
【深入JavaScript】一种JS的继承方法的更多相关文章
- JavaScript几种常见的继承方法
1.call() 方法 call() 方法是与经典的对象冒充方法最相似的方法.它的第一个参数用作 this 的对象.其他参数都直接传递给函数自身 function Huster(name,idNum, ...
- 浅谈6种JS数组遍历方法的区别
本篇文章给大家介绍一下6种JS数组遍历方法:for.foreach.for in.for of.. each. ().each的区别.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
- JavaScript四种数值取整方法
一.Math.trunc() 1.定义 Math.trunc()方法去除数字的小数部分,保留整数部分. 2.语法 Math.trunc(value) 3.示例 console.log(Math.tru ...
- js各继承方法的优缺点
在js中有很多种继承的方法,下面总结这些方法的优缺点. ####1.原型链继承 优点: 非常纯粹的继承关系,实例是子类的实例,也是父类的实例 父类新增原型方法/原型属性,子类都能访问到 简单,易于实现 ...
- javascript四种类型识别的方法
× 目录 [1]typeof [2]instanceof [3]constructor[4]toString 前面的话 javascript有复杂的类型系统,类型识别则是基本的功能.javascrip ...
- JavaScript 五种(构造方式)继承
一.对象冒充 function Parent(username){ this.username = username; this.hello = function(){ alert(this.user ...
- javascript笔记——源生js实现each方法
出处:http://www.lovejavascript.com/#!zone/blog/content.html?id=48 jquery里面有个each方法,将循环操作简化.便捷. 随后es出了个 ...
- 三种JS截取字符串方法
JS提供三个截取字符串的方法,分别是:slice(),substring()和substr(),它们都可以接受一个或两个参数: var stmp = "rcinn.cn"; 使用一 ...
- cocos2d JS 源生js实现each方法
javascript笔记——源生js实现each方法 出处:http://www.lovejavascript.com/#!zone/blog/content.html?id=48 jquery里 ...
随机推荐
- .net图表之ECharts随笔08-bar柱状图
之前一直都是跟着修改demo,感觉用得很吃力,现在结合上配置手册就好很多了,其实说到底就是参数的配置,所以配置手册尤为重要. 当然,这其中还是很多坑,希望可以找到对应的解决方案吧!!! 1. tool ...
- Enabling Remote Errors in SSRS
January 18, 2011 By default the remote errors property in SQL Server Reporting Services is set to fa ...
- django系列8.2--django的中间件流程
Django请求流程图 请求到达中间件之后,先按照正序执行每个注册中间件的process_reques方法,process_request方法返回的值是None,就依次执行,如果返回的值是HttpRe ...
- GO学习笔记 - Go 只有一种循环结构—— for 循环。
一,Go 只有一种循环结构—— for 循环. 官方教程:https://tour.go-zh.org/flowcontrol/1 Go 只有一种循环结构—— for 循环. 基本的 for 循环包含 ...
- Nginx+keepalive 负载均衡
1 规划和准备 两台相同配置的web 用途 IP MASTER 192.168.1.100 BACKUP 192.1681.101 2 安装 两台接入服务器分别安装NginX和keepalived: ...
- 【OCP-12c】CUUG 071题库考试原题及答案解析（24）
24. choose the best answer In the EMPLOYEES table there are 1000 rows and employees are working in t ...
- “全栈2019”Java多线程第八章：放弃执行权yield()方法详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
- iOS没你想的那么安全？
iOS应用由于直接运行在用户的手机上,而不是运行在后台服务器上,所以更容易被攻击. 任何系统都会有木马病毒的产生,不存在绝对的安全,iOS应用由于直接运行在用户的手机上,而不是运行在后台服务器上,所以 ...
- 实例的初始化由JVM装载类的时候进行，保证了线程的安全性
在23种设计模式中,单例是最简单的设计模式,但是也是很常用的设计模式.从单例的五种实现方式中我们可以看到程序员对性能的不懈追求.下面我将分析单例的五种实现方式的优缺点,并对其在多线程环境下的性能进行测 ...
- python基础知识梳理----5dict 字典的应用
内容简介: 1:字典简介 2:字典的增删该查 3:字典嵌套 1: 字典(dict)是python中唯一的一个映射类型.他是以{ }括起来的键值对组成. 在dict中key是唯一的. 在保存的时候, 根 ...