ES6创建对象的方法,可以看作语法糖,它的本质是函数。让对象原型的写法更清晰,更加像面向对象的语法。
Class与ES5构造函数比较
- class原型的属性不可枚举,ES5构造函数的原型属性可以枚举
- class必须使用new调用(否则报错), ES5的构造函数可以以普通函数的形式调用
- class不存在变量提升,ES5的构造函数存在变量提升。
Class结构
-
constructor(){}
构造函数 - 原型方法
class Person{
//构造函数
constructor(name,age){
this.name = name
this.age = age
}
//原型上方法
sayName(){
console.log(this.name)
}
}
一些特性
- this
- 私有方法
- 私有属性
- 静态方法/实例方法
- 静态属性/实例属性
this
类的方法内部如果有this,则默认指向类的实例对象(但如果把方法拿出来单独用,容易报错)
常用以下做法:
- 在构造函数中为方法绑定this
this.sayName = this.sayName.bind(this)
- 使用箭头函数
- Proxy
私有方法
- 在方法名加_
- 把方法移到模块外面,然后在构造函数里面绑定this
- symbol
class Person {
constructor(name,friends){
this.name = name
this.friends=friends
sayFriends.call(this,friends)
}
//私有方法(第1种写法)
_sayName(){
console.log(this.name)
}
}
// 私有方法(第2种写法)
function sayFriends(friends) {
this.a= friends
}
私有变量
ES6没有实现私有变量,提案是在属性前面加#
静态方法
是类名直接调用的方法,实例不能调用,在方法前面加static
关键字
class Person {
constructor(name,friends){
this.name = name
this.friends=friends
sayFriends.call(this,friends)
}
//静态方法
static sayHello(){
console.log('hello')
console.log(this.name)
}
}
//调用
Person.sayHello
静态属性
类名.属性名
实例方法
定义在构造函数以及原型上的方法,是给实例调用的方法
实例属性
1)直接在构造函数里面定义的属性
2)用等式写入类的实例中的属性