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

2015-10-21 19:28:53 +08:00
 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
7435 次点击
所在节点    JavaScript
61 条回复
timeship
2015-10-21 19:35:06 +08:00
嘿嘿 在这也能碰见你
Gonster
2015-10-21 19:36:52 +08:00
啦啦啦, lz 又放黑魔法啦๛ก(ー̀ωー́ก)
bramblex
2015-10-21 19:43:10 +08:00
@timeship 不然咧~
bramblex
2015-10-21 19:45:36 +08:00
@Gonster 我的黑科技从来都是很逆天的
lizhenda
2015-10-21 19:49:23 +08:00
很厉害的样子,确实不错。
qdwang
2015-10-21 19:49:39 +08:00
这科技 黑在哪里ǖ
domty
2015-10-21 19:53:31 +08:00
只看了第一个 demo
lz 是用 js 实现了单继承和方法重载?
iwege
2015-10-21 19:56:46 +08:00
`(function(a,b){}).length`?
bramblex
2015-10-21 19:59:42 +08:00
@qdwang

/w\ 其实代码里面用了很多黑科技的
bramblex
2015-10-21 20:01:13 +08:00
@lizhenda 必须不错~ /w\
joyee
2015-10-21 20:02:53 +08:00
然而 ES6 已经有 class 和 extend 了……以及更加干净的新语法
icymorn
2015-10-21 20:10:31 +08:00
@joyee 恩, es6 的 class 很惊艳,不过 @bramblex 还有一些更新的特性,比如根据参数长度重载…… 当然,还是要说,函数式语言好,模板匹配才是王道 ( 逃
zrp1994
2015-10-21 20:11:01 +08:00
黑在哪里…
bramblex
2015-10-21 20:13:43 +08:00
@joyee

1 ,没好看也没好用多少。
2 ,不能把类打开添加新方法。
3 ,不能重载。
4 ,没有配套的工具,比如最简单的,假设父类对我是一个黑箱,我需要调用父类的方法怎么办?
5 ,其实我的这个才更符合人们对基于类继承的面向对象的认知。
6 ,如果 JavaScript 要好好做成基于原型的面向对象语言,那么参考 Io lang ,我也没必要折腾这些了。
bramblex
2015-10-21 20:17:42 +08:00
@icymorn JS 在大杂烩这条路上越走越远了
chendeshen
2015-10-21 20:18:45 +08:00
黑科技 @!!!
bramblex
2015-10-21 20:19:15 +08:00
@zrp1994 js 下的方法重载……还不够黑
bramblex
2015-10-21 20:20:59 +08:00
@domty

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

继承出来的对象能够用 instanceof 检验类型
bramblex
2015-10-21 20:21:15 +08:00
@iwege 对的 /w\ 是这样玩的
icymorn
2015-10-21 20:21:25 +08:00
@bramblex es6 可重载,而且对于我来说,看起来和其它语言里面的类声明更相近也更容易理解。
父类是个黑箱…… 这本来就是面向对象的思路吧,不关心黑箱,当然,要是有个逗逼写了个类太难用,只好 hack 回去就没法说了。
es6 目前支持度着急,浏览器上自己实现类的确按照你这样有很多便利。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/229960

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX