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

myshell 发布于2019-08-26 12:19 / 2838人阅读

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

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

很多job 的描述都说要求精通 javascript 面向对象编程，但是根据一般的套路，写精通其实就是熟练，写熟练其实就是一般，写一般其实就是懵逼！

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

一、野蛮方式构建对象

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

// 。。。。每次都要写上面的一大段代码，只是为了创建一个 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段代码的问题，所以再后来的人们就开始使用一些高级玩意来解决这个问题。

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

通过抽象出创建具体对象的过程，用函数来进行封装，换句话来说，就是抽象了一个 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]

三、使用构造函数模式来区分自己人

经过一番智慧交流之后，聪明的人们想出了一个方法，使用一个在对象里面的 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`对象

做了以上的改变之后，整个创建对象的模式被改变了：

首先定义了一个 Food 的构造函数（其实就是之前的工厂函数createFood，但是现在升级了）

通过 new 来创建一个对象（现在的 Food 用 new 来先创建）

将构造函数的作用域赋值给新对象，将this指向这个新对象（将升级版的工厂送给这个用 new 创建的 food）

执行构造函数的中的代码（升级版的工厂会自动将里面的零件和机器放到新的 Food 上，相当于组装放在了食物本身身上）

不需要主动 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);
}();

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

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

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

参考内容

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

版权信息

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

专线服务超融合服务器 javascript 面向对象 javascript面向对象 javascript面向对象编程 javascript面向对象编程指南

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

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

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

摘要：二动态原型模式动态原型模式的特点是，在构造函数里面增加判断处理是否添加原型对象属性。他依然有一个严重的问题，就是原型对象和实例和构造函数之间没办法关联，这样不适合在有一定规模复杂度的程序开发中使用。续上一集内容，有一些数据不需要共享的时候，但是又想实现共享数据处理，鱼与熊掌，都要兼得（老板就是这么霸气），那么经过工程师们的智慧交流，他们发现现实并非那么残酷，还有一些办法可取的，也就是...

Elle 2019-08-23 11:30 评论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