this关键字 改变this关键字的指向

this 关键字

・ 概念： 每一个函数内部都有一个关键字 this ，this 的值只和函数的调用有关, 与函数书写无关

1. 一个普通的全局函数, 在正常调用的情况下, this === window

function fn() {
    console.log(this);
}
// 1. 普通调用方式
fn();    // this === window

2. 将函数 fn 赋值给 对象obj的c属性 fn 和 obj.c 是一个引用地址

        var obj = {
            a: 1,
            b: '我是对象obj的属性B',
            c: fn
        }
        obj.c();    // this === obj     this 指向了 调用者

3. 事件的方式触发

        var box = document.getElementById('box')
        box.onclick = fn;    // this === box     this 指向了 事件源

4. 倒计时器

        function fn() {
            console.log(this);   
        }
        
        setTimeout(fn, 0);   // this === window
        setInterval(fn, 1000);   // this === window

改变 this 关键字的指向

        var obj = {
            a: 1,
            b: 2,
            c: '我是对象obj的属性c'
        }
        
        function fn(x, y) {
            console.log(this, x, y);
        }
        
        fn(100, 200);      // window  100 200

1. call() 可以帮助我们修改函数的 this 指向;

语法 函数.call(this指向谁, 参数1, 参数2, 参数3...) 第二个位置的参数, 会传递到函数中

fn.call(obj, 300, 400);   // {a: 1, b: 2, c: '我是对象obj的属性c'} 300 400

2. apply() 可以帮助我们修改函数的 this 指向;

语法 函数.apply(this指向谁, [参数1, 参数2, 参数3]) 第二个位置的数组内数据, 会传递到函数内部

fn.apply(obj, [500, 600]);  // {a: 1, b: 2, c: '我是对象obj的属性c'} 500 600

3. bind() 可以帮助我们修改函数的 this 指向;

语法 函数.bind(this指向谁, 参数1, 参数2, 参数3...) 第二个位置的参数开始, 会传递到函数中

bind 方法不会立即执行函数, 他会返回一个 内部 this 修改完毕的 新函数

var newFn = fn.bind(obj, 700, 800);
newFn();         // {a: 1, b: 2, c: '我是对象obj的属性c'} 700 800