我来重新学习 javascript 的面向对象（part 3）

续上一集内容，有一些数据不需要共享的时候，但是又想实现共享数据处理，鱼与熊掌，都要兼得（老板就是这么霸气），那么经过工程师们的智慧交流，他们发现现实并非那么残酷，还有一些办法可取的，也就是组合使用构造函数模式和原型模式 和 动态原型模式

一、组合使用构造函数模式和原型模式

组合使用构造函数模式和原型模式的特点主要体现在：

• 构造函数模式用于定义实例属性
• 原型模式用于定义方法和共享属性

效果就是，每个实例对象都会有自己的一份实例属性，但又同时又共享着对方法的引用，既节省了资源也满足了业务要求。

// 构造函数用于定义实例属性
function Food(name) {
  this.name = name;
  this.place = ["巴西", "印度"];
}
// 原型模式用于定义方法和共享属性
Food.prototype = {
  constructor: Food,
  sayName: function() {
    console.log("我是" + this.name);
  }
};

var food1 = new Food("苹果");
var food2 = new Food("苹果");
console.log(food1.place == food2.place); // 返回 false
food2.place.push("俄罗斯");
console.log(food1.place); // 返回 [ '巴西', '印度' ]
console.log(food2.place); // 返回 [ '巴西', '印度', '俄罗斯' ]

可以看到 palce 数组并不是同一个，并且通过对 food2的 place 数组赋值之后也不会影响 food1的 palce 数组的值，证明他们是互相独立的。

之所以有这么屌炸天的效果，就是因为利用了构造函数和原型模式各自的特点，互相补充。

二、动态原型模式

动态原型模式的特点是，在构造函数里面增加判断处理是否添加原型对象属性。

function Food(name, place) {
  this.name = name;
  this.place = place;
  if (typeof this.sayName !== "function") {
    Food.prototype.sayName = function() {
      console.log("我是" + this.name);
    };
  }
}

var food1 = new Food("苹果", ["巴西", "印度"]);
food1.sayName(); // 返回 我是苹果

• 通过在构造函数执行的时候来判断是否将共享的东西添加到原型对象里面，这样就不怕之前出现的先 new 实例化对象，然后再添加原型对象的属性的问题了（回想一下原型对象被重写之后，原型对象丢失，实例无法使用原来的原型对象的数据的问题）。
• 更符合 OOP 开发习惯，不需要将构造函数和原型对象分开单独处理，可以写在一起。

动态原型模式和组合使用构造函数模式和原型模式的原理其实很类似，都是各自利用了构造函数和原型模式的独特的特点来实现的，不过在实现的过程中用了一些取巧，所以导致了他们的分别，细细回想一下就明白了。

三、寄生构造函数模式

这个只是了解一下即可，因为实际中用得不多，但是需要扩大知识面，无论从装逼还是装逼都还是需要的。

寄生这个词其实不太好理解，英文原文是叫 parasitic 直接翻译过来就是寄生了。如果硬要理解，就是创建的实例对象其实是依附上去的，跟构造函数和原型对象本身并没有任何关系，就好像寄生虫和动物，他们仅仅只是寄生在上面而已。

function Food(name) {
  var o = new Object(); 
  o.name = name;
  o.sayName = function() {
    console.log("我是" + this.name);
  };
  return o; // 重写返回值
}

var food1 = new Food("苹果");
console.log(food1.name); // 返回 苹果
food1.sayName(); // 返回 我是苹果

• 这里跟工厂模式极其相似，但这里使用了 new 进行实例化，换言之，也就是执行了构造函数来进行实例化。
• 构造函数在不返回值的情况下，默认会返回新对象实例，而通过构造函数的末尾添加一个 return 语句，可以重写这个返回值。
• 因为每次都是new Object(); ，而且构造函数的返回值被重写了，也就是说这个返回的新对象跟构造函数，跟原型对象是没有关系的，他们同时具有工厂函数和构造函数的缺点。
• 这里能够访问 name，因为这里的 name 属性是暴露到返回的对象上面了，成为返回的对象的属性，就跟 sayName 方法一样，可以被外部访问了。

他有一个严重的问题，就是原型对象和实例和构造函数之间没办法关联，这样不适合在有一定规模复杂度的程序开发中使用。（因为他每次都会new Object()，重置原型对象的信息）

四、稳妥构造函数模式

这个只是了解一下即可，因为实际中我还没用过，但是需要扩大知识面，无论从装逼还是装逼都还是需要的。

所谓稳妥对象，是指没有公共属性，而且其方法也不引用 this 对象，而且也不能被篡改，稳得一逼。

function Food(name) {
  var o = new Object();
  var color = 'red';
  o.sayName = function() {
    console.log("我是" + name);
    console.log("颜色是" + color);
  };
  return o;
}

var food1 = Food("苹果");
console.log(food1.name); // 返回 undefined
console.log(food1.color); // 返回 undefined
food1.sayName(); // 返回 我是苹果，颜色是red

• 可以看到这里不使用this，也不使用 new 来实例化对象。
• 不能通过其他方式访问 name 属性，因为没有name 属性没有被暴露出来。
• 只能通过暴露出来的方法来访问对象内部的属性，间接保护了内部私有属性。

稳妥模式适合在一些安全环境（禁止使用 this，并且也需要保护私有属性）里面使用。
他依然有一个严重的问题，就是原型对象和实例和构造函数之间没办法关联，这样不适合在有一定规模复杂度的程序开发中使用。（因为他每次都会new Object()，重置原型对象的信息）

五、文末我们又遇到新问题了

公司业务越来越大了，公司的产品需要做一些分类，例如动物要分肉食动物，菜食动物，食物要分水果和蔬菜和肉类等，水果下面还要分苹果，香蕉等等，要是按照现在的模式，看来是要有多少种就要写多少种，然后还可能会导致一些种类属性重复，老司机一眼就看出来，需要做一些种类继承了，但是要怎么做呢？

参考内容

1. 红宝书，javascript 高级程序设计第三版
2. 浅谈稳妥构造函数模式的实现原理与机制

版权信息

作者: 怂如鼠
网站: https://www.whynotbetter.com
本作品著作权归作者所有，商业转载请联系作者获得授权,非商业转载请注明出处。