this指向问题
1、函数调用方式
1)直接调用函数
-
直接函数名调用
function fn () {}; fn()
-
对象的方法调用
let demo = { name: 'zhang san', age: 20, add: () => {} } demo.add();
-
构造函数调用
let Person = function () { this,name = 'zhang san'; this.add = () => {} } let p = new Person(); p.add()
2)以 call() 方法调用
call是直接传递函数的实参:
用法: 函数.call(调用者, 参数1, 参数2, ...)
3)以apply() 方法调用
apply是直接传递函数的实参,但是和call不一样,是将参数封装在一个数组中,以数组为参数:
用法: 函数.apply(调用者,[ 参数1, 参数2, ...])
2、this指向
-
this的指向在函数定义时不能确定,只有函数执行时才能确定
-
this的指向是调用函数的那个对象,this永远指向函数运行时所在的对象
函数的调用方式不一致,this指向不同的对象:
- 直接函数名调用的时候,this永远指向window
- 以方法的形式调用时,this是调用方法的那个对象
- 以构造函数的形式调用时,this是新创建的那个对象
- 使用call和apply调用时,this是指定的那个对象
注:箭头函数的this指向,this等同于上一层的非箭头函数的this值或者全局对象(window 或 undefined)(严格模式下this的值是undefined)
3、改变this指向
1、call()
用法: 函数.call(指向谁, 参数1, 参数2, ...)
function fn (a, b) {
console.log(this)
console.log(this.name)
}
var obj = {
name: 'zhang san'
}
fn(1, 2);
fn.call(obj, 1, 2);
2、apply()
用法: 函数.apply(指向谁, [ 参数1, 参数2, ...])
function fn (a, b) {
console.log(this)
console.log(this.name)
}
var obj = {
name: 'zhang san'
}
fn(1, 2);
fn.apply(obj, [1, 2]);
3、bind()
不直接调用函数,会返回一个新的函数,this指向的是bind的函数
function fn (a, b) {
console.log(this)
console.log(this.name)
}
var obj = {
name: 'zhang san'
}
fn(1, 2);
let newFn = fn.bind(obj, 1, 2);
newFn();
// fn.bind(obj, 1, 2)()