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

Elle 发布于2019-08-23 11:30 / 2291人阅读

摘要：二动态原型模式动态原型模式的特点是，在构造函数里面增加判断处理是否添加原型对象属性。他依然有一个严重的问题，就是原型对象和实例和构造函数之间没办法关联，这样不适合在有一定规模复杂度的程序开发中使用。

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

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

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

构造函数模式用于定义实例属性

原型模式用于定义方法和共享属性

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

// 构造函数用于定义实例属性
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()，重置原型对象的信息）

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

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

参考内容

红宝书，javascript 高级程序设计第三版

浅谈稳妥构造函数模式的实现原理与机制

版权信息

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

idc机房托管私有云 javascript 面向对象 javascript面向对象 javascript面向对象编程 javascript面向对象编程指南

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97053.html

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

摘要：其实在之前的工厂模式里面，也存在这个问题，不过工厂模式更彻底，直接完全创建一个新对象，而构造函数模式的话只是方法会被重新创建。我来重新学习 javascript 的面向对象（part 1）很多job 的描述都说要求精通 javascript 面向对象编程，但是根据一般的套路，写精通其实就是熟练，写熟练其实就是一般，写一般其实就是懵逼！ showImg(https://segment...

myshell 2019-08-26 12:19 评论0 收藏0
我来重新学习js的面向对象（part 4）

摘要：我是的可以改变函数的对象的指向抛出异常，没有这个因为子类和超类都是构造函数，那么就会有之前说的，构造函数在的时候，里面的方法函数会重复创建实例，导致资源浪费。我来重新学习js 的面向对象（part 4）续上一篇，随着业务越来越大，要考虑一些继承的玩意了，大千世界，各种东西我们要认识和甄别是需要靠大智慧去分门别类，生物学中把动植物按界、门、纲、目、科、属、种进行分类的方法可能是最有代...

MAX_zuo 2019-08-23 12:19 评论0 收藏0
我来重新学习 javascript 的面向对象（part 2）

摘要：先来说其实构造函数也有，原型对象有，实例有也有，或者更加笼统的说，所有对象都是有的。构造函数的原型对象上的会指向构造函数。由于属性是可以变更的，所以未必真的指向对象的构造函数，只是一个提示。续上一集内容，通过构造函数的方式，成功地更新了生产技术，老板笑呵呵，工人少奔波，只是问题总比办法多，又遇到一个新问题，就是会造成一些资源的重复和浪费，那么经过工程师们的智慧交流，他们产生了一个新技...

silvertheo 2019-08-26 12:19 评论0 收藏0
我来重新学习js 的面向对象（part 5）

摘要：无限增殖返回苹果返回香蕉返回返回使用的新语法方法会创建一个新对象，使用现有的对象来提供新创建的对象的。是新增的，用来规范原型式继承。这里将返回的新对象放到子类的原型对象里面，这样子类就拥有了父类的原型对象，也就实现了方法的继承。这是最后的最后了，我会顺便总结一下各种继承方式的学习和理解。（老板要求什么的，管他呢）一、继承-组合继承、伪经典继承 showImg(https://seg...

BicycleWarrior 2019-08-23 12:20 评论0 收藏0
2017年最好的javascript 书籍

摘要：请记住，这些书中的一些可能不是最新的，但概念和基础仍应适用。是最好的老师之一。的秘密由部分组成。在你完成这些书后，查看书籍和最好的本土书籍。我看过三本，第1本，第二本，第四本。第一本买的的实体书，其他两本看的是电子书。第一本是大名鼎鼎老道写的，书很薄，但是非常经典。javascirpt忍者秘籍是jquery的作者写的，也是非常经典。you dont kown js系列也是非常好。看了...

mingzhong 2019-08-20 15:05 评论0 收藏0