class的基本用法
es5生成实例对象是通过构造函数和原型生成的,这种写法可能与普遍的编程语言有区别,所以es6就推出了class语法。ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已
es5
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);
es6
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
类的内部所有定义的方法,都是不可枚举的(non-enumerable),但在es5上是可枚举的这点有点差别。
constructor()方法
- constructor()方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor()方法,如果没有显式定义,一个空的constructor()方法会被默认添加。
- constructor()方法默认返回实例对象(即this),完全可以指定返回另外一个对象。
- 类必须使用new调用,否则会报错。这是它跟普通构造函数的一个主要区别,后者不用new也可以执行。
类的实例
类的属性和方法,除非显式定义在其本身(即定义在this对象上),否则都是定义在原型上(即定义在class上)
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
var point = new Point(2, 3);
point.toString() // (2, 3)
point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true
类的所有实例共享一个原型对象
注意:
var p1 = new Point(2,3);
var p2 = new Point(3,2);
p1.__proto__.printName = function () { return 'Oops' };
p1.printName() // "Oops"
p2.printName() // "Oops"
var p3 = new Point(4,2);
p3.printName() // "Oops"
//上面代码在p1的原型上添加了一个printName()方法,由于p1的原型就是p2的原型,因此p2也可以调用这个方法。而且,此后新建的实例p3也可以调用这个方法。这意味着,使用实例的__proto__属性改写原型,必须相当谨慎,不推荐使用,因为这会改变“类”的原始定义,影响到所有实例
类的各种属性和方法
类的属性和方法
let propName = 'getNmae' //类的属性名,可以采用表达式。
class Fa {
count = 0;// 属性
get count() {// 取值函数(getter)
console.log('Getting the current value!');
return this.count;
}
set count(value) {// 存值函数(setter)
this.count = value
}
increment() { // 方法
this._count++;
}
[propName](){}// 属性名为表达式
}
类的静态属性和方法
类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”
clasa StaticFun {
static name = 'ss';// 静态属性
static getName(){// 静态方法
}
}
// 直接调用静态属性
console.log(StaticFun.name)
私有属性和私有方法
私有方法和私有属性,是只能在类的内部访问的方法和属性,外部不能访问。这是常见需求,有利于代码的封装。
class Foo {
#a;// 私有属性
constructor(a) {
this.#a = a;
}
get #a(){return this.#a}
set #a(value){this.#a = value};// 私有属性也可以有getter setter方法
#sum() {// 私有方法
return this.#a + this.#b;
}
printSum() {
console.log(this.#sum());
}
}
// 私有属性和私有方法前面,也可以加上static关键字,表示这是一个静态的私有属性或私有方法。
还有 class点表达式,静态模块等其他内容,可参考阮老师的笔记
版权声明:本文为qq_47915690原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。