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