ES6提供了更接近傳統(tǒng)語(yǔ)言的寫法，引入了Class(類)這個(gè)概念簿姨，作為對(duì)象的模板距误，通過(guò)關(guān)鍵字class，可以定義類扁位，基本上准潭，ES6的class可以看成只是一個(gè)語(yǔ)法糖，它的絕大部分功能域仇，ES5都可以做到刑然，新的class寫法只是讓對(duì)象原型的寫法更加清晰， 更像買你想對(duì)象編程的語(yǔ)法而已
知識(shí)點(diǎn)：
(1)class聲明類
(2)constructor定義構(gòu)造函數(shù)初始化
(3)extends繼承父類
(4)super調(diào)用腹肌構(gòu)造方法
(5)static定義靜態(tài)方法和屬性
(6)父類方法可以重寫
案例1：es5構(gòu)造函數(shù)創(chuàng)建對(duì)象
// ES5構(gòu)造函數(shù)實(shí)例化對(duì)象
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
//添加方法
Person.prototype.sayName = function () {
console.log(this.name);
};
//實(shí)例化對(duì)象
let p = new Person("張三", 18, "male");
console.log(p.sayName());
案例2：es6 class創(chuàng)建對(duì)象
// ES6 class 創(chuàng)建對(duì)象
class Person {
//構(gòu)造函數(shù) 名字不能和修改
constructor(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
//添加方法
//方法必須使用該語(yǔ)法 不能使用es5的對(duì)象完整形式
sayHi() {
console.log(`我是${this.name},你好啊`);
}
}
let p = new Person("lisi", 18, "female");
console.log(p.sayHi());
靜態(tài)成員
//靜態(tài)成員
function Person() {}
Person.name = "wangmei";
Person.sayHi = function () {
console.log("Hi");
};
let p = new Person();
console.log(p.name); //undefined 也就是說(shuō)實(shí)例身上是沒(méi)有構(gòu)造函數(shù)對(duì)象身上的屬性的
console.log(p.sayHi()); //Uncaught TypeError: p.sayHi is not a function 說(shuō)明實(shí)例身上沒(méi)有構(gòu)造函數(shù)對(duì)象身上的方法的 實(shí)例和構(gòu)造函數(shù)身上的屬性是不相通的
構(gòu)造函數(shù)身上的屬性是屬于函數(shù)對(duì)象的暇务，實(shí)例對(duì)象不能訪問(wèn)闰集，對(duì)于這樣的屬性，我們稱之為靜態(tài)成員,對(duì)于class而言般卑，被static標(biāo)記的成員是屬于class的，而不是實(shí)例對(duì)象的爽雄，如下所示:
class Person {
//靜態(tài)屬性
static name = "static";
static sayHi() {
console.log("Hi");
}
}
let p = new Person();
console.log(p.name);//undefined
console.log(p.sayHi);//undefined
案例3：es5 實(shí)現(xiàn)繼承
function Person(name, age) {
this.name = name;
this.age = age;
}
//添加方法
Person.prototype.sayHi = function () {
console.log("Hi");
};
// 子類
function Student(name, age, grade, score) {
//通過(guò)call 讓Perosn的this指向Student的實(shí)例對(duì)象 繼承父類的name age屬性
Person.call(this, name, age);
this.grade = grade;
this.score = score;
}
//設(shè)置子級(jí)構(gòu)造函數(shù)的原型
Student.prototype = new Person();
// 將子類的構(gòu)造器還原
Student.prototype.constructor = Student;
//生命子類的方法
Student.prototype.study = function () {
console.log("I love study");
};
//實(shí)例化子類對(duì)象
let s = new Student("danny", 2, 1, 100);
console.log(s);
案例4：es6 類繼承
class Person {
//構(gòu)造方法
constructor(name, age) {
this.name = name;
this.age = age;
}
//父類的方法
sayHi() {
console.log(`Hi,我是${this.name}`);
}
}
// 子類繼承自父類
class Student extends Person {
constructor(name, age, grade, score) {
super(name, age);
this.score = score;
this.grade = grade;
//子類的方法
}
study() {
console.log("I love Studying");
}
eat() {
console.log("I love eating");
}
}
//實(shí)例化子類對(duì)象
let s = new Student("lili", 12, 3, 100);
console.log(s.name); //lili
從這兩個(gè)案例可以看出蝠检，es6的類繼承更簡(jiǎn)單，更切合面向?qū)ο缶幊讨课粒枰⒁獾氖翘舅绻宇愔械姆椒ǜ割愔幸捕x了，那我們是無(wú)法直接調(diào)用父類的同名方法的乘盖，相當(dāng)于重寫了父類的方法
案例5：es6中的get和set
//class中的get和set
class Person {
get name() {
console.log("name屬性被讀取了");
return "11";
}
set name(newVal) {
console.log("name屬性被修改了");
}
}
let s = new Person();
console.log(s.name);
s.name = "你好";
