es6添加删除class_ES6 class（基本语法+方法）

静态属性与静态方法

1. 不会被类实例所拥有的属性与方法 只是类自身拥有

2. 只能通过类调用

静态方法与普通方法重名，不会冲突

static 关键字(静态方法)

静态属性

类名.属性名 = 属性值;

1、静态属性的声明，应该在类外部，使用“类名.属性名”的方式声明。

2、静态方法的调用，应该直接在类上调用，而不是在类的实例上调用。

静态属性应用举例：

//职业类

class Profession{

}

class Character {

constructor(pfs) {this.pfs =pfs;

}

}//静态属性做配置

Character.config ={

profession: {'咒术师': 1,'弓箭手': 2}

}//创建类的实例

new Character(Character.config.profession['咒术师']);

静态方法应用举例

class Person {//静态方法

static format(programmer) {

programmer.haveGirlFriend= true;

programmer.hair= true;

}

}//程序员类

class Programmer {

constructor() {this.haveGirlFriend = false;this.hair = false;

}

}//将程序员类的实例转为了普通类

const programmer = newProgrammer();

Person.format(programmer);

console.log(programmer);

类的表达式

P只能在类的内部被访问到

就是类的自身

const Person =class P {

constructor() {

P.a= 1;

console.log(P===Person);

console.log('我是鸽手!!咕咕咕!!');

}

}newPerson();//自动执行

const Person1 = newclass P {

constructor() {

P.a= 1;

console.log('我是鸽手!!咕咕咕!!');

}

}();

getter setter

类似于给属性提供钩子

在获取属性值和设置属性值的时候做一些额外的事情

ES5 getter/setter

1. 在对象字面量中书写get/set方法

const obj ={

_name:'',

get name() {

console.log('123');return this._name;

},

set name(val) {this._name =val;

}

}

obj.name= 222;

console.log(obj);

2. Object.defineProperty

var obj ={

_name:''};

Object.defineProperty(obj,'name', {

get:function() {

console.log('正在访问name');return this._name;

},

set:function(val) {

console.log('正在修改name');this._name =val;

}

});

obj.name= 10;

console.log(obj.name);

ES6写法：

class Person {

constructor() {this._name = '';

}

get name() {

console.log('正在访问name');return `我的名字是${ this._name }`;

}

set name(val) {

console.log('正在修改name');this._name =val;

}

}

const person= newPerson();

person.name= '鸽王';

console.log(person.name);

class AudioPlayer {

constructor() {this._status = 0;this.status = 0;this.init();

}

init() {

const audio= newAudio();

audio.src= '....';

audio.οncanplay= () =>{

audio.play();this.status = 1;

}

}

get status() {return this._status;

}

set status(val) {

const STATUS_MAP={0: '暂停',1: '播放',2: '加载中'};//改变按钮中的文案

document.querySelector('#app .play-btn').innerText =STATUS_MAP[val];this._status =val;

}

}

const audio= new AudioPlayer();

name 类名

如果类表达式中，类是有名字的，name是类的名字；类没有名字的话，会是表达式中变量或者常量的名称

class Humen {

}

console.log(Humen.name);//Humen

const Humen=class P{

}

console.log(Humen.name);//P

new.target 指向new关键字后面的类

class Car {

constructor() {

console.log(new.target);

}

}new Car();

语法糖

functionCar() {if (!(this instanceofCar)) {throw Error('必须使用new关键字调用Car');

}

}new Car();

在es5中模拟类：

构造函数

1. 创建一个空的对象

2. 把构造函数的prototype属性 作为空对象的原型

3. this赋值为这个空对象

4. 执行函数

5. 如果函数没有返回值 则返回this[返回之前那个空对象]

functionPerson(name, age) {this.name =name;this.age =age;

}

console.log(new Person('张三', 11));

functionConstructor(fn, args) {//创建的对象以fn作为原型

var _this =Object.create(fn.prototype);//执行函数并传递参数

var res =fn.apply(_this, args);return res ?res : _this;

}functionPerson(name, age) {this.name =name;this.age =age;

}

Person.prototype.say= function() {

console.log('我叫' + this.name);

}var person = Constructor(Person, ['张三', 12]);

console.log(person);