我来从新学习 javascript 的面向对象（part 1）

我来从新学习 javascript 的面向对象（part 1）

不少job 的描述都说要求精通 javascript 面向对象编程，可是根据通常的套路，写精通其实就是熟练，写熟练其实就是通常，写通常其实就是懵逼！

虽然话说如此，可是咱们仍是要熟练使用 javascript 面向对象编程的，毕竟这是js社会高能人才的其中一个标准，这里我就用一个鲜活的例子来讲明和理解咱们应该如何使用javascript 面向对象的方式来编程。

1、野蛮方式构建对象

刚开始最初，咱们建立对象的方式是这样的：

// 。。。。每次都要写上面的一大段代码，只是为了建立一个 food
var food = new Object();
food.name = "苹果";

food.sayName = function() {
  console.log("我是" + this.name);
};

可是这样建立起来很麻烦，写的代码也是很长，若是要建立好多对象，例如我制造了10000个食物，就要写10000次这一大段代码了，因此后来聪明的工程师改成了这样写：

// 起码比以前的少了几行，也整洁了一些
var food = {
  name: "苹果",
  sayName: function() {
    console.log("我是" + this.name);
  }
};

起码代码少了一些，可是仍是没办法很好解决我要写100000段代码的问题，因此再后来的人们就开始使用一些高级玩意来解决这个问题。

2、使用工厂模式构建对象

经过抽象出建立具体对象的过程，用函数来进行封装，换句话来讲，就是抽象了一个 food 的工厂，而后经过对这个工厂传入不一样的材料，来生成不一样的食物。

function createFood(name) {
  var o = new Object();
  o.name = name;
  o.sayName = function() {
    console.log("我是" + this.name);
  };
  return o;
}

var food1 = createFood("苹果");
var food2 = createFood("苹果");

这里能够看到food1，food2 就是这样被制造出来的，而后只须要少许的代码（预先定义好一个生产工厂函数），就能够完成大量的事情，完全解决了问题，实现了多快好爽的新局面。可是用了一段时间以后，随之而来发现一个新问题，当食物多起来的时候，老板貌似不知道哪些食物是属于那些分类的（假设老板是 zz），那怎么办呢？

// 都统一返回是[Function: Object]，没办法用区分识别（卖个关子，你不用管那个constructor）
console.log(food1.constructor) // 返回[Function: Object]
console.log(food2.constructor) // 返回[Function: Object]

3、使用构造函数模式来区分本身人

通过一番智慧交流以后，聪明的人们想出了一个方法，使用一个在对象里面的 constructor 函数来识别那些不同的对象，相似使用部门工牌来标记这我的是是属于哪一个部门的。

function Food(name) {
  this.name = name;
  this.sayName = function() {
    console.log("我是" + this.name);
  };
}

var food1 = new Food("苹果");
var food2 = new Food("苹果");

// 假设这里有一个其余的食物，多是冒充的
var food3 = new otherFood("苹果");

由于要实现相似工牌的方式来识别，因此在建立food的工厂里作一些调整：

• 没有显式的建立对象，例如：var o = new Object();
• 直接将属性和方法付给了 this 对象
• 没有 return 语句
• 函数使用了大写字母开头（这里只是为了区分这个函数的特别，按照惯例，大写字母开头的，通常都是 class 或者构造函数）
• 使用了 new 来建立Food`对象

作了以上的改变以后，整个建立对象的模式被改变了：

1. 首先定义了一个 Food 的构造函数（其实就是以前的工厂函数createFood，可是如今升级了）
2. 经过 new 来建立一个对象（如今的 Food 用 new 来先建立）
3. 将构造函数的做用域赋值给新对象，将this指向这个新对象（将升级版的工厂送给这个用 new 建立的 food）
4. 执行构造函数的中的代码（升级版的工厂会自动将里面的零件和机器放到新的 Food 上，至关于组装放在了食物自己 身上）
5. 不须要主动 return，自动返回新对象（升级版的工厂会自动返回构造好的 food 对象）

经过这种方式，咱们制造出来的食物都会有一个 constructor 为 Food 的标记来标识，若是看到不是的话，那确定就不是咱们制造的。

console.log(food1.constructor) // 返回[Function: Food]
console.log(food2.constructor) // 返回[Function: Food]
console.log(food3.constructor) // 返回[Function: OtherFood]

// 检验的方式有两种
console.log(food1.constructor == Food) // 返回 true
console.log(food2.constructor == Food) // 返回 true
console.log(food3.constructor == Food) // 返回 false ，这个不是咱们制造的食物

console.log(food1 instanceof Food) // 返回 true
console.log(food3 instanceof Food) // 返回 false，这个不是咱们制造的食物

能够看到，使用了新技术（constructor模式技术）以后，在没有增长工做量的状况下，解决了使人头痛的问题，简直是完美，不过过了一段时间以后，发现好像仍是有些瑕疵，使用构造函数constructor模式的时候，函数里面的每一个方法都会在每一个实例上从新建立一遍，那么最明显的地方是：

console.log(food1.sayName == food2.sayName); // 返回 false

由于使用new来建立实例，new的话还会把构造函数里面的方法也一块儿建立，由于方法也是函数，而函数的实例化也会被new触发：

// 省略了其余部分，只关注方法部分
this.sayName = function() {
    console.log("我是" + this.name);
};

this.sayName = new function() {
    console.log("我是" + this.name);
}();

这样就会形成内存和时间和性能的浪费，明明不须要从新重建新的函数实例的。

其实在以前的工厂模式里面，也存在这个问题，不过工厂模式更完全，直接彻底建立一个新对象，而构造函数模式的话只是方法会被从新建立。

那怎么解决呢？会用到原型模式，下回分解。

参考内容

1. 红宝书，《javascript 高级程序设计第三版》

版权信息

做者: 怂如鼠
网站: https://www.whynotbetter.com 本做品著做权归做者全部，商业转载请联系做者得到受权,非商业转载请注明出处。