var func = function () {
console.log("2")
}
Function.prototype.before = function (beforefn) {
//待补全的函数
}
Function.prototype.after = function (afterfn) {
//待补全的函数
};
func=func.before(function () {
console.log("1");
}).after(function () { //此时,after函数中的this指向func.before
console.log("3");
})();

实现输出:

这是我在笔试中遇到的题目,结束后,下来查了查,发现是js的一种模式——AOP(面向切面编程)。

什么是AOP?

AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后, 再通过“动态织入”的方式掺入业务逻辑模块中。

大致了解了其作用后,开始破解题目

Function.prototype.before=function(fn){
let _self=this; //this==Function.prototype
return function beforeFunc(){
fn.apply(this,arguments);
_self.apply(this,arguments);
// return _self.apply(this,arguments); //若func有返回值
}
}
Function.prototype.after=function(fn){
let _beforeFunc=this;
return function afterFunc(){
_beforeFunc.apply(this,arguments);
// let res=_beforeFunc.apply(this.argumens);
fn.apply(this,arguments);
// return res
}
}

结合最初的题目,讲解原理:

  • 在 func.before 执行时,内部的 this 当前指向 func 函数,使用临时变量 __self 保存.令方法返回一个闭包,为方便理解闭包命名为 beforeFunc(可以是匿名的) 。

  • beforeClosure 被返回后, after 方法的调用变成了 beforeFunc.after,
    此时,after内部 this 当前指向 beforeFunc,使用临时变量 __beforeClosure 保存。令方法返回一个闭包,命名为 afterFunc。

  • 调用 afterFunc(),afterClosure 内部首先调用 beforeFunc 闭包,并把当前 this 和 参数传入 beforeFunc。

  • beforeFunc内部首先调用参数 fn, 执行console.log(1) ,然后__self换成func方法,console.log(2),调用过程中的 this 和 arguments 都是 beforeFunc调用时传进来的,与 afterFunc 是一致的。

  • beforeFunc执行完毕,执行afterFunc 的第二步(after 参数fn中的函数console.log(3))
  • 若改过程有返回值:beforeFunc执行完毕,返回func的返回值,回到 afterFunc 的第一步,result接收 func函数的返回值,然后执行 after 参数中的函数 ,最后把 result 返回。

over!

javascript AOP(面向切面编程)的更多相关文章

  1. Javascript aop(面向切面编程)之around(环绕)

    Aop又叫面向切面编程,其中“通知”是切面的具体实现,分为before(前置通知).after(后置通知).around(环绕通知),用过spring的同学肯定对它非常熟悉,而在js中,AOP是一个被 ...

  2. AOP 面向切面编程, Attribute在项目中的应用

    一.AOP(面向切面编程)简介 在我们平时的开发中,我们一般都是面对对象编程,面向对象的特点是继承.多态和封装,我们的业务逻辑代码主要是写在这一个个的类中,但我们在实现业务的同时,难免也到多个重复的操 ...

  3. AOP面向切面编程的四种实现

     一.AOP(面向切面编程)的四种实现分别为最原始的经典AOP.代理工厂bean(ProxyFacteryBean)和默认自动代理DefaultAdvisorAutoProxyCreator以及Bea ...

  4. Method Swizzling和AOP(面向切面编程)实践

    Method Swizzling和AOP(面向切面编程)实践 参考: http://www.cocoachina.com/ios/20150120/10959.html 上一篇介绍了 Objectiv ...

  5. [转] AOP面向切面编程

    AOP面向切面编程 AOP(Aspect-Oriented Programming,面向切面的编程),它是可以通过预编译方式和运行期动态代理实现在不修改源代码的情况下给程序动态统一添加功能的一种技术. ...

  6. C# AOP 面向切面编程之 调用拦截

    有时候我们需要在代码中对方法调用进行拦截,并修改参数和返回值,这种操作叫做AOP(面向切面编程) 不过需要注意的是,AOP的效率很慢,在需要高效率场合慎用. 以下是C#的AOP方法: 首先建立一个控制 ...

  7. 【原创】Android AOP面向切面编程AspectJ

    一.背景: 在项目开发中,对 App 客户端重构后,发现用于统计用户行为的友盟统计代码和用户行为日志记录代码分散在各业务模块中,比如在视频模块,要想实现对用户对监控点的实时预览和远程回放行为进行统计, ...

  8. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十 || AOP面向切面编程浅解析:简单日志记录 + 服务切面缓存

    代码已上传Github+Gitee,文末有地址 上回<从壹开始前后端分离[ .NET Core2.0 Api + Vue 2.0 + AOP + 分布式]框架之九 || 依赖注入IoC学习 + ...

  9. 论AOP面向切面编程思想

    原创: eleven 原文:https://mp.weixin.qq.com/s/8klfhCkagOxlF1R0qfZsgg [前言] AOP(Aspect-Oriented Programming ...

随机推荐

  1. 使用URLConnection进行访问

    package test; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.IOExcepti ...

  2. v-bind属性的绑定

    v-bind:属性绑定: 当我们并没有使用v-bind使用的时候,突破不能显示出来,会提示错误,提示我们使用v-bind: 当我们使用v-bind时图片就可以显示: v-bind的简写是冒号: 使用v ...

  3. Linux进程内存分析pmap命令

    转自: http://blog.csdn.net/u013982161/article/details/52654256 名称: pmap - report memory map of a proce ...

  4. Quick Find (QF)

    Quick Find 顾名思义就是快速查找,构建一个数组,通过下标即可迅速查找其id Union and Find:构建一个数组,下标为索引,数组元素的值为其id,初始id和索引相同 Union(p, ...

  5. 值得收藏的8个Web端组件库

    值得收藏的8个Web端组件库 Ant Design 介绍:一个服务于企业级产品的设计体系,基于『确定』和『自然』的设计价值观和模块化的解决方案,让设计者专注于更好的用户体验. 组件库地址:https: ...

  6. linux homebrew skill 技巧

    $ cat /usr/bin/gitdiffH0#!/bin/bashgit diff HEAD $(git ls-files| grep '\.py$\|\.py\.in$') | osflake8 ...

  7. jq svg 修改image的xmlns:xlink及图片的显隐

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. Firemonkey的几个特色属性(二)

    3.RotationAngle 控件的旋转角度,可以通过TAnimation进行角度旋转控制. 4.RotationCenter 控件旋转的中心位置,从(0,0)到(1,1),缺省是(0.5,0.5) ...

  9. java Swing小知识点

    private JTextArea jta=new JTextArea(1,2); private ScrollPane sp=new ScrollPane(); private JPasswordF ...

  10. bzoj2152: 聪聪可可 点分治

    链接 https://www.lydsy.com/JudgeOnline/problem.php?id=2152 luogu爆搜都能过,总时间超过100ms就是写错了 思路 直接mod上面跑点分治就行 ...