【每日一题NO.58】JS 中如何实现一个类？怎么实例化这个类？

• 构造函数法

• Object.create 法

• 面向对象编程的构造

• ES6 语法糖 class

构造函数法

用 new 关键字生成实例对象。

function MoonCake(name, price) {
  this.name = name;
  this.price = price;
}
MoonCake.prototype.sell = function () {
  alert(this.name + ", 价格为" + this.price);
};
var moonCake = new MoonCake("冰皮月饼", 100);
moonCake.sell();

缺点：

用到了 this 和 prototype，编写复杂，可读性差

Object.create 方法

用Object.create()生成实例对象。

var Person = {
  firstName: "小",
  lastName: "石头",
  age: 20,
  introduce: function () {
    alert("I am " + Person.firstName + " " + Person.lastName);
  },
};

var person = Object.create(Person);
person.introduce();

Object.create 要求IE9，低版本浏览器可以自己仿写一个：

if (!Object.create) {
  Object.create = function (o) {
    function F() {}
    F.prototype = o;
    return new F();
  };
}

其实Object.create仿写这段代码就是“原型式继承”的原理代码。

具体可以看这篇文章：

缺点：

不能实现私有属性和私有方法，实例对象之间也不能共享数据。

面向对象编程的构造

消除 this 和 prototype ，调用 createNew()得到实例对象。

var Cat = {
  age: 13, // 共享数据，定义在类对象内，createNew外
  createNew: function () {
    var cat = {};
    cat.name = "喵喵";
    var sound = "呱呱"; // 私有属性，定义在createNew 内，输出对象外
    cat.makeSound = function () {
      alert(sound); // 暴露私有属性
    };
    cat.changeAge = function (num) {
      Cat.age = num; // 修改共享数据
    };
    return cat;
  },
};
var cat = Cat.createNew();
cat.makeSound();

优点

容易理解，结构清晰，符合传统的面向对象编程的构造。

缺点

不够灵活，修改共享数据还需要事先定义好。不像原型链的形式那样，实例类可以直接修改。

ES6 语法糖 class

用 new 关键字生成实例对象

class Point {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  toString() {
    return "(name:" + this.name + ",age:" + this.age + ")";
  }
}
var point = new Point('小石头', 20);
point.toString()

所有《每日一题》的 知识大纲索引脑图 整理在此：https://www.yuque.com/dfe_evernote/interview/everyday
你也可以点击文末的 “阅读原文” 快速跳转