美文网首页
手写 JavaScript 中的 apply、call 和 bi

手写 JavaScript 中的 apply、call 和 bi

作者: 奋斗_登 | 来源:发表于2023-10-24 22:40 被阅读0次

    手写apply、call 和 bind 这些方法可以帮助你深入理解 JavaScript 中函数的调用方式以及上下文(this 值)的作用。这有助于提高对 JavaScript 语言核心概念的理解。另外手写这些方法涉及到函数式编程原理,如高阶函数、柯里化等。这可以增进你对函数式编程的了解。
    以下是这些方法的手写实现:

    1. 手写 apply 方法

    Function.prototype.myApply = function(context, argsArray) {
      context = context || window; // 如果未提供上下文,则默认为全局对象(浏览器中是 window)
      const uniqueID = Symbol(); // 创建一个唯一的属性名,以避免与现有属性冲突
      context[uniqueID] = this; // 将当前函数赋值给上下文对象的属性
      const result = context[uniqueID](...argsArray); // 调用函数
      delete context[uniqueID]; // 删除临时属性
      return result;
    };
    
    // 示例用法
    function greet(name) {
      console.log(`Hello, ${name}! My name is ${this.name}.`);
    }
    
    const person = { name: 'John' };
    greet.myApply(person, ['Alice']);
    

    2.手写 call 方法

    Function.prototype.myCall = function(context, ...args) {
      context = context || window; // 如果未提供上下文,则默认为全局对象(浏览器中是 window)
      const uniqueID = Symbol(); // 创建一个唯一的属性名,以避免与现有属性冲突
      context[uniqueID] = this; // 将当前函数赋值给上下文对象的属性
      const result = context[uniqueID](...args); // 调用函数
      delete context[uniqueID]; // 删除临时属性
      return result;
    };
    
    // 示例用法
    function greet(name) {
      console.log(`Hello, ${name}! My name is ${this.name}.`);
    }
    
    const person = { name: 'John' };
    greet.myCall(person, 'Alice');
    

    3.手写 bind 方法

    Function.prototype.myBind = function(context, ...args) {
      const fn = this;
      return function (...innerArgs) {
        return fn.apply(context, args.concat(innerArgs));
      };
    };
    
    // 示例用法
    function greet(name) {
      console.log(`Hello, ${name}! My name is ${this.name}.`);
    }
    
    const person = { name: 'John' };
    const boundGreet = greet.myBind(person, 'Alice');
    boundGreet();
    

    这些手写的 call、apply 和 bind 方法实现了基本的功能,但不包括对参数和上下文的各种特殊情况的处理,真正的内置方法在实现时会更复杂。这些手写版本应该帮助你理解这些方法的基本原理。

    相关文章

      网友评论

          本文标题:手写 JavaScript 中的 apply、call 和 bi

          本文链接:https://www.haomeiwen.com/subject/lizsidtx.html