详解Javascript 中的 class、构造函数、工厂函数

// class 关键字，ES6新特性
class ClassCar {
 drive () {
  console.log('Vroom!');
 }
}
const car1 = new ClassCar();
console.log(car1.drive());
// 构造函数
function ConstructorCar () {}
ConstructorCar.prototype.drive = function () {
 console.log('Vroom!');
};
const car2 = new ConstructorCar();
console.log(car2.drive());
// 工厂函数
const proto = {
 drive () {
  console.log('Vroom!');
 }
};
function factoryCar () {
 return Object.create(proto);
}
const car3 = factoryCar();
console.log(car3.drive());

class Foo {}
console.log(typeof Foo); // function

function Foo() {
 if (!(this instanceof Foo)) { return new Foo(); }
}

// 原来的实现：
// class Car {
//  drive () {
//   console.log('Vroom!');
//  }
// }
// const AutoMaker = { Car };
// 工厂函数改变的实现：
const AutoMaker = {
 Car (bundle) {
  return Object.create(this.bundle[bundle]);
 },
 bundle: {
  premium: {
   drive () {
    console.log('Vrooom!');
   },
   getOptions: function () {
    return ['leather', 'wood', 'pearl'];
   }
  }
 }
};
// 期望中的用法是：
const newCar = AutoMaker.Car('premium');
newCar.drive(); // 'Vrooom!'
// 但是因为他是一个库
// 许多地方依然这样用:
const oldCar = new AutoMaker.Car();
// 如此就会导致:
// TypeError: Cannot read property 'undefined' of
// undefined at new AutoMaker.Car

// instanceof 是一个原型链检查
// 不是一个类型检查
// 这意味着这个检查是取决于执行上下文的,
// 当原型被动态的重新关联,
// 你就会得到这样令人费解的情况
function foo() {}
const bar = { a: 'a'};
foo.prototype = bar;
// bar是一个foo的实例吗，显示不是
console.log(bar instanceof foo); // false
// 上面我们看到了，他的确不是一个foo实例
// baz 显然也不是一个foo的实例，对吧"color: #ff0000">用类的好处


  
一个方便的，自包含的关键字

  
  
一个唯一的权威性方法在JavaScript来实现类。

  
  
对于其他有class的语言开发经验的开发者有很好的体验。

用类的坏处
构造器所有的坏处, 加上:
使用 extends 关键字创建一个有问题的类，对于用户是一个很大的诱惑。

类的层级继承会造成很多有名的问题，包括 fragile base class（基础类会因为继承被破坏），gorilla banana problem（对象混杂着复杂的上下文环境），duplication by necessity（类在继承多样化时需要时时修改）等等。
虽然其他两种方法也有可能让你陷入这些问题，但是在使用 extend 关键字的时候，环境使然，就会把你引导上这条路。换句话说，他引导你向着一个不灵活的关系编写代码，而不是更有复用性的代码。
使用工厂函数的好处
工厂函数比起类和构造函数都更加的灵活，也不会把人引向错误的道路。也不会让你陷入深深的继承链中。你可以使用很多手段来模拟继承
1. 用任意的原型返回任意的对象
举个例子，你可以通过同一个实现来创建不同的实例，一个媒体播放器可以针对不同的媒体格式来创建实例，使用不同的API，或者一个事件库可以是针对DOM时间的或者ws事件。
工厂函数也可以通过执行上下文来实例化对象，可以从对象池中得到好处，也可以更加灵活的继承模型。
2. 没有复杂重构的担忧
你永远不会有把工厂函数转换成构造函数这样的需求，所以重构也没必要。
3. 没有 new
你不用new关键字来新建对象，自己可以掌握这个过程。
4. 标准的 this 行为
this 就是你熟悉的哪个this，你可以用它来获取父对象。举个例子来说，在 player.create() 中，this指向的是player，也可以通过call和apply来绑定其他this。
5. 没有 instanceof 的烦恼
6. 有些人喜欢直接不带new的写法的可读直观性。
工厂函数的坏处

  
并没有自动的处理原型，工厂函数原型不会波及原型链。
  
this 并没有自动指向工厂函数里的新对象。
  
也许还会有一些很小的细节方面的差别，但是如果在开发过程中没有问题的话，也不用太担心。

结论
在我看来，类也许是一个方便的关键字，但是也不能掩饰他会把毫无防备的用户引向继承深坑。另一个风险在于未来的你想要使用工厂函数的可能性，你要做非常大的改变。
如果你是在一个比较大的团队协作里面，如果要修改一个公共的API，你可能干扰到你并不能接触到的代码，所以你不能对改装函数的影响视而不见。
工厂模式很棒的一个地方在于，他不仅仅更加强大，更加灵活，也可以鼓励整个队伍来让API更加简单，安全，轻便。
总结
以上所述是小编给大家介绍的详解Javascript 中的 class、构造函数、工厂函数，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！