向ES6靠齐的Class.js
写在前面
在2008年的时候,John Resig写了一 Class.js,使用的方式如下:
var Person = Class.extend({
init: function(isDancing){
this.dancing = isDancing;
},
dance: function(){
return this.dancing;
}
});
var Ninja = Person.extend({
init: function(){
this._super( false );
},
dance: function(){
// Call the inherited version of dance()
return this._super();
},
swingSword: function(){
return true;
}
});
init为构造函数,通过this._super()访问父类同名方法。
这种看上去很酷很方便的继承方式,居然有一个致命的缺陷。那就是:
当父类A有一个方法a,子类B也有一个方法a的时候,仅仅只有子类B中的方法a才能访问父类A中的方法a,子类B中的其他方法从此就无法访问到父类A中的方法a。虽然这种场景很少,但是不完美啊不完美!!
所以就有了今天向ES6看齐的Class.js。
ES6 class
先来看看ES6中的class继承:
Class之间可以通过extends关键字,实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。
class ColorPoint extends Point {}
上面代码定义了一个ColorPoint类,该类通过extends关键字,继承了Point类的所有属性和方法。但是由于没有部署任何代码,所以这两个类完全一样,等于复制了一个Point类。下面,我们在ColorPoint内部加上代码。
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 等同于parent.constructor(x, y)
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // 等同于parent.toString()
}
}
上面代码中,constructor方法和toString方法之中,都出现了super关键字,它指代父类的实例(即父类的this对象)。
上面来自ruanyifeng的es6入门:http://es6.ruanyifeng.com/#docs/class
Class.js
下面是向ES6靠齐的Class.js
//所有类的基类
var Class = function () { };
//基类增加一个extend方法
Class.extend = function (prop) {
var prototype = Object.create(this.prototype);
//把要扩展的属性复制到prototype变量上
for (var name in prop) {
//下面代码是让ctor里可以直接访问使用this._super访问父类构造函数,除了ctor的其他方法,this._super都是访问父类的实例
prototype[name] = prop[name];
}
//假的构造函数
function Class() {
//执行真正的ctor构造函数
this.ctor.apply(this, arguments);
}
Class.prototype = prototype;
Class.prototype._super = Object.create(this.prototype);
Class.prototype.constructor = Class;
//任何Class.extend的返回对象都将具备extend方法
Class.extend = arguments.callee;
return Class;
};
不多说。看注释...
所以方法(包括构造函数ctor)都是通过 this._super.方法名 去访问父类方法,
如果自身没有定义父类同名的方法,也可以直接通过 this.方法名 去访问父类的方法。
欢迎使用,玩得愉快。
向ES6靠齐的Class.js的更多相关文章
- ES6,ES2105核心功能一览,js新特性详解
ES6,ES2105核心功能一览,js新特性详解 过去几年 JavaScript 发生了很大的变化.ES6(ECMAScript 6.ES2105)是 JavaScript 语言的新标准,2015 年 ...
- [Node.js] Using ES6 and beyond with Node.js
If you're used to using all the latest ES6+ hotness on the front end via Babel, working in Node.js c ...
- KoaHub.js:使用ES6/7特性开发Node.js框架(2)
介绍 KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Function, Class, Async ...
- KoaHub.js:使用ES6/7特性开发Node.js框架
KoaHub.js -- 基于 Koa.js 平台的 Node.js web 快速开发框架.可以直接在项目里使用 ES6/7(Generator Function, Class, Async & ...
- ES6 常用总结(前端开发js技术进阶提升总结)
一.变量声明const和let 在ES6之前,我们都是用var关键字声明变量.无论声明在何处,都会被视为声明在函数的最顶部(不在函数的最顶部就在全局作用域的最顶部).这就是函数变量提升例如: 不用关心 ...
- AlloyRenderingEngine继承
写在前面 不读文章,只对代码感兴趣可以直接跳转到这里 https://github.com/AlloyTeam/AlloyGameEngine然后star一下,多谢支持:). 前几天发了篇向ES6靠齐 ...
- [Node.js] Testing ES6 Promises in Node.js using Mocha and Chai
Writing great ES6 style Promises for Node.js is only half the battle. Your great modules must includ ...
- 让Node.js支持ES6的语法
使用命令,全局安装es-checker: cnpm install -g es-checker 安装好之后,执行以下命令来查看Node.js对ES6的支持情况. es-checker 可以从输出中查看 ...
- Webpack+React+ES6开发模式入门指南
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
随机推荐
- .NET平台开源项目速览(6)FluentValidation验证组件介绍与入门(一)
在文章:这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑)中,给大家初步介绍了一下FluentValidation验证组件.那里只是概述了一下,并没有对其使用和强大功能做深入研究 ...
- Util应用程序框架公共操作类(九):Lambda表达式扩展
上一篇对Lambda表达式公共操作类进行了一些增强,本篇使用扩展方法对Lambda表达式进行扩展. 修改Util项目的Extensions.Expression.cs文件,代码如下. using Sy ...
- Java 8新特性-5 内建函数式接口
在之前的一片博文 Lambda 表达式,提到过Java 8提供的函数式接口.在此文中,将介绍一下Java 8四个最基本的函数式接口 对于方法的引用,严格来讲都需要定义一个接口.不管我们如何操作实际上有 ...
- Rust初步(一):介绍
最近在研究Rust这个新的语言.那么Rust是什么呢? Rust是一个注重安全与速度的现代系统编程语言,通过在没有垃圾回收的情况下保证内存安全来实现它的目标,这使它成为一个在很多其它语言不适合的用例中 ...
- spring笔记--事务管理之声明式事务
事务简介: 事务管理是企业级应用开发中必不可少的技术,主要用来确保数据的完整性和一致性, 事务:就是一系列动作,它们被当作一个独立的工作单元,这些动作要么全部完成,要么全部不起作用. Spring中使 ...
- 解决CHROME中画布中无法显示图片的方法
最终效果图如下 我按照W3SCHOOL里面的方法,代码如下 <!DOCTYPE html> <html> <body> <script type=" ...
- L2/L3/L4 Switch简介
第二层交换机,是根据第二层数据链路层的MAC地址和通过站表选择路由来完成端到端的数据交换的.因为站表的建立与维护是由交换机自动完成,而路由器又是属于第三层设备,其寻址过程是根据IP地址寻址和通过路由表 ...
- 【JUC】JDK1.8源码分析之ThreadPoolExecutor(一)
一.前言 JUC这部分还有线程池这一块没有分析,需要抓紧时间分析,下面开始ThreadPoolExecutor,其是线程池的基础,分析完了这个类会简化之后的分析,线程池可以解决两个不同问题:由于减少了 ...
- jQuery打造智能提示插件
插件根据实际需要在单功能上封装的,实现传入后台数据地址,要保存值的input,前台要传入的参数(过滤条件),来返回下拉提示数据,数据过多可上下滚动选择,选择后显示文本与对应的值,供后台操作,如图: j ...
- AWS CLI使用s3
aws CLI是什么东西,暂且先不去了解,目前的需求是s3. 我在Jenkins上创建一个bucket,然后申请access_key,然后就可以使用s3来存储数据了.也就是说,s3就是一个网盘. 1. ...