class的基本用法

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点表达式,静态模块等其他内容,可参考阮老师的笔记

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值