JS面试中你不知道的call apply bind方法及使用场景详解

时间:2023-03-20 前端小张同学人气:0

面试

面试官：说一下 call apply bind 的三者区别吧？

我：啊.....这。

三者区别

call

我们先来看看 call call 函数接收两个参数

@params1 需要指向this

@params2 需要携带的参数

就拿这段代码来说我调用 foo 函数的时候想去执行obj 中的 eat函数怎么办?

默认我的 foo 里面什么页面有怎么可能会打印吃饭呢？this默认指向 window ，window 对象中没有 eat 方法不应该报错 not defind 吗？

let obj = {
  eat: function (args) {
    console.log("吃饭", args);
  }
}
function foo(...args) {
  this.eat(args)
}

你可以这样，此时调用的时候 foo 的函数 this 就指向了 obj 但是只是这一次调用哦，下次 this 是指向 window 的

console.log(foo.call(obj, 123, 456)); / / 吃饭 [ 123, 456 ]

调用结果 ：传入 this 和参数立即执行函数

apply.

@params1 需要指向this

@params2 需要携带的参数传入的参数数据类型为 Array

let obj = {
  eat: function (args) {
    console.log("吃饭", args);
  }
}
function foo(...args) {
  this.eat(args)
}

console.log(foo.apply(obj, [1, 2, 3])); // 吃饭 [1，2，3 ]

调用结果 ：传入 this 和参数，立即执行

bind

@params1 需要指向this

@params2 需要携带的参数

let obj = {
  eat: function (args) {
    console.log("吃饭", args);
  }
}
function foo(...args) {
  this.eat(args)
}

console.log(foo.bind(obj, 1, 2, 3)()); //吃饭 [ 1, 2, 3 ]

调用结果：传入 this 和参数返回一个新的函数，不会立即执行

总结

call 函数传入绑定 this的对象，携第二个参数以参数列表形式传入并会立即执行

apply 函数传入绑定 this的对象第二个参数以数组的形式传入并会立即执行

bind 函数传入绑定 this的对象第二个参数以数组或参数列表的形式传入不会立即执行函数会返回一个新的函数自由调用

应用场景

利用call 实现构造函数原型继承

function Person(name, age, friends) {
  this.friends = friends
  this.name = name
  this.age = age
}
Person.prototype.eat = function () {
  console.log(`${this.name}在吃饭`);
}
Person.prototype.running = function () {
  console.log(`${this.name}去跑步了`);
}
function Student(study, name, age, friedns) {
  Person.call(this, name, age, friedns)
  this.study = study
}
function Teacher(plaseLoveStudent) {
  this.plaseLoveStudent = plaseLoveStudent
}
//继承 person 
Student.prototype = new Person()
const stu = new Student('语文', "张三", 18, ['王安石'])
const stu2 = new Student('数学', "李四", 18, ['哈利波特'])
const tec = new Teacher("王安怡")
console.log(stu === stu2);
console.log(stu);
console.log(stu.friends);
console.log(stu2.friends);

简单实现

call

实现思路：

1:在Function 原型身上添加一个方法。

2：mycall 接受两个参数一个是绑定的 this，还有就是参数列表

3：保存调用者，其实这里更严谨一点还需要判断调用者的类型

4：判断传入的thisArgs 是不是 undefined 或者 null 如果是则 this指向 window 否则将绑定的 this封装成一个对象

5：然后将函数本身保存在上面封装好的对象中

6：调用并传入args

7：完成实现 this指向的改变

Function.prototype.mycall = function (thisArgs, ...args) {
  /**
   * 
   * 保存this(当前调用者)
   * 
   */
  const newFunc = this
  // 在当前调用者 this身上 保存 调用者
  thisArgs = (thisArgs !== undefined && thisArgs !== null) ? Object(thisArgs) : window
  thisArgs.func = newFunc
  thisArgs.func(...args)
}

apply

apply 就不说了实现思路是一样的只不过传入的参数不一样做一个判断就行了

Function.prototype.myapply = function (thisArgs, argArray) {
  if (!(argArray instanceof Array)) {
    throw '参数类型限定为 Array'
  }
  else {
    const func = this
    thisArgs = (thisArgs !== undefined &amp;&amp; thisArgs !== null) ? Object(thisArgs) : window
    thisArgs.fn = func
    thisArgs.fn(argArray)
  }
}

bind

bind 跟 apply call 有一些区别

bind 会返回一个新的函数，所以我们在内部需要自己定义一个函数给返回出去，并且，可能出现返回新函数调用时继续传入参数所以我们需要将参数合并

Function.prototype.mybind = function (thisArgs, ...argArray) {
  const oldFunc = this
  console.log(this);
  thisArgs = (thisArgs !== undefined && thisArgs !== null) ? Object(thisArgs) : window
  function proxyFn(...args) {
    thisArgs.func = oldFunc
    const funcCallResult = thisArgs.func([...argArray, ...args]) // 合并两次的 参数
    delete thisArgs.func
    return funcCallResult
  }
  return proxyFn
}

谢谢，到此就完成了简单版的 call apply bind 的实现，更多关于JS call apply bind方法的资料请关注其它相关文章！

加载全部内容