Javascript -- call/apply/bind方法

1、call/apply/bind

改變函數執行時，裏面this指向對象

call

call()方法裏面第一個參數時this指向對象，第二個參數是函數執行時要傳入的參數，只能一個一個的傳入

const obj = {
  a: '李狗蛋',
  b: '王翠花',
}

function Hello (s) {
  console.log(this)
  console.log('a=' + this.a + 'b=' + this.b + 'c=' + s)
}
Hello()

Hello.call(obj, c)

// 打印結果
window {...}
a=1b=2c=undefined

{a: "李狗蛋", b: "王翠花"}
a=李狗蛋b=王翠花c=3

正常狀況下，Hello函數是全局對象window上掛載的一個函數，函數執行時，this應該指向調用它的對象window，可是經過call方法傳入了obj對象，讓函數裏面的this變成了obj對象

瀏覽器環境或者非嚴格模式下，若是傳入null或者undefined，則this將會指向全局對象window，若是是其餘環境，如node，this則指向global

// 注意聲明變量時，必定要用var，若是用const，let，則會顯示undefined
// 經過var，至關於在window全局對象上聲明瞭a和b兩個屬性
var a = 1
var b = 2
const c = 3

function Hello (s) {
  console.log(this)
  console.log('a=' + this.a + 'b=' + this.b + 'c=' + s)
}
Hello.call(null, c)

// 打印結果
window{...}
a=undefinedb=2c=3

若是是在嚴格模式下，this將不會發生改變，傳入什麼就是什麼

// 嚴格模式
'use strict'
var a = 1
var b = 2
const c = 3

const obj = {
  a: '李狗蛋',
  b: '王翠花',
}

function Hello (s) {
  console.log(this)
  console.log('a=' + this.a + 'b=' + this.b + 'c=' + s)
}
Hello.call(null, c)

// 打印結果
null
報錯:Cannot read property 'a' of null at Hello

apply

aplly方法是用來改變函數執行時this指向對象，方法有兩個參數，第一個參數是this指向的對象，第二個參數是函數執行時要傳入的參數，必須是一個數組

var a = 1
var b = 2
const c = 3

const obj = {
  a: '李狗蛋',
  b: '王翠花',
}

function Hello (s) {
  console.log(this)
  console.log('a=' + this.a + 'b=' + this.b + 'c=' + s)
}
Hello(c)

Hello.apply(obj, [c])

// 打印結果
window {...}
a=1b=2c=3

{a: "李狗蛋", b: "王翠花"}
a=李狗蛋b=王翠花c=3

能夠看到同call同樣，正常狀況下，Hello函數是全局對象window上掛載的一個函數，函數執行時，this應該指向調用它的對象window，可是經過apply方法傳入了obj對象，讓函數裏面的this變成了obj對象

瀏覽器環境或者非嚴格模式下，若是thisArg傳入null或者undefined，則this將會指向全局對象window，若是是其餘環境，如node，this則指向global

var a = 1
var b = 2
const c = 3

const obj = {
  a: '李狗蛋',
  b: '王翠花',
}

function Hello (s) {
  console.log(this)
  console.log('a=' + this.a + 'b=' + this.b + 'c=' + s)
}

Hello.apply(undefined, [c])

// 打印結果
window {...}
a=1b=2c=3

若是是在嚴格模式下，thisArg將不會發生改變，傳入什麼就是什麼

'use strict'

var a = 1
var b = 2
const c = 3

const obj = {
  a: '李狗蛋',
  b: '王翠花',
}

function Hello (s) {
  console.log(this)
  console.log('a=' + this.a + 'b=' + this.b + 'c=' + s)
}

Hello.apply(undefined, [c])

// 打印結果
undefined
報錯:Cannot read property 'a' of undefined at Hello

bind

bind也是用來改變thisArg指向對象的，第一個參數是函數執行時的thisArg指向對象，第二個對象是傳入到函數裏面的參數，這個方法同call差很少

Tips

Tips

Tips

一、bind是返回一個函數，而不是像call，apply同樣當即調用，而是須要手動去調用觸發函數

二、bind傳入的參數並不等同於原函數傳入的參數，而是在原函數的參數前面做爲新增參數，添加進去，原來參數多餘的就清除掉

var a = 1
var b = 2
const c = 3

const obj = {
  a: '李狗蛋',
  b: '王翠花',
}

function Hello (s, d, k) {
  console.log(this)
  console.log('a=' + this.a + 'b=' + this.b + 'c=' + s + 'd=' + d + 'e=' + k)
}
Hello()

Hello.bind(obj, c)(7, 8, 9)

// 打印結果
window {...}
a=1b=2c=undefinedd=undefinede=undefined
        
{a: "李狗蛋", b: "王翠花"}
a=李狗蛋b=王翠花c=3d=7e=8 // 9沒了，由於只有三個形參位置，bind加了一個，最後的9就要清除掉

瀏覽器環境或者非嚴格模式下，若是thisArg傳入null或者undefined，則this將會指向全局對象window，若是是其餘環境，如node，this則指向global

var a = 1
var b = 2
const c = 3

const obj = {
  a: '李狗蛋',
  b: '王翠花',
}

function Hello (s, d, k) {
  console.log(this)
  console.log('a=' + this.a + 'b=' + this.b + 'c=' + s + 'd=' + d + 'e=' + k)
}

Hello.bind(undefined, c)(7, 8, 9)

// 打印結果
window {...}
a=1b=2c=3d=7e=8

若是是在嚴格模式下，thisArg將不會發生改變，傳入什麼就是什麼

'use strict'

var a = 1
var b = 2
const c = 3

const obj = {
  a: '李狗蛋',
  b: '王翠花',
}

function Hello (s, d, k) {
  console.log(this)
  console.log('a=' + this.a + 'b=' + this.b + 'c=' + s + 'd=' + d + 'e=' + k)
}

Hello.bind(undefined, c)(7, 8, 9)

// 打印結果
undefined
報錯:Cannot read property 'a' of undefined at Hello