我来重新学习 javascript 的面向对象(part 1)

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

image

虽然话说如此,但是我们还是要熟练使用 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``对象

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

  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
本作品著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,869评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,716评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,223评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,047评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,089评论 6 395
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,839评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,516评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,410评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,920评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,052评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,179评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,868评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,522评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,070评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,186评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,487评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,162评论 2 356

推荐阅读更多精彩内容