JavaScript this 闭包

this使用

每个函数都是一个作用域，在他的内部都会存在this，谁调用的函数，函数里面的this就是谁

调用的时候，函数前没有指定，就是使用window调用的–全局变量

var name = "QQQ"

function func(){
    var name = "WWW"
    console.log(name)   // WWW
}

func()

var name = "QQQ"

function func(){
    var name = "WWW"
    console.log(this.name)  // QQQ
}

var name = "QQQ"
info = {
    name: "WWW"
    func: function(){
        console.log(this.name)  // WWW
    }
}

info.func()

var name = "QQQ"

info = {
    name: "WWW",
    func: function(){
        console.log(this.name)  // info.name > WWW
        function test(){
            console.log(this.name); // window.name > QQQ
        }
        test()
    }
}

info.func()

var name = "QQQ"

info = {
    name: "WWW",
    func: function(){
        var that=this;

        function test(){
            console.log(that.name)  // info.name > WWW
        }
        test()
    }
}

info.func()

闭包

• 注意：
  • 再循环中发送异步请求
  • 异步任务成功之后，通过闭包获取每个ajax的返回值

data_list = [11, 22, 33]

// 循环
for (var i:i++; i<data.length){
    console.log(i, data[i])
};

data_list = [11, 22, 33]


for (var i:i++; i<data.length){
    // 循环会发送三次Ajax请求(1分钟)
    $.ajax({
        url: "xxx",
        data: {value: data_list[i]},
        success: function(res){

        }
    })
}

console.log("QWEQWE")   // 由于Ajax是异步请求，这里不会等待

data_list = [11, 22, 33]


for (var i:i++; i<data.length){
    // 循环会发送三次Ajax请求(1分钟)
    $.ajax(
        {
            url: "xxx",
            data: {value: data_list[i]},
            success: function(res){
                // 1分钟之后执行回调函数
                console.log(i)  // 这里输出的也是2
            }
        }
    )
}

console.log(i)  // 输出 > 2

data_list = [11, 22, 33]


for (var i:i++; i<data.length){
    function xx(data){
        // 循环会发送三次Ajax请求(1分钟)
        $.ajax(
            {
                url: "xxx",
                data: {value: data_list[i]},
                success: function(res){
                    // 1分钟之后执行回调函数
                    console.log(i)  // 输出 0-1-2
                }
            }
        )
    }

    xx(i)
}

console.log(i)  // 输出 > 2

for (var i:i++; i<data.length){
    // 使用自执行函数
    (
        function(data){
            $.ajax(
                {
                    url: "xxx",
                    data: {value: data_list[i]},
                    success: function(res){
                        // 1分钟之后执行回调函数
                        console.log(i)  // 输出 0-1-2
                    }
                }
            )
        }
    )(i)
}

$.each(data_list, function(index, value){
    console.log(value)
});