聊一下JavaScript中"对象修饰模式"的个人理解

此为js入门级文章!
修饰器函数的目的是为了能够更好的代码复用,节省内存。同时理解了它的运作机制和原理会对你理解函数、原型、伪类有很大帮助。
先从最简单的说。假设我们需要创建两个对象,这两个对象有一个属性和一个方法

var amy = {loc:1};
amy.loc++;
var ben = {loc:9};
ben.loc++;

这两个对象的方法显然是相似的,都是把属性loc实现++,这样的话我们可以提取一个函数,广泛用于多种情况

var move = function(car){
   car.loc++;
};

此时我们以后需要修改对象属性就可以用这句代码

move(amy);
move(ben);

程序运行时会有另一个内存模型被建立起来,下图表示这些代码建立的内存模型

这样做有两个好处,一个是节省代码,不必每次需要对象调用方法时重写一遍,一个是便于以后修改方法,只需在函数里修改而不必每个对象都修改一遍。
看一下一开始的代码,我们发现还每个对象的属性赋值相似,可以再提取一个公共部分

var carlike = function(obj,loc){ 
  obj.loc = loc; 
  return obj;
};

一个像这样的函数,接受一个对象作为输入参数,并为这个对象增加某些属性或者功能,这个函数就可以被称为修饰器,或者修饰器函数。常用形容词命名,比如这里的carlike。
此时我们创建对象不再是直接赋值,我们将一个对象传入修饰器函数,当它返回时已经拥有属性.loc指向它的值

var amy = carlike({},1);
var ben = carlike({},1);

此时内存里多了一个carlike指向f对象

修饰器函数不仅仅可以添加数字之类的简单属性。函数也是属性,我们调用方法的时候一般都会使用点语法

army.move();
ben.move();

在此之前,我们得再次重构代码,需要在函数中向每个车辆添加一个属性move。现在这个函数的用法不再是接受一个实参,而是在函数调用时,目标函数直接出现在点符号左侧。JavaScript支持自动绑定的参数this,可以指向调用时的点符号左侧对象。

var carlike = function(obj, loc) { 
  obj.loc = loc; 
  obj.move = function(){ 
     this.loc++; 
  } 
  return obj;
};
var amy = carlike({}, 1);
amy.move();
var ben = carlike({}, 9);
ben.move();

现在看看内存中的变化,在原来的版本中,我们只有一个函数对象,因为它是在函数carlike之外被定义的现在由于我们将方法move的源代码移入了函数carlike之中,每次运行都会生成一个新的函数对象。

这就是为了将所有代码都放入函数carlike中所付出的高昂代价。这里也许会有疑惑,为什么将函数定义都移入函数体之后,会导致每个车辆拥有多个move方法,多个不同的函数对象。这里举个列子

var makeAnObject = function(){
  return {example: 'property'};
};
var ob1 = makeAnObject();
var ob2 = makeAnObject();
console.log(ob1===ob2);

ob1和ob2是由同一个函数创造出来并且拥有同样的属性,你认为ob1和ob2这两个对象完全一样还是由于属性相似而导致连个对象看起来相似?或者他们恒等吗?
尽管它们是由同一行代码生成的,它们却是不同的对象。对其中一个对象做出改变不会导致另一个对象改变,因为它们拥有不用的标识。它们的区别类似同卵双胞胎的区别,虽然看起来一样,但是却拥有各自的身份。
但是如果这个建造函数反悔了一个函数对象,而非一个简单对象呢?

var makeAnObject = function(){ 
  return function(){};
};
var ob1 = makeAnObject();
var ob2 = makeAnObject();
console.log(ob1===ob2);

当然还是两个不同的函数对象!
回到我们之前的代码,由于相同的原因,每当解释器访问修饰器函数carlike中间的代码时,都会生成一个新函数,作为车辆的.move 方法。根据创建车辆的数量,这可能会占用很多内存。但是将.move 方法放入修饰器函数 carlike 之中也有好处,就是每次.move 函数被创建时,都有对调用函数carlike时创建的独特闭包范围拥有访问权限,因此我们无需再依赖关键词this

var carlike = function(obj, loc) { 
  obj.loc = loc; 
  obj.move = function() { 
    obj.loc++; 
  }; 
  return obj;
};
var amy = carlike({}, 1);
amy.move();
var ben = carlike({}, 9);
ben.move();

每次move被调用时,参数this都会绑定到一个新值,我们不再使用参数this,而是使用这个闭包变量obj,每次调用函数carlike时,都会创建一个新的闭包作用域,因此变量obj永远都会指向一个车辆对象。
以上就是对于对象修饰器模式的理解,通常你可以使用修饰器模式来向某个已拥有某些功能的对象添加功能,而本例是使用的一个空对象。

下一篇我会写一下函数类,在研究一下进一步优化方式。

作者:长梦未央
图片来源:优达学城付费课程
个别文字摘自教学视频老师的讲解

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

推荐阅读更多精彩内容

  • 一、温故而知新 1. 内存不够怎么办 内存简单分配策略的问题地址空间不隔离内存使用效率低程序运行的地址不确定 关于...
    SeanCST阅读 7,791评论 0 27
  • 学习JavaScript语言的过程中“面向对象”的概念绝对是一道坎。JS没有“类”这个概念,因此要用它来进行面向对...
    Leesper阅读 610评论 0 1
  • 你,最害怕的是什么 ? 我回答,怕黑,怕高,怕在你最无助的时候没人理会你……在朋友面前一直都是大大咧咧天不怕地不怕...
    Liii栗子阅读 166评论 0 0
  • 产品概念里包含产品的竞争优势、典型场景、刚性需求以及核心用户。 竞争优势 在做竞品分析时,我们需要分析出我们的竞争...
    YTooo_fdc2阅读 1,212评论 2 2
  • 也许你和我一样,曾经有过迷茫,也许我们都一样,为了梦想而努力。或许有人说我们为了逃避找工作的困扰才选择了考研。但我...
    Chenczy阅读 91评论 0 0