热点面试题:JS 中 call, apply, bind 概念、用法、区别及实现?

简介: 热点面试题:JS 中 call, apply, bind 概念、用法、区别及实现?

热点面试题:JS 中 call, apply, bind 概念、用法、区别及实现?


概念:

  • function.call(thisArg, arg1, arg2, ...)
  • function.apply(thisArg, [arg1, arg2, ...])
  • function.bind(thisArg, arg1, arg2, ...)
  • • 三者都是改变 this 指向,通过一个参数或多个参数来调用一个函数的。

用法:

let obj = {
    name: "哈哈",
    sayName: function () {
        console.log("sayName", this.name);
        return this.name;
    },
    eat: function (food1, food2) {
        console.log("eat", food1, food2);
    },
};
let obj2 = {
    name: "是的",
};
obj.sayName.call(obj2); // sayName 是的
obj.eat.call(obj2, "鱼", "肉"); // eat 鱼 肉
obj.eat.apply(obj2, ["鱼", "肉"]); // e at 鱼 肉
obj.eat.bind(obj2, "鱼", "肉"); // 不会调用,需要一个结果来接收
let res = obj.eat.bind(obj2, "鱼", "肉");
res(); // eat 鱼 肉

区别:

  • • call 与 bind 的区别?
  • call 会直接调用,而 bind 会创建一个新的函数作为一个返回值进行调用, 而其余参数将作为新函数的参数,供调用时使用
  • • call 与 apply 的区别?
  • • 主要区别在第二个参数中,call 接受的是一个参数列表,也就是一个个参数,而 apply 接受的是一个包含多个参数的数组

实现:

  • function.call(thisArg, arg1, arg2, ...)
Function.prototype.myCall = function (context, ...args) {
    // 条件判断,判断当前调用的对象是否为函数,
    if (Object.prototype.toString.call(this).slice(8, -1) != "Function")
        throw new Error("type error");
    // 判断传入上下文对象是否存在,如果不存在,则设置为 window
    if (!context || context === null) context = window;
    // 创建唯一的 key 值,作为构建的 context 内部方法名
    let fn = Symbol();
    // 将 this 指向调用的 call 函数
    context[fn] = this;
    // 执行函数并返回结果 === 把自身作为传入的 context 的方法进行调用
    return context[fn](...args);
};
let obj = {
    name: "哈哈",
    sayName: function () {
        console.log("sayName", this.name);
        return this.name;
    },
    eat: function (food1, food2) {
        console.log("eat", food1, food2);
    },
};
let obj2 = {
    name: "是的",
};
obj.sayName.myCall(obj2);
  • function.apply(thisArg, [arg1, arg2, ...])
Function.prototype.MyApply = function (context, args) {
    // 条件判断,判断当前调用的对象是否为函数,
    if (Object.prototype.toString.call(this).slice(8, -1) != "Function")
        throw new Error("type error");
    // 判断传入上下文对象是否存在,如果不存在,则设置为 window
    if (!context || context === null) context = window;
    // 创建唯一的 key 值,作为构建的 context 内部方法名
    let fn = Symbol();
    // 将 this 指向调用的 call 函数
    context[fn] = this;
    // 执行函数并返回结果 === 把自身作为传入的 context 的方法进行调用
    return context[fn](...args);
};
let obj = {
    name: "哈哈",
    sayName: function () {
        console.log("sayName", this.name);
        return this.name;
    },
    eat: function (food1, food2) {
        console.log("eat", food1, food2);
    },
};
let obj2 = {
    name: "是的",
};
obj.sayName.MyApply(obj2, []);
  • function.bind(thisArg, arg1, arg2, ...)
Function.prototype.MyApply = function (context, args) {
    // 条件判断,判断当前调用的对象是否为函数,
    if (Object.prototype.toString.call(this).slice(8, -1) != "Function")
        throw new Error("type error");
    // 判断传入上下文对象是否存在,如果不存在,则设置为 window
    if (!context || context === null) context = window;
    // 创建唯一的 key 值,作为构建的 context 内部方法名
    let fn = Symbol();
    // 将 this 指向调用的 call 函数
    context[fn] = this;
    // 执行函数并返回结果 === 把自身作为传入的 context 的方法进行调用
    return context[fn](...args);
};
let obj = {
    name: "哈哈",
    sayName: function () {
        console.log("sayName", this.name);
        return this.name;
    },
    eat: function (food1, food2) {
        console.log("eat", food1, food2);
    },
};
let obj2 = {
    name: "是的",
};
obj.sayName.MyApply(obj2, []);

function.bind(thisArg, arg1, arg2, ...)

Function.prototype.myBind = function (context, ...args) {
    if (!context || context === null) {
        context = window;
    }
    // 创造唯一的key值  作为我们构造的context内部方法名
    let fn = Symbol();
    context[fn] = this;
    let _this = this;
    //  bind情况要复杂一点
    const result = function (...innerArgs) {
        // 第一种情况: 若是将 bind 绑定之后的函数当作构造函数,通过 new 操作符使用,则不绑定传入的 this,而是将 this 指向实例化出来的对象
        // 此时由于new操作符作用  this指向result实例对象  而result又继承自传入的_this 根据原型链知识可得出以下结论
        // this.__proto__ === result.prototype   //this instanceof result =>true
        // this.__proto__.__proto__ === result.prototype.__proto__ === _this.prototype; //this instanceof _this =>true
        if (this instanceof _this === true) {
            // 此时this指向指向result的实例  这时候不需要改变this指向
            this[fn] = _this;
            this[fn](...[...args, ...innerArgs]); //这里使用es6的方法让bind支持参数合并
        } else {
            // 如果只是作为普通函数调用  那就很简单了 直接改变this指向为传入的context
            context[fn](...[...args, ...innerArgs]);
        }
    };
    // 如果绑定的是构造函数 那么需要继承构造函数原型属性和方法
    // 实现继承的方式: 使用Object.create
    result.prototype = Object.create(this.prototype);
    return result;
};
//用法如下
function Person(name, age) {
    console.log(name); //'我是参数传进来的name'
    console.log(age); //'我是参数传进来的age'
    console.log(this); //构造函数this指向实例对象
}
// 构造函数原型的方法
Person.prototype.say = function () {
    console.log(123);
};
let obj = {
    objName: "我是obj传进来的name",
    objAge: "我是obj传进来的age",
};
// 普通函数
function normalFun(name, age) {
    console.log(name); //'我是参数传进来的name'
    console.log(age); //'我是参数传进来的age'
    console.log(this); //普通函数this指向绑定bind的第一个参数 也就是例子中的obj
    console.log(this.objName); //'我是obj传进来的name'
    console.log(this.objAge); //'我是obj传进来的age'
}
// 先测试作为构造函数调用
let bindFun = Person.myBind(obj, "我是参数传进来的name");
let a = new bindFun("我是参数传进来的age");
a.say(); //123
// 再测试作为普通函数调用
// let bindFun = normalFun.myBind(obj, '我是参数传进来的name')
//  bindFun('我是参数传进来的age')

文章特殊字符描述


问题标注 Q:(question)答案标注 R:(result)注意事项标准:A:(attention matters)详情描述标注:D:(detail info)总结标注:S:(summary)分析标注:Ana:(analysis)提示标注:T:(tips)

相关文章
|
3天前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
14天前
|
JavaScript 前端开发
JS高级—call(),apply(),bind()
【10月更文挑战第17天】call()`、`apply()`和`bind()`是 JavaScript 中非常重要的工具,它们为我们提供了灵活控制函数执行和`this`指向的能力。通过合理运用这些方法,可以实现更复杂的编程逻辑和功能,提升代码的质量和可维护性。你在实际开发中可以根据具体需求,选择合适的方法来满足业务需求,并不断探索它们的更多应用场景。
6 1
|
19天前
|
JavaScript 前端开发
JS try catch用法:异常处理
【10月更文挑战第12天】try/catch` 是 JavaScript 中非常重要的一个特性,它可以帮助我们更好地处理程序中的异常情况,提高程序的可靠性和稳定性。
12 1
|
24天前
|
JavaScript 前端开发
js的math.max的用法
js的math.max的用法
21 6
|
22天前
|
设计模式 JavaScript 前端开发
探索JavaScript中的闭包:从基础概念到实际应用
在本文中,我们将深入探讨JavaScript中的一个重要概念——闭包。闭包是一种强大的编程工具,它允许函数记住并访问其所在作用域的变量,即使该函数在其作用域之外被调用。通过详细解析闭包的定义、创建方法以及实际应用场景,本文旨在帮助读者不仅理解闭包的理论概念,还能在实际开发中灵活运用这一技巧。
|
24天前
|
JavaScript
JS中的splice的三种用法(删除,替换,插入)
JS中的splice的三种用法(删除,替换,插入)
112 4
|
25天前
|
存储 JavaScript 前端开发
JavaScript 对象的概念
JavaScript 对象的概念
34 4
|
23天前
|
缓存 JavaScript 前端开发
深入了解JavaScript的闭包:概念与应用
【10月更文挑战第8天】深入了解JavaScript的闭包:概念与应用
|
19天前
|
前端开发 JavaScript 程序员
【从前端入门到全栈】Node.js 之核心概念
【从前端入门到全栈】Node.js 之核心概念
|
23天前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:概念与应用
【10月更文挑战第8天】深入理解JavaScript中的闭包:概念与应用