Javascript -- callapplybind方法

一、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

1、bind是返回一个函数，而不是像call，apply一样立即调用，而是需要手动去调用触发函数

2、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

转载于:https://www.cnblogs.com/zjh-study/p/10959792.html

相关资源：JavaScript中的this/call/apply/bind的使用及区别