楚雄微网站建设cx189seo检查工具
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
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 classgirl.info();