ECMAScript 6+ 新特性 ( 二 )-Toy模板网

这篇具有很好参考价值的文章主要介绍了ECMAScript 6+ 新特性 ( 二 )。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

2.12. class类

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。

ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

// ES 5
// 人员 : 相当于 构造方法
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{
    //构造方法 名字不能修改
    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关键字，这样就创建了一个名为name的访问器属性。get方法用于获取该属性的值，set方法用于设置新的值。

需要注意的是，使用属性访问器时，实际的属性名会在内部使用一个带下划线的变量名来存储。这是一种常见的命名约定，用于区分属性访问器和实际存储属性的变量。

 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.静态

static 属于类不属于对象

// ES 5

// function Stu(){
//
// }

// 下面定义的属性方法属性 Stu , 相当于 静态的
// 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{
    //静态属性
    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 构造继承

// ES 5
// 人员 父类
function Person(name, sex){
    this.name = name;
    this.sex = sex;
}

//添加方法
Person.prototype.sayHi = function(){
    console.log("大家好!!");
}

//员工 子类 , 增加了 salary 薪水 属性
function Employee(name, sex, salary){
    // 调用父类的构造函数, 将自己及属性值 传入
    Person.call(this, name, sex);
    this.salary = salary;
}

//设置子级构造函数的原型
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 构造函数的一个实例赋值给 Employee 原型对象。通过这样做，所有 Employee 类的实例都将继承 Person 类的所有方法和属性（通过原型链）。在这里调用 new Person 时并没有传入参数，因此新创建的 Person 实例的 name 和 sex 属性将是 undefined。不过，在接下来的 Employee 构造函数内部已经通过 Person.call(this, name, sex) 正确地设置了这些属性。
Employee.prototype.constructor = Employee; 在 JavaScript 中，每个构造函数的原型对象都有一个内置的 constructor 属性，它指向该构造函数本身。但是，当执行了 Employee.prototype = new Person 后，Employee 原型对象的 constructor 被修改为指向 Person。为了修复这一问题，并确保 Employee 的实例能够正确识别其构造函数，需要手动设置 Employee.prototype.constructor 为 Employee。这样做的目的是在后续可能涉及检查对象构造函数的场景下（如 instanceof 操作符或 .constructor 属性），能正确识别出对象是由哪个构造函数创建的。

2.12.3.2.ES 6 构造继承

// ES 6
class Person {
    //构造方法
    constructor(name, sex){
        this.name = name;
        this.sex = sex;
    }

    //父类的成员方法
    sayHi(){
        console.log("大家好!!");
    }
}

class Employee extends Person {
    //构造方法
    constructor(name, sex, salary) {
        super(name, sex);// Phone.call(this, brand, price)
        this.salary = salary;
    }

    eat() {
        console.log("去食堂")
    }

    // sayHi(){
    //     console.log("大家好!!我转正了");
    // }
}

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 )私有属性

通过在属性前加 # 来设置私有的属性,

在内部可以直接使用( 如: info() ),

在外部直接调用会报错 , Uncaught SyntaxError: Private field ‘#age’ must be declared in an enclosing class文章来源地址https://www.toymoban.com/news/detail-832581.html

class Person{
     //公有属性
     name;
     //私有属性
     #age;
     #weight;
     //构造方法
     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();