关于AOP装饰函数中的this

时间：2021-02-13 05:50:00

　　在学习关于JavaScript的装饰者设计模式的过程中，发现其实现方式的关键在于this的使用。

　　想象一个匿名函数(其实预定义的有名函数也可以，都存在引用)，其中的this：

 // 我们先定义一个匿名函数的引用foo

 var foo = function(){

     console.log(`我是 ${this}`)};  

 //创建一个空的Object实例

 var bar = {};  //很空  但是依然有其默认原型Object.prototype的方法和属性

 //如果我们写出下列语句

 bar.foo = foo; //这意味着把上面定义的匿名函 ”挂载“到实例bar的foo方法中

 //

 bar.foo() //我是 [object Object](bar)。这里其实调用了Object原型上的toString方法,下同。

 foo() // 我是 [object global](node: global/ 浏览器: window)

　　到这里，读者可能会疑惑，这个”挂载“的过程跟题目的AOP装饰函数有什么关系。

　　在JS中，装饰模式的实现简单来说就是 将对象的某个原方法与其他的函数进行加工合并，从而输出一个”匿名函数“， 就像上面代码定义的匿名函数一样，将这个输出的”匿名函数“，”挂载到原对象的原方法上面“,就完成了在原方法前后产生附加动作的效果。

　　我们给出AOP的基础实现代码，一步步的分析：

 //首先定义对象

 //这个对象有属性score，以及方法main

 var bar = {

     score : 60,

     main: function(){ console.log("我的分数"+this.score);}

 };

 //突然，我想另外输出bar同学分数的平方根, 要求不过分吧

 //可能你会想到，在bar同学中添加新的方法去输出平方根，或者定义一个新的函数去处理bar同学的分数。

 //接下来，我们利用AOP来实现这个方法

 Function.prototype.after= function(fn){

     var _self = this;

     return function(){

         var result = _self.apply(this,arguments);

         fn.apply(this,arguments);

         return result;    };

 };

 //输出平方根的函数

 function sqrt(){

     console.log("我的分数的平方根"+Math.sqrt(this.score));}

 //挂载到main上

 bar.main = bar.main.after(sqrt);

 //输出新的合成匿名函数

  bar.main();//我的分数60

             // 我的分数的平方根7.745966692414834

　　看到14-20行的代码中的this，其实我一开始有点懵，第一个this指的是 Function实例——即bar.main，而返回的匿名函数中的this是指其挂载的对象，这里是挂载的是bar，如果不挂载的话，这个this就指向运行环境的顶层对象或者null，这是需要关注的地方，换句话说，如果没有那两句apply语句，那么合成匿名函数的这些函数集合中的this可能会丢失，而指向顶层对象或者null。

　　所以在装饰者模式中，this的指向与是否挂载息息相关，进一步的说，在代码的某个地方使用this，无论是函数声明的语句，还是运行上下文中的语句，及时保存this的指向和挂载正确的对象 都是十分必要的！

相关文章