1.this指向(面试必问)
- 每一个函数内部都有一个关键字 this
- 重点:函数内部的 this 只和函数的调用有关,和函数的定义方式没有任何关系(换句话说:函数内部的 this 指向谁,取决于函数的调用方式)
//全局定义一个函数,内部打印一下 this
function fn() {
console.log(this)
}
//1.全局定义的函数直接调用,此时 this === window
fn()//Window {window: Window, self: Window, document: document, name: '', location: Location, …}
//2.将这个函数放在一个对象内部的一个属性中,此时 this === 调用者
var obj = {
a: 1,
b: 'qwe',
c: fn
}
console.log(obj.a) //1
console.log(obj.c) //ƒ fn() {console.log(this)}
obj.c() //{a: 1, b: 'qwe', c: ƒ}
// 3. 将这个函数放在定时器中执行, this === window (两个定时器都一样)
setTimeout(fn, 10)
// 4. 将这个函数当作 事件处理函数 此时 this === 事件源
var oDiv = document.querySelector('div')
oDiv.onclick = fn //<div></div>
2.更改函数的this指向(面试必问)
上面我们说的是函数基本调用方式里面的 this 指向
忽略函数本身的 this 指向,转而指向其他地方的 三个方法:call / apply / bind
- call:
- 这个方法是附加在函数调用后面使用,可以忽略函数本身的 this 指向
- 语法:
函数名.call(新的 this 指向, 传递给函数本身的参数1, 传递给函数本身的参数2, 传递给函数本身的参数3...)
- apply:
- 这个方法是附加在函数调用后面使用,可以忽略函数本身的 this 指向
- 语法:
函数名.apply(新的 this 指向, [传递给函数本身的参数1, 传递给函数本身的参数2, 传递给函数本身的参数3...])
- bind:
- 这个方法是附加在函数调用后面使用,可以忽略函数本身的 this 指向
- bind 和 call / apply 有一点小区别,就是 bind 不会立即执行函数,而是返回一个已经改变了 this 指向的函数
- 语法:
var newFn = 函数名.bind(新的 this 指向);``newFn(传递函数需要的参数)