call、bind、apply都是Function原型上的办法,用于扭转this的指向

自定义函数

js中的call、bind、apply是用c++代码实现的,咱们这里应用js代码做一个模式,没有把所有的边界状况思考进来,仅做一个简略的实现,三个函数在应用的时候有一些须要留神的中央,在定义的时候须要把这些状况思考进去

  • 当传入的值是根本数据类型时,call、apply、bind办法会将它转变成援用数据类型,如传入的字符串变成了 String 类型,通过Object()能够做这一转换
  • 当没有传递须要扭转的this指向时,函数的this指向window(非严格模式下)
  • 当传递的this指向为null、undefined时, 函数的this指向window(非严格模式下)

call的实现

定义call函数须要留神

  • 第一个参数接管扭转后的this指向,从第二个参数开始接管函数执行所须要的参数

实现代码如下

Function.prototype.iCall = function (thisArg, ...args) {  // 1.获取执行函数  var fn = this    // 2.将函数绑定到传递的对象上  thisArg = thisArg || thisArg.toString() ? Object(thisArg) : window  thisArg.fn = fn  var result = thisArg.fn(...args)    // 3.删除传递对象的fn函数  delete thisArg.fn    // 4.返回后果  return result}function foo(...args) {  console.log('绑定的this为:', this)  console.log('传递的参数为:', args)}var user = {  name: 'alice'}// 将foo函数this指向改为user,并传递参数1,2,3foo.iCall(user, 1, 2, 3)

执行后果为

apply的实现

定义apply函数需注意

  • 第一个参数接管扭转后的this指向,第二个参数接管函数执行所须要的参数组成的【数组】

实现代码如下

Function.prototype.iApply = function(thisArg, args){   // 1.获取执行函数   var fn = this   // 2.将函数绑定到传递的对象上   thisArg = thisArg || thisArg.toString() ? Object(thisArg) : window   thisArg.fn = fn   var result = thisArg.fn(...args)    // 3.删除传递对象的fn函数   delete thisArg.fn    // 4.返回后果   return result}function foo(...args){  console.log('绑定的this为:', this)  console.log('传递的参数为:', args)}var str = "hello js"var arr = ['a', 'b', 'c']foo.iApply(str, arr)

执行后果如下

bind的实现

定义bind函数需注意

  • 第一个参数接管扭转后的this指向,第二个参数接管函数执行所须要的参数
  • bind函数不会立刻调用函数,而是返回一个新的函数,新函数依然能够持续传递参数
Function.prototype.iBind = function (thisArg, ...args) {  // 1.获取执行函数  var fn = this    // 2.将函数绑定到传递的对象上  thisArg = thisArg || thisArg.toString() ? Object(thisArg) : window  thisArg.fn = fn    return function (...params) {    // 3.获取函数执行的后果    var result = thisArg.fn(...args, ...params)        // 4.删除传递对象的fn函数    delete thisArg.fn        // 5.返回后果    return result  }}function foo(...args) {  console.log('绑定的this为:', this)  console.log('传递的参数为:', args)}var num = 0var fn = foo.iBind(num, 20, 40)fn(30, 50)

执行后果如下

以上就是call、bind、apply的实现办法,代码量不多,然而须要对this的指向比拟理解,对于this指向也能够看看我其余的博文~