相关知识点

• 使用 class 定义类
• class 中的静态属性和静态方法
• class 中几种定义属性的区别
• 面试题目

使用 class 定义类

• 在 constructor 中 var 一个变量，它只存在于 constructor 这个构造函数中；
• 在 constructor 中使用 this 定义的属性和方法会被定义到实例中；
• 在 class 中使用 = 来定义一个属性和方法，效果和使用 this 定义相同，会被定义到实例上；
• 在 class 中直接定义一个方法，会被添加到原型对象 prototype 上；

class Cat {
  constructor() {
    var heart = "心";
    this.name = "guaiguai";
    this.jump = function () {};
  }
  
  // 使用 = 定义的效果和在 constructor 中使用 this.xxx 相同
  color = "white";
  clearBody = function () {
    console.log("clearBody");
  };
	
	// 定义到原型上
  hideTheShit() {
    console.log("hideTheShit");
  }
}

var guaiguai = new Cat();
console.log(guaiguai); // Cat {color: "white", name: "guaiguai", clearBody: ƒ, jump: ƒ}
console.log(Object.keys(guaiguai)); // ["color", "clearBody", "name", "jump"]
guaiguai.clearBody(); // clearBody
guaiguai.hideTheShit(); // hideTheShit

class 中的静态属性和静态方法

在 class 中使用了 static 修饰符定义的属性和方法被认为是静态的，被添加到类本身，不会添加到实例上。

class Cat {
  constructor(name, color) {
    var heart = "心";
    var stomach = "胃";
    var heartbeat = function () {
      console.log(heart + "跳");
    };

    this.name = name;
    this.color = color;
    heartbeat();
    this.jump = function () {
      console.log(this); // 实例对象 guaiguai
      console.log("jump 方法");
    };
  }
  clearBody = function () {
    console.log("clearBody");
  };

  // 静态属性
  static descript = "我这个类是用来生产出一只猫的";
  // 静态方法
  static actingCute() {
    console.log(this); // Cat 类
    console.log("actingCute 方法");
  }
}

// 相当于定义了一个静态属性
Cat.staticName = "staticName";

var guaiguai = new Cat("guaiguai", "white");
console.log(guaiguai); // Cat {color: "white", name: "guaiguai", clearBody: ƒ, jump: ƒ}
console.log(Object.keys(guaiguai)); // ["color", "clearBody", "name", "jump"]

guaiguai.jump();
guaiguai.clearBody();
console.log(guaiguai.descript); // undefined
// guaiguai.actingCute(); // 报错

Cat.actingCute();
console.log(Cat.descript); // 我这个类是用来生产出一只猫的
console.log(Cat.staticName); // staticName

class 练习题

class Cat {
  constructor() {
    this.name = "guaiguai";
    var type = "constructor";
    this.getType = () => {
      console.log("==== 内 ======");
      console.log(this); // Cat {type: "class", name: "guaiguai", getType: ƒ}
      console.log(this.type); // class
      console.log(type); // constructor
    };
  }
  type = "class";
  getType = () => {
    console.log("==== 外 ======");
    console.log(this.type);
    console.log(type);
  };
}

var type = "window";
var guaiguai = new Cat();
guaiguai.getType(); // 会调用 constructor 中的 getType 方法
console.log(guaiguai); // Cat {type: "class", name: "guaiguai", getType: ƒ}

总结 class

class 的基本概念

• 当使用 class 的时候，它会默认调用 constructor 这个函数来接收一些参数，并构造出一个新的实例对象（this）并将它返回；
• 如果 class 中没有定义 constructor，也会隐式生成一个 constructor 方法；

class 中几种定义属性的区别

• 在 constructor 中 var 一个变量，它只会存在于 constructor 这个构造函数中；
• 在 constructor 中使用 this 定义属性和方法会被定义到实例上；
• 在 class 中使用 = 来定义一个属性和方法，也会被定义到实例上；
• 在 class 中定义直接一个方法，会被添加到原型对象 prototype 上；
• 在 class 中使用 static 修饰符定义的属性和方法被认为是静态的，被添加到类本身，不会添加到实例上；

其他

• class 本质虽然是函数，但是不会像其他函数一样提升至作用域最顶层；
• 如遇 class 中箭头函数等题目请参照构造函数来处理；
  • 当成构造函数创建对象来处理；
  • 在构造函数中如果使用了箭头函数的话，this 指向的就是这个实例对象；
• 使用 class 生成的实例对象，也会有沿着原型链查找的功能；

大厂面试题

function Fn() {
  this.x = 100;
  this.y = 200;
  this.getX = function () {
    console.log(this.x);
  };
}

Fn.prototype = {
  y: 400,
  getX: function () {
    console.log(this.x);
  },
  getY: function () {
    console.log(this.y);
  },
  sum: function () {
    console.log(this.x + this.y);
  }
};

var f1 = new Fn();
var f2 = new Fn();

console.log(f1.getX === f2.getX); // => false
console.log(f1.getY === f2.getY); // => true
console.log(f1.__proto__.getY === Fn.prototype.getY); // => true
console.log(f1.__proto__.getX === f2.getX); // => false
console.log(f1.getX === Fn.prototype.getX); // => false
console.log(f1.constructor); // => Object
console.log(Fn.prototype.__proto__.constructor); // Object

f1.getX(); // => 100
f1.__proto__.getX(); // => undefined
f2.getY(); // => 200
Fn.prototype.getY(); // => 400
f1.sum(); // => 300
Fn.prototype.sum(); // => NAN