6-作用域链中变量的使用原则 闭包 回调/惰性/即时函数

2017-12-02  本文已影响0人  前端雨

作用域链中变量的使用原则

闭包

闭包的好处

setTimeout和闭包的执行

//第一种写法
for(var i=0; i<3; i++){
    (function(index){
        setTimeout(function(){
            console.log(index+'+++');
        },0);
    })(i);
}
//第二种写法
for(var i=0; i<3; i++){
    setTimeout((function(index){
        return function(){
            console.log(index+'----');
        }
    })(i),0);
}
//第三种方法
for(let i=0; i<3; i++){
    setTimeout(function(){            
        console.log(i+'----');            
    },1000);
}

div事件和闭包

    //JS单线程 先循环完 再触发点击事件时 i遍历完自加1变成5了--所以当点击div时变成5了
    for (var i = 0; i < divs.length; i++) {
        divs[i].onclick = function () {
            console.log('点击了第' + i + '个div');
        }
    }
    //方法一:闭包解决拿到i的值
    for (var i = 0; i < divs.length; i++) {    
        (function (j) {
            divs[j].onclick = function () {
                console.log('点击了第' + j+ '个div');
            }
        })(i);    
    }
    //方法二
    for (var i = 0; i < divs.length; i++) {
        divs[i].onclick = (function (j) {
            return function () {
                console.log('点击了第' + j + '个div');
            }
        })(i);
    }

函数的特殊性

回调函数

    //01 提供一个对象,该对象中永远showName方法
    var obj = {
        name:"默认的名字",
        age:30,
        showName:function () {
            console.log(this.name);
        },
        showAge:function () {
            console.log(this.age);
        }
    };                          

    //02 提供一个函数,该函数接受一个参数(函数引用)
    function demo(callBack,callBack_obj) {
        //处理第一个参数传递对象方法字符串的形式
        if(typeof callBack == 'string') {
            callBack = callBack_obj[callBack];
        }

        if (typeof callBack == 'function') {
            callBack.call(callBack_obj);
        }
    }

    //demo(obj.showName,obj);
    //demo(obj.showAge,obj);

    //传递字符串和对象来进行调用
    demo("showName",obj);

    //（01）以上代码传入两个参数，分别为具体的回调函数，和该回调函数所属的对象
    //（02）该函数的参数接受两种方式的回调传递（一种是直接传递函数引用，一种是直接以字符串的方式传递对象方法的字符串）
    //（03）在函数内部对传入的回调参数做处理，修正this的问题

    <script>
        var setup = function () {
            var count = 0;
            return function () {
                return count ++;
            }
        }
    
        var next = setup();
        console.log(next());    //0
        console.log(next());    //1
        console.log(next());    //2
    </script>

惰性函数

即时函数

即时对象初始化

({
    name:"张三",
    age:23,
    getDescript:function () {
    console.log("名字:" + this.name + "年龄:" + this.age);
},

//注意:在对象中访问对象的属性和方法都需要使用this.前缀
init:function () {
    this.getDescript();
    //其他的初始化处理
}
}).init();

设计模式: 为了解决开发中遇到的一类问题而提出的一套方法

上一篇 下一篇

猜你喜欢

热点阅读