On this page

修改函数内部的this指向

在调用函数的时候偶尔在函数内部会使用到this, 在使用this的时候发现并不是我们想要指向的对象. 可以通过bind, call, apply来修改函数内部的this指向.

默认在浏览器下script标签内定义的函数, 调用的时候函数内部的this指向window(浏览器窗口对象)

js

var a = 2

function hello() {
    console.log(this)
    console.log(this.a)
}
hello()
//输出: window => object 
//输出: 2

使用bind来修改内部的this指向 bind(option) 函数内部的this指向option这个对象

js

var a = 2
var obj = {
    a: "a"
}

function hello() {
    console.log(this)
    console.log(this.a)
}
hello = hello.bind(obj)
hello()
//输出: obj => { a:'a' }
//输出: 'a'

使用call来修改内部的this指向 call(option) 函数内部的this指向option这个对象

js

var a = 2
var obj = {
    a: "a"
}

function hello() {
    console.log(this)
    console.log(this.a)
}
hello.call(obj)
//输出: obj => { a:'a' }
//输出: 'a'

使用apply来修改内部的this指向 apply(option) 函数内部的this指向option这个对象

js

var a = 2
var obj = {
    a: "a"
}

function hello() {
    console.log(this)
    console.log(this.a)
}
hello.apply(obj)
//输出: obj => { a:'a' }
//输出: 'a'

bind , call , apply 的区别

bind是只改变函数内部this指向, 但不自调用
call, apply 改变函数内部指向并且自调用
call第一个参数是需要指向的对象, 之后的参数是函数内部的形参可以访问
apply第一个参数是需要指向的对象, 第二个参数是数组格式, 函数内部的形参可以访问

js

//call
var a = 2
var obj = {
    a: 'a'
}

function hello(a, b, c) {
    console.log(this)
    console.log(a, b, c)
}
hello.call(obj, 1, 2, 3) // { a:'a' }  1,2,3

//apply
var a = 2
var obj = {
    a: 'a'
}

function hello(a, b, c) {
    console.log(this)
    console.log(a, b, c)
}
hello.apply(obj, [1, 2], 3, 4) // { a:'a' }  1,2,undefind,undefind