JavaScript中面向对象程序的实现与应用

1.介绍

AOP (Aspect Oriented Programming)，意思是：通过预编译和运行时动态代理实现程序功能统一维护的技术。AOP是OOP的延续，是函数式编程的衍生。通过使用AOP，可以将业务逻辑的各个部分隔离开来，从而降低业务逻辑各部分之间的耦合度，提高程序的可重用性，提高开发效率。

2.基本实现

用过java spring的同学一定知道，有三种注意事项：前、后、左右。下面我们在js调用方法时实现这三个通知：

之前(提前通知)

顾名思义，它是在函数调用之前执行的

function . prototype . before=fun(before fun){ var _ orgin=this；//保存原始函数引用返回函数(){//返回包含原始函数和新函数的beforefun.apply(this，arguments)；//执行新函数并更正thisreturn _ orgin.apply (this，arguments)；//执行原函数} }；var origin fun=function(val){ console . log(' prototype function : ' val)；} var newfun=originnfun。before(function(){//传入函数调用预处理方法console . log(' before 3360 ' new date()。gettime ())}) newfun('测试预通知')；//调用结果//before : 1557047939699//Prototype函数：测试前通知后

与之前相反，它是在函数调用之后执行的

function . prototype . after=fun(after fun){ var _ orgin=this；//保存原始函数引用返回函数(){//返回包含原始函数和新函数的‘proxy function’varret=_ orgin . apply(this，arguments)；//执行原始函数afterfun.apply(this，arguments)；//执行一个新函数来纠正这个返回ret}};var origin fun=function(val){ console . log(' prototype function : ' val)；} var new fun=origin fun . after(函数(){//在预处理方法console.log中传递(' after:' newdate()。gettime ())}) newfun('测试后通知')；//调用结果//原型函数：测试预通知//后： 1557047997647左右(周边通知)

在方法执行之前和之后执行

//实现function . prototype . around=function(before fun，after){ var _ orgin=this；return函数(){return _orgin.before(beforeFun))。after(afterFun)。应用(这个，参数)；}}3.AOP遇到了一个修改器

JS终于在ES7的提案中加入了Decorator函数，用来修改类的行为，但是现在浏览器不支持，所以转换需要Babel。AOP和装饰器结合会给我们带来什么？

航海日志记录

通过AOP和decorator的结合，可以方便地记录日志或函数的执行时间

class Person { @ log say(nick){ return ` hi $ { nick } `；} }函数日志(目标、名称、描述符){ var _ origin=descriptor.valuedescriptor . value=function(){ console . log(` calling $ { name },带有`，arguments)；return _origin.apply(null，参数)；};返回描述符；} var Person=new Person()；人称(小明)；判断用户登录状态

class user { @ checklogin getuser info(){ console . log('获取用户信息')} }//检查用户是否登录到函数check log in(目标，名称，描述符){let method=descriptor。valuedescriptor。值=函数(.args){//验证方法，假设用户名/密码if (validate (args)) {method。apply (this，Args)} else {console.log('未登录，将跳转到登录页面.')}}}在4.react中让user=new user()user . getuser info()AOP。

在react中使用AOP的典型例子是高阶分量(HOC)。请参见以下示例

function HoCcomp(wrappeComponent){ return class HOC扩展了Component { render(){ const NewProps={ param : ' HOC ' }；返回div WrappedComponent(.this.props } {.newProps }//div } } @ HOCCompclass OriginComponent扩展Component { render() {return div这是原始组件{this.Props.param}/div }}在上面的示例中，在HocComp中定义了一个新的props，并将其传递给子组件。我们也可以在OriginComponent中处理一些道具，或者重新打包OriginComponent的外层。因此，无需修改内部组件，并保持功能去耦。

5.摘要

AOP广泛应用于框架和项目中，包括React高级组件、日志记录、登录验证、redux中间件等。在开发中，应补充面向对象程序设计，提高软件的健壮性和可维护性。

好了，这就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。

参考材料

https://www.jb51.net/article/160748.htmhttps://www.jb51.net/article/160753.htm