一、this指向

• 每一个函数内部都有一个关键字this
• this的值, 和函数的调用有关, 与函数书写无关

1. 普通调用方式

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

        function fn() {console.log(this);  }fn()    // this === window

2. 函数放置到对象

• 如果将函数放置到对象, 通过对象的语法去获取到并调用, 那么this === 对象

        function fn() {console.log(this);  }// 将函数fn赋值给对象obj的c属性, fn和obj.c是一个引用地址var obj = {a: 1,b: '我是对象obj的属性B',c: fn}obj.c()  // this === obj     this指向了调用者

3. 事件处理函数

• 如果将函数作为事件处理函数, 那么触发的时候, 内部的this指向了事件源

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

4. 计时器

• 如果将函数作为定时器执行时的函数, 那么触发的时候, 内部的this指向了全局对象window

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

二、改变this指向

• 需求: 我想让这个函数在不改变结构的情况下, 让其内部的 this === obj

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

1. call()

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

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

2. apply()

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

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

3. bind()

• 语法:函数.bind(this指向谁, 参数1, 参数2, 参数3...)
• 第二个位置的参数开始, 会传递到函数中
• 注意: bind 方法不会立即执行函数, 他会返回一个内部this修改完毕的新函数

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