es6
真正的引入的面相对象的类
,以前我们总是通过其他手段来模拟类
这种形式,现在终于有了,我有点开心,又有点难过,因为在我看来,js
并不是所谓的面相对象的语言,反而更偏向函数式,原型继承是他真正的面目。面相对象不过是人们在思考问题时总结出一套有效的、大家都认同的解决问题的思路。在其他语言、各种领域取得成功之后,又将这种思想带入js
中,为的是将已有的经验可以复用到js
,从而更有效的解决js
中的问题。
的确,面相对象是一个很有用的思考模块,在分解真实世界、大型项目的维护上有很大的好处,但是却缺少了函数式的灵巧。曾经想用完全面向对象的方式写一个redux
,却发现无法用这种方式写出compose
这种神奇的东西。
或许是我还没能在面相对象和函数式之间取得一种平衡,以取得面相对象和函数式共同的优点。
0x001 类
普通的类
-
普通的类
class Person{}
-
类表达式
// 匿名类 let Person=class{} // 具名类 let Person=class Person{}
0x001 初始化类和构造函数
实例化类
可以使用new
来调用一个类,从而实例化一个类实例
-
class Person{} new Person() // Person{}
-
构造函数
使用new
实例化一个类实例之后,将会自动调用该类的构造函数constructor
,并且可以传递参数class Person{ constructor(name, age){ console.log(name, age) } } new Person("jack", 23) // 'jack', 23
类变量
类中可以保存一些变量,在类中,可以通过this.variable_name
来访问,在类外,可以通过instance_name.variable_name
只有类实例可以访问他们,并且每个类实例的变量都是属于每个类实例的。class Person { constructor(nickname, age){ this.nickname = nickname this.age = age } } console.log(Person.nickname) // undefined console.log(Person.age) // undefined let person=new Person("jack",23) console.log(person.nickname) // 'jack' console.log(person.age) // 23 let person2=new Person("maria",11) console.log(person2.nickname) // 'maria' console.log(person2.age) // 11
类方法
类方法是定义在类内部的函数,可以在类内部调用:this.function_name(params)
,也可以在实例上调用:instance_name.function_name(params)
class Person{ constructor(nickname, age){ this.nickname = nickname this.age =age } getNickname(){ return this.nickname } getAge(){ return this.age } summary(){ return `${this.nickname}:${this.age}` } } let person=new Person('jack', 23) console.log(person.getNickname()) // ''jack console.log(person.getAge()) // 23 console.log(person.summary()) // 'jack:23'
静态方法
静态方法是可以通过类直接调用的方法,不需要实例化class Person{ static sayHello(){ console.log('hello') } } Person.sayHello() // 'hello'
继承
继承就是将父类所有的方法和都继承下来,包括构造函数
class Person{ constructor(nickname, age){ this.nickname = nickname this.age =age } getNickname(){ return this.nickname } getAge(){ return this.age } summary(){ return 'this is Person' } } class Male extends Person {} let male=new Male('jack',23) console.log(male.nickname) // 'jack' console.log(male.age) // 23 console.log(male.getNickname()) // 'jack' console.log(male.getAge()) // 23 console.log(male.summary()) // 'this is Person'
class Far { constructor(x, y) { this.x = x; this.y = y; } sum() { console.log(this.x + this.y); } } class Jc extends Far { constructor(x, y) { super(x, y); } } new Jc(1, 2).sum();
0x003 重写
有时候我们不希望一个函数的作用和父类一致,比如在上面的栗子中,
male.summary()
返回this is Person
,不符合我们的逾期,我们希望返回this is Male
,这个时候就可以用到重写,只要写一个和父类相同名字和函数就行了,甚至参数个数不一致也不影响class Person{ constructor(nickname, age){ this.nickname = nickname this.age =age } getNickname(){ return this.nickname } getAge(){ return this.age } summary(){ return 'this is Person' } } class Male extends Person { summary(){ return 'this is Male' } } let male=new Male() console.log(male.summary()) // this is Male