this

call apply bind

function Base(foo) {
    this.foo = foo
}
function Child(foo) {
    Base.call(this, foo)	// 可以理解成继承，不过是把 this 替换成了 Child 的了
}
const child = new Child('foo')

相同

改变函数内部的 this 指向

区别

call，apply 会调用函数；而 bind 不会调用

call 接受若干参数，apply 接受一整个数组

应用

call 多用作继承

apply 多用于跟数组有关的操作，如求 max, min

const arr = [1, 22, -10, 0, 9]
const max = Math.max.apply(Math, arr)
console.log(max)		// 22
// 利用 ... 运算符也可以
const max = Math.max(...arr)

bind 不调用函数，但会改变内部 this

x = 0       // global
const foo = {
    x: 10,  // foo
    getX: function() { return this.x }
}

console.log(foo.getX())     // 10

const retrieveX = foo.getX
console.log(retrieveX())    // 0，函数里的 this 实际指向的是 global

// 注意 bind 返回的才是绑定过的对象
const boundGetX = retrieveX.bind(foo)
console.log(boundGetX())    // 10, 函数里的 this 重新指向了 foo

this 指向

普通函数中的 this

谁调用了这个函数，this就指向谁

function foo() {
    console.log(this)
}
const obj = {
    bar: function() {
        console.log(this)
    }
}
foo()       // window，因为 foo 是在全局作用于调用的
obj.bar()   // obj

匿名函数的 this

匿名函数的 this 具有**全局性**，指向 window

const obj = {
    bar: function () {
        return function () { console.log(this) }
    }
}
obj.bar()()   // window

箭头函数的 this

箭头函数的 this 是在定义时候确定下来的，而不是在调用时决定的
this 指向父级作用域的上下文
如何寻找箭头函数的 this 指向？
找到离箭头函数最近的function，与该function平级的执行上下文中的this即是箭头函数中的this
箭头函数无法使用 apply，call，bind 改变 this 指向

const obj = {
    bar: function () {
        return () => console.log(this)
    }
}
obj.bar()()   // obj

Last updated 3 years ago