网站搜索怎么做,广州网站建设哪家公司,网站开发实践实验教程,免费网站管理软件2.12. class类
ES6 提供了更接近传统语言的写法#xff0c;引入了 Class#xff08;类#xff09;这个概念#xff0c;作为对象的模板。通过 class 关键字#xff0c;可以定义类。
ES6 的 class 可以看作只是一个语法糖#xff0c;它的绝大部分功能ES5 都可以做到…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();
