美文网首页
那些不常见的JS写法记录

那些不常见的JS写法记录

作者: 赵小空 | 来源:发表于2020-09-11 11:15 被阅读0次

    this 指向问题

    
    var getId = document.getElementById;
    getId( 'div1' );  // 报错,因为this指向window
    
    // 修正代码
    document.getElementById = (function( func ){
     return function(){
     return func.apply( document, arguments );
     }
    })( document.getElementById );
    var getId = document.getElementById;
    var div = getId( 'div1' );
    alert (div.id); // 输出: div1 
    

    闭包&for 循环

    for语句括号里可以有三种表达式, 初始化表达式, 控制表达式和循环后表达式; 其中初始化表达式是初始化for循环的时候执行的, 也就是这里的 var i = 0, type;
    控制表达式type = [ 'String', 'Array', 'Number' ][ i++ ] 访问到type 内第 i 项 并且自增,如果 i>3 则返回 undefined 循环会终止;

    var Type = {};
    for ( var i = 0, type; type = [ 'String', 'Array', 'Number' ][ i++ ]; ){
     (function( type ){
     Type[ 'is' + type ] = function( obj ){
     return Object.prototype.toString.call( obj ) === '[object '+ type +']';
     }
     })( type )
    };
    Type.isArray( [] ); // 输出:true
    Type.isString( "str" ); // 输出:true 
    

    高阶函数实现AOP

    AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后,再通过“动态织入”的方式掺入业务逻辑模块中。这样做的好处首先是可以保持业务逻辑模块的纯净和高内聚性,其次是可以很方便地复用日志统计等功能模块。
    在 Java 语言中,可以通过反射和动态代理机制来实现 AOP 技术。而在 JavaScript 这种动态语言中,AOP 的实现更加简单,这是 JavaScript 与生俱来的能力。通常,在 JavaScript 中实现 AOP,都是指把一个函数“动态织入”到另外一个函数之中,具
    体的实现技术有很多,本节我们通过扩展 Function.prototype 来做到这一点。代码如下

    Function.prototype.before = function( beforefn ){
     var __self = this; // 保存原函数的引用
     return function(){ // 返回包含了原函数和新函数的"代理"函数
     beforefn.apply( this, arguments ); // 执行新函数,修正 this
     return __self.apply( this, arguments ); // 执行原函数
     }
    };
    Function.prototype.after = function( afterfn ){
     var __self = this;
     return function(){
     var ret = __self.apply( this, arguments );
     afterfn.apply( this, arguments );
     return ret;
     }
    };
    var func = function(){
     console.log( 2 );
    };
    func = func.before(function(){
     console.log( 1 );
    }).after(function(){
     console.log( 3 );
    });
    func();
    

    我们把负责打印数字 1 和打印数字 3 的两个函数通过 AOP 的方式动态植入 func 函数。通过
    执行上面的代码,我们看到控制台顺利地返回了执行结果 1、2、3

    相关文章

      网友评论

          本文标题:那些不常见的JS写法记录

          本文链接:https://www.haomeiwen.com/subject/uswosktx.html