0x000 概述
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'
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
0x004 调用超类
有时候我们希望在父类的流程基础上添加一些自己的逻辑,这个时候就可以用到调用超类。要注意的是,如果要重写构造函数,必须要在构造函数的第一行调用父类的构造函数super(...params)
,在而在其他地方,则可以通过super.variable_name
或者super.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 is Person'
}
}
class Male extends Person {
constructor(nickname, age){
super(nickname, age)
this.sex='male'
}
getSex(){
return this.sex
}
summary(){
return super.summary()+', and this is Male'
}
}
let male=new Male()
console.log(male.sex) // male
console.log(male.summary) //this is Person, and this is Male
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。