有意思的日记

我来重新学习js 的面向对象(part 3)

2018-10-14  本文已影响0人  dnaEMx

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

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

image

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

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

// 构造函数用于定义实例属性
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 数组的值,证明他们是互相独立的。

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

二、动态原型模式

image

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

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(); // 返回 我是苹果

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

三、寄生构造函数模式

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

image

寄生这个词其实不太好理解,英文原文是叫 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 Object(),重置原型对象的信息)

四、稳妥构造函数模式

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

image

所谓稳妥对象,是指没有公共属性,而且其方法也不引用 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 Object(),重置原型对象的信息)

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

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

参考内容

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

原文转载:https://www.godblessyuan.com/2018/08/%E6%88%91%E6%9D%A5%E9%87%8D%E6%96%B0%E5%AD%A6%E4%B9%A0%20javascript%20%E7%9A%84%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%EF%BC%88part%203%EF%BC%89.html

上一篇下一篇

猜你喜欢

热点阅读