改变函数作用域（call、 apply 、bind）

call、 apply 、bind

同异

1）第一个参数都是this的上下文

2）apply第二个参数是数组，call和bind后面都是参数列表

3） call和apply默认会自动执行，bind需要在后面加()来自动执行

4）bind是ES5语法，它是新创建一个函数，然后把它的上下文绑定到bind()括号中的参数上，然后将它返回。
this 的指向
this 永远指向最后调用它的那个对象，箭头函数则不是

        var name = "windowsName";
        var a = {
            name: "Cherry",
            fn: function () {
                console.log(name); // windowsName
                console.log(this.name); // Cherry
            }
        }
        a.fn();

fn 的内部的 this 是对象 a，因此 this.name 会找到该函数内的变量 name
而name 前面没有显示的函数调用，其实它是 window.name 因此就会找到函数外的变量 name

        var name = "windowsName";
        var a = {

            name: "Cherry",
            fn: function () {
                console.log(this.name); // windowsName
            }
        }
        var f = a.fn();
        f();

虽然将 a 对象的 fn 方法赋值给变量 f 了，但是没有调用，而，“this 永远指向最后调用它的那个对象”，由于刚刚的 f 并没有调用，所以 fn() 最后仍然是被 window 调用的。所以 this 指向的也就是 window。

如何使用

        var name = 'hello';
        var a = {
            name: "Cherry",
            fn: function (a, b) {
                console.log(this.name+"：" +(a + b));
            }
        }
        var b = a.fn;
        // 前三个输出都是 Cherry： 3 
        b.bind(a, 1, 2)();
        b.apply(a,[1,2]);  
        b.call(a,1,2);
        b(); // hell0 NAN

第四个调用显示了使用 call、 aply 、bind 之后，运行时 的this 由 window 变为 a ,即 a.fn()，为而第四个任然是 window.fn()

扫描二维码关注公众号，回复： 1486666 查看本文章

箭头函数的 this 始终指向函数定义时的 this，而非执行时。箭头函数需要记着这句话：“箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this，否则，this 为 undefined”。

改变函数作用域（call、 apply 、bind）

猜你喜欢