探究callbindapply知识点

call、bind、apply 知识点

一、食用方式

• apply

function.apply(obj, [param1,params2,...])
// obj: 要绑定的 this
// 第二个参数: 类数组或数组，作为 function 的参数传入
// 立即执行

• call

function.call(obj, param1, param2, ...)
// obj: 要绑定的 this
// 第二个参数: 函数运行的参数，用逗号隔开
// 立即执行

• bind

function.bind(obj, param1, param2, ...)
// obj: 要绑定的 this
// 第二个参数: 函数运行的参数，用逗号隔开
// 返回一个函数

二、使用场景

基本理念: 借用方法，修改 this 指向

• 获取数据类型

const params = 'ahwgs'
const toString = Object.prototype.toString
const type = toString.call(params)
console.log('数据类型',type) // [object String]

• 类数组借用数组的方法

var arrayLike = {
  0: 'OB',
  1: 'Koro1',
  length: 2
}
Array.prototype.push.call(arrayLike, '添加元素 1', '添加元素 2');
console.log(arrayLike) // {"0":"OB","1":"Koro1","2":"添加元素 1","3":"添加元素 2","length":4}

借用数组的 push 方法，向 arrayLike 中push新数据

三、手写实现

• 手写 call 实现

Function.prototype.myCall = function(context,...arr) {if (context === null || context === undefined) {// 指定为 null 和 undefined 的 this 值会自动指向全局对象(浏览器中为 window)
     context = window
    } else {context = Object(context) // 值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的实例对象
    }
    const specialPrototype = Symbol('特殊属性 Symbol') // 用于临时储存函数
    context[specialPrototype] = this; // 函数的 this 指向隐式绑定到 context 上
    let result = context[specialPrototype](...arr); // 通过隐式绑定执行函数并传递参数
    delete context[specialPrototype]; // 删除上下文对象的属性
    return result; // 返回函数执行结果
 }

• 手写apply

Function.prototype.myApply = function (context) {if (context === null || context === undefined) {context = window // 指定为 null 和 undefined 的 this 值会自动指向全局对象(浏览器中为 window)
    } else {context = Object(context) // 值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的实例对象
    }
    // JavaScript 权威指南判断是否为类数组对象
    function isArrayLike(o) {
      if (o &&                                    // o 不是 null、undefined 等
        typeof o === 'object' &&                // o 是对象
        isFinite(o.length) &&                   // o.length 是有限数值
        o.length >= 0 &&                        // o.length 为非负值
        o.length === Math.floor(o.length) &&    // o.length 是整数
        o.length < 4294967296)                  // o.length < 2^32
        return true
      else
        return false
    }
    const specialPrototype = Symbol('特殊属性 Symbol') // 用于临时储存函数
    context[specialPrototype] = this; // 隐式绑定 this 指向到 context 上
    let args = arguments[1]; // 获取参数数组
    let result
    // 处理传进来的第二个参数
    if (args) {
      // 是否传递第二个参数
      if (!Array.isArray(args) && !isArrayLike(args)) {throw new TypeError('myApply 第二个参数不为数组并且不为类数组对象抛出错误');
      } else {args = Array.from(args) // 转为数组
        result = context[specialPrototype](...args); // 执行函数并展开数组，传递函数参数
      }
    } else {result = context[specialPrototype](); // 执行函数}
    delete context[specialPrototype]; // 删除上下文对象的属性
    return result; // 返回函数执行结果
};

• 手写bind

Function.prototype.myBind = function (objThis, ...params) {const thisFn = this; // 存储源函数以及上方的 params(函数参数)
    // 对返回的函数 secondParams 二次传参
    let fToBind = function (...secondParams) {
        const isNew = this instanceof fToBind // this 是否是 fToBind 的实例 也就是返回的 fToBind 是否通过 new 调用
        const context = isNew ? this : Object(objThis) // new 调用就绑定到 this 上, 否则就绑定到传入的 objThis 上
        return thisFn.call(context, ...params, ...secondParams); // 用 call 调用源函数绑定 this 的指向并传递参数, 返回执行结果
    };
    if (thisFn.prototype) {
        // 复制源函数的 prototype 给 fToBind 一些情况下函数没有 prototype，比如箭头函数
        fToBind.prototype = Object.create(thisFn.prototype);
    }
    return fToBind; // 返回拷贝的函数
};

关于

• 本文首发于探究 call、bind、apply 知识点
• 参考前端面试之道