js修改函式內部的this指向

在呼叫函式的時候偶爾在函式內部會使用到this,在使用this的時候發現並不是我們想要指向的物件.可以通過bind,call,apply來修改函式內部的this指向.

預設在瀏覽器下script標籤內定義的函式,呼叫的時候函式內部的this指向window(瀏覽器視窗物件)

<script>

var a=2

function hello(){

    console.log(this)

    console.log(this.a)

}

hello()

//輸出: window => object

//輸出: 2

</script>

使用bind來修改內部的this指向bind(option)函式內部的this指向option這個物件

<script>

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'

</script>

使用call來修改內部的this指向call(option)函式內部的this指向option這個物件

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這個物件

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第一個引數是需要指向的物件,第二個引數是陣列格式,函式內部的形參可以訪問

//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