class类的由来
ES6中的class
类中的大部分功能,其实在ES5中是可以实现的,而新增class
类就是让对象原型的写法在原来基础上变清晰了,从逻辑上说更加合理,成为一个整体,同时,更像是面向对象的编程语法。所以可以将class
类看作是一个语法糖。
class Person{
constructor(name, age){
this.name = name;
this.age = age;
}
girl(){ //<==> Person.prototype.girl
console.log('姓名:', this.name);
console.log('芳龄:', this.age);
}
}
const person = new Person('yaya', 18);
console.log(person);
person.girl();
上例中,在类实例上调用方法,实际上就是调用原型上的方法。其实类本身指向构造函数,所有方法定义在prototype
上,可认为是构造函数的另一种写法
注意点
- 类的方法都是定义在
prototype
对象上的,所以类中新添加的方法,可以添加在prototype
对象上 - 每个类都有
constructor
方法,若没有被定义,会默认添加一个空的constructor
- 类的声明不会被提升,和
let
、const
一样,会有暂时性死区 - 类的所有代码全都是在严格模式下执行的
- 类的内部所有定义的方法都是不可枚举的
for (const p in person){
console.log(p)
}
//name
//age
- 类当中的所有方法都不能当做构造函数直接使用
const a = new person.girl();//TypeError: person.girl is not a constructor
- 类的构造器必须要使用
new
调用
const person = Person('yaya', 18);//无new就直接报错
//TypeError: Class constructor Person cannot be invoked without 'new'
- 类不存在变量提升
getter(取值函数)、setter(存值函数)
getter
取值的时候必须走进来 get
setter
设置值得之后必须走进来 set
get
和set
对某个属性设置存值函数和取值函数,拦截该属性的存取行为
get
、 set
控制的属性不在原型上
const massage = 'print';
const name = 'name1';
class Person{
constructor(names, age, sex, hobby){
this[name] = names;
this.age = age;
this.sex = sex;
this.hobby = hobby;
}
get age() {
return this._age + '岁';
}
set age(age) {
if(typeof age !== 'number'){
throw new TypeError('age must a number')
}
if(age < 0){
age = 0
} else if (age > 130) {
age = 130
}
this._age = age;
}
[massage](){
console.log('姓名:', this[name])
console.log('年龄:', this.age)
console.log('性别:', this.sex)
console.log('爱好:', this.hobby)
}
}
const person = new Person("呀呀",12,"女","sleep");
console.log(person)
person[massage]()
静态方法
在一个定义的方法前加static
,表示类中定义的方法不会被继承,可以直接通过类调用。
class Person{
constructor(name, age){
this.name = name;
}
static age = 18;
}
const person = new Person('yaya', 18);
console.log(person);
console.log(person.age)
console.log(Person.age)