JavaScript——小坑

1、注意到返回的函数在其定义内部引用了局部变量arr，所以，当一个函数返回了一个函数后，其内部的局部变量还被新函数引用

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}
var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

在上面的例子中，每次循环，都创建了一个新的函数，然后，把创建的3个函数都添加到一个Array中返回了。你可能认为调用f1()，f2()和f3()结果应该是1，4，9，但实际结果是

f1(); // 16
f2(); // 16
f3(); // 16

全部都是16！原因就在于返回的函数引用了变量i，但它并非立刻执行。等到3个函数都返回时，它们所引用的变量i已经变成了4，因此最终结果为16。
总结：返回函数不要引用任何循环变量，或者后续会发生变化的变量。
如果一定要引用循环变量怎么办？方法是再创建一个函数，用该函数的参数绑定循环变量当前的值，无论该循环变量后续如何更改，已绑定到函数参数的值不变

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {
            return function () {
                return n * n;
            }
        })(i));
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

f1(); // 1
f2(); // 4
f3(); // 9

2、跨域，浏览器发送的数据服务器是可以接收到的，无论客户端发送的是GET还是POST方式，服务器接收的类型都是一个 options 类型的请求，之所以浏览器会报错，是因为浏览器的同源原则，使其在接收加载资源之前对其来源进行了检查，然后限制加载，（跨域去请求某个资源，chrome会先发一个option请求过去确认能否加载(cors)，确认通过之后你的请求才能发出，假如没有通过，浏览器拿不到资源，这个是h5新增的跨域资源共享方案 cors，会对请求进行“预检”。如果低版本的浏览器，还是会先发送请求，根据服务器是否支持来决定请求状态。）

猜你喜欢