ES6的class函数

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

语法

class Father{
	constructor(){ // 构造函数
		this.a = '12'; // this实例对象
	}
	toString(){
		cosole.log('hah');
	}
}
console.log(typeof Father);//"function"
console.log(Father===Father.prototype.constructor);//true
  • 相当于是构造函数
  • 类内所有的方法都是挂在prototype上,且不可枚举
    Object.hasOwnPropertyNames(Point.prototype)返回一个指定对象的所有自身属性的属性名(包括不可枚举属性,但是不包括名为Symbol的属性)组成的数组。
  • constructor默认返回实例对象,如果没有显式写,引擎也会默认为其加上constructor函数
  • 可以使用get取值函数和set存值函数(都是挂在Descriptor 对象上的)
class Father{
	constructor(){
		this.a = '12';
	}
	get prop(){
		return 'hah';
	}
	set prop(value){
		console.log("Fail", value);
	}
	toString(){
		cosole.log('hah');
	}
}
let oL = new Father();
oL.prop = 123; //Fail 123
console.log(oL.prop); //hah

使用时需要注意

  • 内部使用严格模式,不存在变量提升

  • this指向问题,类内部方法的this是指向实例的,如果单独使用this,会导致this指向运行环境,但使用的是严格模式,所以是undefined,从而找不到方法报错。

    • 解决办法
      ​ 1.在构造函数中绑定this
      ​ 2.使用箭头函数
// printName方法中的this,默认指向Logger类的实例。但是,如果将这个方法提取出来单独使用,this会指向该方法运行时所在的环境(由于 class 内部是严格模式,所以 this 实际指向的是undefined),从而导致找不到print方法而报错。
class Logger {
  printName(name = 'there') {
    this.print(`Hello ${name}`);
  }
  print(text) {
    console.log(text);
  }
}

const logger = new Logger();
const { printName } = logger;
printName(); // TypeError: Cannot read property 'print' of undefined

// 解决方案1 手动绑定this
class Logger {
	constructor() {
	    this.printName = this.printName.bind(this);
	}
	printName(name = 'there') {
	    this.print(`Hello ${name}`);
	}
	print(text) {
	    console.log(text);
	}
}
// 解决方案2 箭头函数
class Obj {
  constructor() {
    this.getThis = () => this;
  }
}

const myObj = new Obj();
myObj.getThis() === myObj // true
  • 静态方法和静态属性:不会被实例继承,可以通过类直接调用,且在静态方法中的this是指向类的,可以被子类(extends)继承

实例属性

class foo {
  bar = 'hello'; // 和写在constructor一样,都是定义在实例对象上的属性
  baz = 'world';

  constructor() {
    // ...
  }
}

静态方法和静态属性

类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。

class Foo {
  static classMethod() { // 如果静态方法包含this关键字,这个this指的是类,而不是实例。
    return 'hello';
  }
}

Foo.classMethod() // 'hello'

var foo = new Foo();
foo.classMethod() // TypeError: foo.classMethod is not a function

私有方法和私有属性

只能在类的内部使用(this.#count)。如果在类的外部使用,就会报错。

class IncreasingCounter {
  #count = 0;
  get value() {
    console.log('Getting the current value!');
    return this.#count;
  }
  increment() {
    this.#count++;
  }
}
const counter = new IncreasingCounter();
counter.#count // 报错
counter.#count = 42 // 报错

new.target的使用

  • 可以确定构造函数是怎么调用的。
// 实例必须通过new创建
function Person(name) {
if (new.target !== undefined) { //   if (new.target === Person) {
  this.name = name;
} else {
  throw new Error('必须使用 new 命令生成实例');
}
}
  • class内部调用,返回当前的class,子类继承父类的时候,new.target返回的是子类
class Rectangle {
  constructor(length, width) {
    console.log(new.target === Rectangle); // true, 子类继承父类时,new.target会返回子类
    this.length = length;
    this.width = width;
  }
}
// 利用这个特点,可以写出不能独立使用、必须继承后才能使用的类。
class Shape {
  constructor() {
    if (new.target === Shape) {
      throw new Error('本类不能实例化');
    }
  }
}

class Rectangle extends Shape {
  constructor(length, width) {
    super();
    // ...
  }
}

var x = new Shape();  // 报错
var y = new Rectangle(3, 4);  // 正确

继承

class Point { /* ... */ }

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}

为什么一定要在构造函数中调用super()
super在这里表示父类的构造函数,用来新建一个父类的实例对象。如果不调用,则会报错。
原因:这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,添加子类自己的实例属性和方法。如果不调用super()方法,子类就得不到自己的this对象。

  • ES5 的继承机制,是先创造一个独立的子类的实例对象,然后再将父类的方法添加到这个对象上面,即“实例在前,继承在后”。
  • ES6 的继承机制,则是先将父类的属性和方法,加到一个空的对象上面,然后再将该对象作为子类的实例,即“继承在前,实例在后”。

静态属性和静态方法,私有属性和私有方法

  • 父类的私有属性和私有方法,不会被子类继承
  • 父类的静态属性和静态方法,也会被子类继承,会进行浅拷贝
class A { static foo = 100; }
class B extends A {
  constructor() {
    super();
    B.foo--;
  }
}

const b = new B();
B.foo // 99
A.foo // 100
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值