聊一下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);

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

聊一下JavaScript中

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

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

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

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

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

聊一下JavaScript中

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

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之中,每次运行都会生成一个新的函数对象。

聊一下JavaScript中

这就是为了将所有代码都放入函数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永远都会指向一个车辆对象。
以上就是对于对象修饰器模式的理解,通常你可以使用修饰器模式来向某个已拥有某些功能的对象添加功能,而本例是使用的一个空对象。

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

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

你可能感兴趣的:(聊一下JavaScript中"对象修饰模式"的个人理解)