2.12. class類
ES6 提供了更接近傳統(tǒng)語言的寫法，引入了 Class（類）這個概念，作為對象的模板。通過 class 關(guān)鍵字，可以定義類。
ES6 的 class 可以看作只是一個語法糖，它的絕大部分功能ES5 都可以做到，新的 class 寫法只是讓對象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法而已。
// ES 5
// 人員 : 相當(dāng)于 構(gòu)造方法
function Person(name, sex){
this.name = name;
this.sex = sex;
}
//添加方法
Person.prototype.sayHi = function(){
console.log("大家好!!");
}
//實例化對象
let wang = new Person('王小二', '男');
wang.sayHi();
console.log(wang);
// ES 6
//class
class Emp{
//構(gòu)造方法 名字不能修改
constructor(name, sex){
this.name = name;
this.sex = sex;
}
//方法必須使用該語法
sayHi(){
console.log("大家好!!");
}
}
let li = new Emp("李小三", '女');
li.sayHi()
console.log(li);
2.12.1.set/get 方法
在name屬性之前添加了get和set關(guān)鍵字，這樣就創(chuàng)建了一個名為name的訪問器屬性。get方法用于獲取該屬性的值，set方法用于設(shè)置新的值。
需要注意的是，使用屬性訪問器時，實際的屬性名會在內(nèi)部使用一個帶下劃線的變量名來存儲。這是一種常見的命名約定，用于區(qū)分屬性訪問器和實際存儲屬性的變量。
class Stu {
constructor(name) {
this._name = name;
}
get name() {
console.log('讀取 name 屬性')
return this._name;
}
set name(newName) {
console.log('修改 name 屬性');
this._name = newName;
}
}
const stu = new Stu('王小二');
console.log(stu.name); // 輸出 "王小二"
stu.name = '李小三';
console.log(stu.name); // 輸出 "李小三"
2.12.2.靜態(tài)
static 屬于 類不屬于 對象
// ES 5
// function Stu(){
//
// }
// 下面定義的屬性方法屬性 Stu , 相當(dāng)于 靜態(tài)的
// name 屬性 , 比較特殊 為 Stu
// Stu.age = 12;
// Stu.sayHello = function(){
// console.log("hello, 我是王小二");
// }
// console.log(Stu.age)
// Stu.sayHello();
// Stu.prototype.sex = '男';
//
// let wang = new Stu();
// // 這些屬性是屬于 Phone 的, 而不是屬于 wang 的
// console.log(wang.name);
// wang.sayHello();
// console.log(wang.sex);
// ES 6
class Stu{
//靜態(tài)屬性
static name = '李小三';
static sayHello(){
console.log("hello, 我是李小三");
}
}
let li = new Stu();
console.log(li.name);
// li.sayHello();
console.log(Stu.name);
Stu.sayHello();
2.12.3.繼承
2.12.3.1.ES 5 構(gòu)造繼承
// ES 5
// 人員 父類
function Person(name, sex){
this.name = name;
this.sex = sex;
}
//添加方法
Person.prototype.sayHi = function(){
console.log("大家好!!");
}
//員工 子類 , 增加了 salary 薪水 屬性
function Employee(name, sex, salary){
// 調(diào)用父類的構(gòu)造函數(shù), 將自己及屬性值 傳入
Person.call(this, name, sex);
this.salary = salary;
}
//設(shè)置子級構(gòu)造函數(shù)的原型
Employee.prototype = new Person;
Employee.prototype.constructor = Employee;
//聲明子類的方法
Employee.prototype.eat = function(){
console.log("去食堂")
}
const wang = new Employee('王小二', '男',6499 );
console.log(wang);
console.log(wang.name);
console.log(wang.sex);
console.log(wang.salary);
wang.sayHi();
wang.eat()
在這段代碼中，Employee 是 Person 的子類。以下是這兩句代碼的含義：
-
Employee.prototype = new Person;這行代碼的作用是將Person構(gòu)造函數(shù)的一個實例賦值給Employee原型對象。通過這樣做，所有Employee類的實例都將繼承Person類的所有方法和屬性（通過原型鏈）。在這里調(diào)用new Person時并沒有傳入?yún)?shù)，因此新創(chuàng)建的Person實例的name和sex屬性將是undefined。不過，在接下來的Employee構(gòu)造函數(shù)內(nèi)部已經(jīng)通過Person.call(this, name, sex)正確地設(shè)置了這些屬性。 -
Employee.prototype.constructor = Employee;在 JavaScript 中，每個構(gòu)造函數(shù)的原型對象都有一個內(nèi)置的constructor屬性，它指向該構(gòu)造函數(shù)本身。但是，當(dāng)執(zhí)行了Employee.prototype = new Person后，Employee原型對象的constructor被修改為指向Person。為了修復(fù)這一問題，并確保Employee的實例能夠正確識別其構(gòu)造函數(shù)，需要手動設(shè)置Employee.prototype.constructor為Employee。這樣做的目的是在后續(xù)可能涉及檢查對象構(gòu)造函數(shù)的場景下（如 instanceof 操作符或.constructor屬性），能正確識別出對象是由哪個構(gòu)造函數(shù)創(chuàng)建的。
2.12.3.2.ES 6 構(gòu)造繼承
// ES 6
class Person {
//構(gòu)造方法
constructor(name, sex){
this.name = name;
this.sex = sex;
}
//父類的成員方法
sayHi(){
console.log("大家好!!");
}
}
class Employee extends Person {
//構(gòu)造方法
constructor(name, sex, salary) {
super(name, sex);// Phone.call(this, brand, price)
this.salary = salary;
}
eat() {
console.log("去食堂")
}
// sayHi(){
// console.log("大家好!!我轉(zhuǎn)正了");
// }
}
const li = new Employee('李小三', '女', 5799 );
console.log(li);
console.log(li.name);
console.log(li.sex);
console.log(li.salary);
li.sayHi();
li.eat()
2.12.4.( ES 11 )私有屬性
通過 在屬性前加 # 來設(shè)置私有的屬性,
在內(nèi)部可以直接使用( 如: info() ),文章來源：http://www.zghlxwxcb.cn/news/detail-832581.html
在外部直接調(diào)用 會報錯 , Uncaught SyntaxError: Private field ‘#age’ must be declared in an enclosing class文章來源地址http://www.zghlxwxcb.cn/news/detail-832581.html
class Person{
//公有屬性
name;
//私有屬性
#age;
#weight;
//構(gòu)造方法
constructor(name, age, weight){
this.name = name;
this.#age = age;
this.#weight = weight;
}
info(){
console.log(this.name);
console.log(this.#age);
console.log(this.#weight);
}
}
//實例化
const girl = new Person('李小三', 18, '45kg');
console.log(girl.name); // 李小三
console.log(girl.#age); // Uncaught SyntaxError: Private field '#age' must be declared in an enclosing class
console.log(girl.#weight); // Uncaught SyntaxError: Private field '#weight' must be declared in an enclosing class
girl.info();
到了這里，關(guān)于ECMAScript 6+ 新特性 ( 二 )的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
