还在纠结 JavaScript 的继承？给你们看看什么是黑科技

[bramblex]

猜猜下面的代码你们猜会是什么效果？

var A = Class('A', Object)
  .method('constructor', function(){
    this.name = 'a';
  });

var B = Class('B', A);
B.method('run', function(){
  console.log('run');
});

var C = B.extend('C')
  .method('run', function(a){
    console.log('run a: ', a);
  })
  .method('run', function(a,b){
    console.log('run a, b: ', a, b);
  });

var c = C();
c.run();
c.run(1);
c.run(1,2);

BlxClass

GitHub

https://github.com/bramblex/BlxClass

简介

一个 JavaScript 面对对象的库，让你在 JavaScript 用上靠谱的面对对象特性。

使用

将本项目中的 dist/Class.js 复制到你的项目下

1. 在 nodejs 中使用

var Class = require('path/to/Class.js');
var ClassA = Class('ClassA', Object);

2. 在浏览器中使用

<script src="path/to/Class.js"></script>
<script>
    var ClassA = Class('ClassA', Object);
</script>

API

1. Class( class_name, parent_class)

Class 函数接受两个参数返回一个新类，第一个参数是新类的命名，第二个参数是继承自哪个类。如果并没有继承自别的类，那么直接写 Object 就好了。

var ClassA = Class('ClassA', Object);
var ClassB = Class('ClassB', ClassA);

2. name

类的名字

var ClassA = Class('ClassA', Object);
console.log(ClassA.name) // => ClassA
var ClassB = Class('some name', ClassA);
console.log(ClassB.name) // => some name

3. parent

类的父类

var ClassA = Class('ClassA', Object);
ClassA.parent === Object; // => true
var ClassB = Class('ClassB', ClassA);
ClassB.parent === ClassA; // => true

4. method( method_name, function )

定义方法，方法会被子类继承，并且能够重载。

var ClassA = Class('ClassA', Object)
    .method('constructor', function(){
        // 构造函数
        this.name = 'no name';
    })
    .method('constructor', function(name){
        // 重载构造函数
        this.name = name;
    })
    .method('run', function(){
        // 普通方法
        console.log('run');
    })
    .method('run', function(a,b){
        // 重载上面定义的 run 方法
        console.log('run a, b: ', a, b);
    })
    .method('run', '*', function(){
        // 其他任意参数的情况
        console.log(arguments);
    });

var a = ClassA();
var b = ClassA('Li Lei');
console.log(a.name); // => no name
console.log(b.name); // => Li Lei
a.run(); // => run
a.run(1,2); // => run a, b: 1 2
a.run(4,5,6); // => [4,5,6]
a.run(7,8,9,0,1,2,3); // => [7,8,9,0,1,2,3]

5. classmethod( method_name, function )

定义类方法，类方法不会被子类继承，也不能重载。

var ClassA = Class('ClassA', Object)
    .classmethod('run', function(){
        // 类方法
        console.log('class method run');
    });

ClassA.run(); // => class method run

6. extend( class_name )

继承出新类。

var ClassA = Class('ClassA', Object);

// 下面两种写法是等价的
var ClassB = Class('ClassB', ClassB);
var ClassB = ClassA.extend('ClassB');

7. alias( alias_name , method_name )

给方法取别名

var ClassA = Class('ClassA', Object)
    .method('run', function(){
        // 普通方法
        console.log('run');
    });

ClassA.alias('aliasRun', 'run');

var a = ClassA();
a.run(); // => run
a.aliasRun(); // => run
a.run === a.aliasRun; // => true

8. uper( method_name )

调用父类方法

var ClassA = Class('ClassA', Object)
    .method('run', function(){
        // 普通方法
        console.log('ClassA run');
    });

var ClassB = ClassA.extend('ClassB')
    .method('run', function(){
        ClassB.uper('run').apply(this, arguments);
        console.log('ClassB run');
    });

var ClassC = ClassB.extend('ClassC')
    .method('run', function(){
        ClassC.uper('run').apply(this, arguments);
        console.log('ClassC run');
    });

var c = ClassC();
a.run();
// => ClassA run
// => ClassB run
// => ClassC run

[timeship]

嘿嘿 在这也能碰见你

[Gonster]

啦啦啦， lz 又放黑魔法啦๛ก(ｰ̀ωｰ́ก)

[bramblex]

@timeship 不然咧～

[bramblex]

@Gonster 我的黑科技从来都是很逆天的

[lizhenda]

很厉害的样子，确实不错。

[qdwang]

这科技 黑在哪里ǖ

[domty]

只看了第一个 demo
lz 是用 js 实现了单继承和方法重载？

[iwege]

`(function(a,b){}).length`?

[bramblex]

@qdwang

/w\ 其实代码里面用了很多黑科技的

[bramblex]

@lizhenda 必须不错~ /w\

[joyee]

然而 ES6 已经有 class 和 extend 了……以及更加干净的新语法

[icymorn]

@joyee 恩， es6 的 class 很惊艳，不过 @bramblex 还有一些更新的特性，比如根据参数长度重载…… 当然，还是要说，函数式语言好，模板匹配才是王道 （ 逃

[zrp1994]

黑在哪里…

[bramblex]

@joyee

1 ，没好看也没好用多少。
2 ，不能把类打开添加新方法。
3 ，不能重载。
4 ，没有配套的工具，比如最简单的，假设父类对我是一个黑箱，我需要调用父类的方法怎么办？
5 ，其实我的这个才更符合人们对基于类继承的面向对象的认知。
6 ，如果 JavaScript 要好好做成基于原型的面向对象语言，那么参考 Io lang ，我也没必要折腾这些了。

[bramblex]

@icymorn JS 在大杂烩这条路上越走越远了

[chendeshen]

黑科技 @!!!

[bramblex]

@zrp1994 js 下的方法重载……还不够黑

[bramblex]

@domty

是的，单继承和方法重载。

继承出来的对象能够用 instanceof 检验类型

[bramblex]

@iwege 对的 /w\ 是这样玩的

[icymorn]

@bramblex es6 可重载，而且对于我来说，看起来和其它语言里面的类声明更相近也更容易理解。
父类是个黑箱…… 这本来就是面向对象的思路吧，不关心黑箱，当然，要是有个逗逼写了个类太难用，只好 hack 回去就没法说了。
es6 目前支持度着急，浏览器上自己实现类的确按照你这样有很多便利。

[haibocui]

流弊

[bramblex]

@icymorn 我的目的一向是到哪里都能用 /w\。

[hronro]

这个确实给力！

[iwege]

@bramblex

1 ，没好看也没好用多少。
从 stage 0 开始看起. import 反正我已经吐槽过了。但是 class 绝对是一个好帮手。

2 ，不能把类打开添加新方法。
prototype 还是可以访问的。也可以用子类的方式扩展。还有 es7 的 decorators 草稿标准。


3 ，不能重载。
可以

4 ，没有配套的工具，比如最简单的，假设父类对我是一个黑箱，我需要调用父类的方法怎么办？
if(super.fn){super.fn()}

5 ，其实我的这个才更符合人们对基于类继承的面向对象的认知。
有争议

6 ，如果 JavaScript 要好好做成基于原型的面向对象语言，那么参考 Io lang ，我也没必要折腾这些了。
我觉得是一个方向性错误。

[iwege]

https://gist.github.com/iwege/d77cca95bb1d8c8a41f9

上面是用 stage 0 的标准模仿楼主写的简单的方法。逻辑上可能有副作用，只是证明可行性。

上面实际执行的结果如下：
1
print all {}
print all { '0': 1, '1': 2, '2': 3 }
[Function: fn2]
fn2, print from base
fn2 from Class A

[joyee]

@bramblex 2 3 4 均不成立……原因同 @iwege

1 总归是比现有的不修改语法的其他方法好看些 5 6 他们（ TC 39 ）志不在此 支持度有 transpiler 帮手……

[banri]

@joyee 拜大神

[iamcho]

mark

[bramblex]

@joyee

那还不如造新语言来的靠谱……真的……

[bramblex]

@iwege

支持度欠佳， chrome 上面还硬性要求 strict mode

[bramblex]

@joyee

志不在此那最好，把基于类继承的面向对象忘的干干净净，老老实实看看别人 Io lang 基于原型链继承多正常。

现在这个大杂烩搞得乱七八糟的，还一堆不兼容问题。好歹我这个扔那里都能用

[liangqing]

提醒楼主，函数的 name 属性是个只读属性，所以设置也没用，有的浏览器还会抛异常。

[bramblex]

@liangqing

以前留的坑，忘了改了

[icymorn]

@iwege
第一次接触这种写法，学到了，非常感谢。

[iwege]

@bramblex
这只是一个简单的 demo ，特性上我觉得没有什么，只是觉得语法上你的这种写法很啰嗦而已，部分实现的话新特性也可以支持，比如上面 fn 重复定义的问题，使用我的那个方法也可以简单的解决掉。上面的案例已经修改了。
https://gist.github.com/iwege/d77cca95bb1d8c8a41f9

同时尝试了自定义 class ，估计有点麻烦，但是也不是不可行。 overloadClass 可以支持拿到 class function 本身。

至于所谓的支持度，在有 transpiler 的情况下我向来不关心，我关心的是前端工程化，编码高效化以及问题定位速度。就像习惯了 coffee 或者 om 之后你让我再回去写 es5 的 js ，我是断然不乐意的。我的研究也只要能在 V8 里面跑就 OK 。



@icymorn

我也是第一次尝试用这个特性来做，因为工程化的话这种灵活性可能会是一种麻烦。当然既然用了 stage 0 干脆连`::`的写法也一起尝试用了。不过楼主的特性还不能完全支持，不知道混用两种方法能不能达到完全处理。

[miro]

少用继承...

[HowardMei]

好像很黑科技的样子，比 Typescript 的 Overload 强大，可人家是故意不让用 :)

[fo2w]

对于 lz 这种闲的蛋疼的人我只想说...


已粉...

[joyee]

@bramblex 世界上只有两种语言，没人用的和被人骂的。。。论语言设计， 随便路边拦一个谁都能完爆 js ，又何苦拿它开刀。正是因为用的人太多，才不好丢掉历史包袱啊。

另外你用 transpiler 能有多少兼容性问题，转译出来的代码也就跟人手写这种类的差不多。。。

[adspe]

JavaScript 适用的场景用一般的几种模式的继承已经够了。如果放在一些 scale 比较大的场景会有很多意想不到的后果。

[bramblex]

@joyee

也是哈 /w\， 就是我比较喜欢造轮子

[bramblex]

@adspe

比如捏？什么意想不到的后果？

[bramblex]

@iwege

/w\ 好吧……

[bramblex]

@miro

面向对象语言我不用继承用什么？

难道有 typeclass 给我用嘛……

[coolicer]

好东西，但是很少用继承。

[magicdawn]

看了 xxxScript 源码, 炒鸡反感~没想到 LZ 还拿出说~

[wdhwg001]

还是觉得 Blackscript 法比较好，就是阮一峰提到的所谓 Minimalist Approach …
http://www.gabordemooij.com/blackscript

不得不说.method 有点太丑了。
脑补一个语法的话…
https://gist.github.com/wdhwg001/9f83c9c21754d538886e

大致想了一下可以用 get:function()和 set:function()一类的诸多黑魔法实现…

[bramblex]

@wdhwg001

丑是丑，但是用起来还算顺手。如果要更简洁的语法的话，只能改语言语法本身了。

[bramblex]

@magicdawn

嗯，等你造一个更好用的我就用你的。 OwO

[zythum]

一般吧。这个多态判断不麻烦。
比较难的设计是访问权限 publish private, 和 优雅的 super 的设计 用 apply 的方式却是可用而且实用，但是太丑了了

[bramblex]

@zythum

其实重点不是难不难，判断麻不麻烦，而是好像没什么人想到……

[zythum]

@bramblex 什么没有人想到啊。老早就有了。只是你没有发现而已...

[ggiiss]

请参考 John Resig 大神 08 年的作品 http://ejohn.org/blog/simple-javascript-inheritance/

[catface]

项目描述是“ JavaScript 的面对对象库”

[ianva]

以前到热衷鼓捣这些东西， class 实现过这些，还有 mixin ， attribute ， aop 的功能，不过现在看来，除非整套体系都是自己造的，现在意义没这么大，这个时代已经不是基础工具造轮子的时代了，语言层面的标准化在是重要的，比如之前的 yui 3 的 base ， widget 都很强大，但现在已经不维护了。

[aivier]

这么久了，我还是不知道“面相对象”是个什么。。。

[Justineo]

黑科技黑在哪里……实现了啥独有的功能？根据参数长度重载？随便 Google 一下 JavaScript overloading ，上来就有 John Resig 的这篇：

http://ejohn.org/blog/javascript-method-overloading/ 你自己看看时间吧……

再搜下会发现也有根据参数类型重载的。

还有你给的这些示例代码，命名一会儿全小写，一会儿下划线分隔，一会儿驼峰。还有调用父类方法的那个 `uper` 我猜是 `upper` 拼错了吧，但其实应该是 `super`。

[bramblex]

@Justineo

首先命名规范你喷个毛线？类 开头大写驼峰， 方法开头小写驼峰， 变量小写下划线这个有槽点我没看出来那里有槽点？

其次，我自己什么都没看就实现了跟 John Resig 一样的东西，那你的意思是不是我跟 John Resig 大神一个水平啊？那你有资格喷个毛？

我造一个玩具碍着你事了？无语

[bramblex]

@ggiiss

看这个大神的作品对我没有任何提高……

[kokutou]

@aivier 在 IDE 里面，万物皆可打点，然后出一大堆东西。。。

[Justineo]

@bramblex 这点喷就受不了了，真的是好可爱。你怎么不反驳一下 uper 是什么啊。