只能通过类来调用、
static 关键字（静态方法）
//@H_301_14@车类 @H_301_14@class Car{ @H_301_14@构造函数 constructor(wheel,color,length,width){@H_301_14@接收参数 @H_301_14@给属性赋值,this指向当前实例化的结果 this.wheel=@H_301_14@wheel; @H_301_14@this.color=@H_301_14@color; @H_301_14@this.length=@H_301_14@length; @H_301_14@this.width=@H_301_14@width; @H_301_14@this.speed=0@H_301_14@; } @H_301_14@方法 @H_301_14@ speedUp(){ @H_301_14@this.speed+=1@H_301_14@; } @H_301_14@静态方法 @H_301_14@ static repair(car){ console.log("我要修车，车是："+@H_301_14@car); } } @H_301_14@实例化，类->对象 let c=@H_301_14@new Car(3,"#abcdef",20,40@H_301_14@); Car.repair("我的兰博基尼");@H_301_14@调用静态方法 c.repair("我的兰博基尼");@H_301_14@实例上没有静态方法，无法调用
@H_301_14@; @H_301_14@this.errors=0@H_301_14@自检 @H_301_14@ checker(){ console.log("我要自检"@H_301_14@); @H_301_14@... @H_301_14@if(@H_301_14@this.errors===0@H_301_14@){ console.log("检测完毕，一切正常"@H_301_14@); } } @H_301_14@ static checker(car){ console.log("我要抽查"@H_301_14@); } } @H_301_14@); Car.checker();@H_301_14@调用静态方法 c.checker();@H_301_14@调用普通方法
@H_301_14@构造函数 constructor(){@H_301_14@接收参数 Car.totolCar++;@H_301_14@操作静态属性，用来计算被实例化的次数 @H_301_14@静态属性 Car.totolCar=0@H_301_14@; @H_301_14@new@H_301_14@ Car(); console.log(Car.totolCar);@H_301_14@访问静态属性 @H_301_14@ Car(); @H_301_14@ Car(); Car.checker();@H_301_14@调用普通方法 console.log(Car.totolCar);@H_301_14@再次访问静态属性
静态属性可以用来储存默认配置
@H_301_14@角色类 @H_301_14@class Character{ @H_301_14@构造函数接收参数，实例化时默认会执行 @H_301_14@ constructor(pro){ @H_301_14@this.pro=pro;@H_301_14@职业 @H_301_14@ } } @H_301_14@配置项（静态属性） Character.config=@H_301_14@{ @H_301_14@职业映射表 @H_301_14@ profession:{ "咒术师":1@H_301_14@,"弓箭手":2@H_301_14@ } } let c=@H_301_14@new Character(Character.config.profession["咒术师"]);
@H_301_14@class Person{ @H_301_14@静态方法 @H_301_14@程序员转普通人 @H_301_14@ static format(programmer){ programmer.bf=@H_301_14@true@H_301_14@; programmer.hair=@H_301_14@; } } @H_301_14@程序员类 @H_301_14@class Programmer{ constructor(){ @H_301_14@this.bf=@H_301_14@false;@H_301_14@没有男朋友 @H_301_14@this.hair=@H_301_14@没有头发 @H_301_14@ } } let p=@H_301_14@ Programmer(); console.log(p); Person.format(p);@H_301_14@调用静态方法 console.log(p);
类表达式
@H_301_14@函数表达式 const a=@H_301_14@function@H_301_14@(){ } @H_301_14@函数声明 @H_301_14@ a2(){ } @H_301_14@类的声明 @H_301_14@class Myclass{ } @H_301_14@类表达式 const Myclass2=@H_301_14@class{ constructor(){ console.log("我是鸽手，咕咕咕"@H_301_14@也可以class后面跟个类名 const Myclass3=@H_301_14@class M{ constructor(){ console.log(M===Myclass3);@H_301_14@内部可以访问到 @H_301_14@作用：如果Myclass3修改了类名，内部的代码不需要修改，因为用的是内部的类名 M.a=1@H_301_14@; console.log("我是鸽手，咕咕咕"@H_301_14@); } } @H_301_14@console.log("外部："+M);//报错，外部无法访问到 @H_301_14@new Myclass3();
自执行的类（实际情况基本用不到）
getter 与 setter
首先看看ES5中getter和setter，一般有两种方式
1、在对象字面量中书写get/set方法
const obj=@H_301_14@{ name:""301_14@return @H_301_14@this@H_301_14@.name; },set name(val){ @H_301_14@this.name=@H_301_14@val; } } obj.name;
这种写法会造成栈内存溢出，因此get name()调用后，return name再次触发get name() ，无线循环
const obj=@H_301_14@{ _name:""@H_301_14@._name; },1)">this._name=@H_301_14@val; } } obj.name=222;@H_301_14@调用set name(val) @H_301_14@console.log(obj); console.log(obj.name);@H_301_14@调用get name()
2、Object.defineProperty
@H_301_14@var obj=@H_301_14@ } Object.defineProperty(obj,"age"301_14@ }) console.log(obj); @H_301_14@遍历属性时发现age属性无法被遍历 @H_301_14@for(@H_301_14@var i @H_301_14@in@H_301_14@ obj){ console.log(i); }
遍历属性时发现age没有被遍历，这是因为定义属性时没有添加可被枚举的描述符
添加之后即可被遍历
可以利用此特性为name书写get和set方法
ES6中使用getter和setter
@H_301_14@ES6中getter和setter @H_301_14@class Person{ constructor(){ @H_301_14@this._name=""@H_301_14@ } get name(){ @H_301_14@return `我的名字是： ${ @H_301_14@._name }` } set name(val){ @H_301_14@val } } const p=@H_301_14@ Person(); p.name="cyy";@H_301_14@调用setter console.log(p.name);@H_301_14@调用getter
模拟一个小案例：
@H_301_14@ES6中getter和setter的应用 @H_301_14@class AudioPlayer{ constructor(){ @H_301_14@ 0-暂停 | 1-播放 | 2-加载中 @H_301_14@this._status=0 @H_301_14@this.status=0 @H_301_14@使用setter，默认是0 @H_301_14@.init() } init(){ const audio=@H_301_14@ Audio() audio.src="url"@H_301_14@ audio.canplay=()=>{@H_301_14@如果不使用箭头函数，则this会指向audio；使用后指向当前对象 @H_301_14@ audio.play() @H_301_14@使用setter @H_301_14@this.status=1@H_301_14@ } } get status(){ @H_301_14@._status } set status(val){ const STATUS_MAP=@H_301_14@{ 0:"暂停"301_14@ } document.querySelector("#app .play-btn").innerText=@H_301_14@STATUS_MAP[val] @H_301_14@this._status=@H_301_14@val } } const a=@H_301_14@new AudioPlayer();
@H_301_14@定义一个类，设置默认的年龄为18 @H_301_14@class Age{ constructor(){ @H_301_14@this._age=18@H_301_14@; } get age(){ @H_301_14@._age; } set age(year){ @H_301_14@若是设置的年份不是四位数，则采用默认的年龄18 @H_301_14@if(year.length!==4) @H_301_14@return@H_301_14@this._age=2020-parseInt(year)+1@H_301_14@使用变量接收输入的年份 let year=prompt("请输入出生年份"@H_301_14@) @H_301_14@如果获取到填写的数据 @H_301_14@if (year!=@H_301_14@null && year!=""@H_301_14@) { let a=@H_301_14@ Age(); a.age=@H_301_14@year document.write("今年的年龄是："+@H_301_14@a.age); }
@H_301_14@name 返回类名@H_301_14@ //@H_301_14@不常用 @H_301_14@class Age{} console.log(Age.name) @H_301_14@类的表达式 const Age2=@H_301_14@class{} console.log(Age2.name) @H_301_14@类的表达式（存在内部类名），则返回内部类名 const Age3=@H_301_14@class A{} console.log(Age3.name)
@H_301_14@new.target 指向new关键字后面的类@H_301_14@不能直接访问，必须在类或者类的构造函数中才能访问 @H_301_14@console.log(new.target)//报错 @H_301_14@ class Car{ constructor(){ console.log(@H_301_14@.target) } } @H_301_14@new Car()
new.target 作用
语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语
指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。
通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。
@H_301_14@语法糖：ES5中模拟类的另一种写法（即下面这种代码的语法糖） @H_301_14@ Car(){ @H_301_14@属性 @H_301_14@... } @H_301_14@方法 Car.prototype.xxx=@H_301_14@(){ }
普通的函数也可以使用new.target
@H_301_14@ fn(){ console.log(@H_301_14@.target) } fn()@H_301_14@返回new关键字后面的，如果没有就是undefined @H_301_14@new fn()
@H_301_14@ Fn(){ @H_301_14@new.target!==@H_301_14@Fn){ @H_301_14@throw("必须使用new关键字调用"@H_301_14@) } } Fn()@H_301_14@new Fn()
也可以使用instanceof实现相同效果
let Fnn=@H_301_14@class Fn{ constructor(){ @H_301_14@this.name="cyy"@H_301_14@ } } let f=@H_301_14@ Fnn() console.log(f.name)@H_301_14@18 console.log(Fnn.name)@H_301_14@Fn
在ES5中模拟类
@H_301_14@ES5中构造函数跟函数一样@H_301_14@只是调用时添加了new关键字，就会被当做构造函数@H_301_14@如果没有返回值，就会返回对象 @H_301_14@ Person(name,age){ @H_301_14@name; @H_301_14@this.age=@H_301_14@age; } console.log(@H_301_14@new Person("cyy",18));
用new关键字为什么会返回对象
@H_301_14@用new关键字为什么会返回对象@H_301_14@1、创建一个空对象@H_301_14@2、把构造函数的prototype属性作为空对象的原型@H_301_14@3、把this赋值为这个空对象@H_301_14@4、执行函数@H_301_14@5、如果没有返回值，就返回this
@H_301_14@ Constructor(fn,args){ @H_301_14@1、创建一个空对象 @H_301_14@2、把构造函数的prototype属性作为空对象的原型 @H_301_14@var _this=@H_301_14@Object.create(fn.prototype); @H_301_14@3、把this赋值为这个空对象 @H_301_14@4、执行函数 @H_301_14@var res=@H_301_14@fn.apply(_this,args); @H_301_14@5、如果没有返回值，就返回this @H_301_14@return res?@H_301_14@res:_this; } @H_301_14@age; } Person.prototype.say=@H_301_14@(){ console.log("我叫"+@H_301_14@this.name+"，我今年"+@H_301_14@this.age+"岁"@H_301_14@); } @H_301_14@把函数变为构造函数 @H_301_14@var person=Constructor(Person,["cyy",18@H_301_14@]); console.log(person);@H_301_14@返回一个对象
