跳到主要内容

认识

2023年02月10日
柏拉文
越努力，越幸运

一、认识​

二、语法​

2.1 类语法​

class Point {
  constructor(x, y) {
    this._x = x;
    this._y = y;
  }
  get x() {
    return this._x;
  }
  set x(newValue) {
    this._x = newValue;
  }
  get y() {
    return this._y;
  }
  set y(newValue) {
    this._y = newValue;
  }
  toString() {
    return `(${this._x},${this._y})`;
  }
}

const point = new Point(10, 10);
console.log(point.toString());
point.x = 20;
console.log(point.x);

2.2 函数语法​

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.getX = function () {
  return this.x;
};
Point.prototype.setX = function (value) {
  this.x = value;
};
Point.prototype.toString = function () {
  return `(${this.x},${this.y})`;
};

const point = new Point(10, 10);
console.log(point.toString());
point.setX(20);
console.log(point.getX());

三、原理​

3.1 数据类型​

class Point {
  constructor(x, y) {
    this._x = x;
    this._y = y;
  }
  get x() {
    return this._x;
  }
  set x(newValue) {
    this._x = newValue;
  }
  get y() {
    return this._y;
  }
  set y(newValue) {
    this._y = newValue;
  }
  toString() {
    return `(${this._x},${this._y})`;
  }
}

console.log(typeof Point);
console.log(Point === Point.prototype.constructor);

上述表明，class 的数据类型就是 function。 class 本身指向 class 的构造函数。因此, class 可以看作是构造函数的语法糖。

四、问题​

4.1 class Vs function​

  1. 函数声明可以提升，类声明不可以提升
函数声明
console.log(Person); // ƒ Person(){ console.log('函数声明'); }
function Person(){
  console.log('函数声明');
}
函数声明表达式
console.log(Person); // undefined

var Person = function (){
  console.log('函数声明');
}
类声明
console.log(Person); // Uncaught ReferenceError: Cannot access 'Person' before initialization

class Person{

}
类声明表达式
console.log(Person); // undefined

var Person = class {

}
  1. 函数受函数作用域限制，而类受块级作用域限制