Explain the implementation of the call method in JS in detail

Abstract: This article will comprehensively and in detail analyze the implementation principle of the call method

This article is shared from HUAWEI CLOUD Community " About the implementation of call method in JavaScript, with detailed analysis! ", by CoderBin.

This article will comprehensively analyze the implementation principle of the call method in detail, and write out your own call method. I believe that the little friends who read this article can gain something from it.

Implementation of the call method

1. Function

Calling a function, you can pass in parameters, change this pointer

2. Overall steps

1. Boundary judgment (this, context)
2. Set the called function as a method of the object (incoming context) (change this pointer)
3. Call the function, get the return value, and return

3. Detailed steps

1. Boundary judgment

• Determine whether the current this is a function, otherwise return an error message
• Determine whether the incoming context parameter exists, use Object() to convert it into an object and assign it to context, otherwise assign window to context

2. Set the called function as a method of the object (incoming context) (change this pointer)
3. Call the function, get the return value, and return

• call the function and get the result
• Delete the fn function on the context
• return result

4. Code implementation

/**
 * !实现 binCall() 方法
 * @param {*} context 绑定的对象
 * @param  {...any} args 剩余参数
 * @returns 
 */
Function.prototype.binCall = function(context, ...args) {
 if (typeof this !== 'function') console.error('type Error'); // 1
  context = (context!==null && context!==undefined) ? Object(context) : window
 context.fn = this // 2
 const result = context.fn(...args) // 3
 delete context.fn;
 return result
}

5. Test the code

// 测试
function sum(num1, num2) {
  console.log('sum 被执行', this);
 return num1 + num2
}
// 原生的 call() 方法
console.log(sum.call({name: 'bin'},1,2));
// 自定义的 binCall() 方法
console.log(sum.binCall({name: 'bin'},1,2));

After testing the native call method and the handwritten binCall method, our manually implemented binCall method can also implement the function of the native call method.

6. Detailed analysis

1. this points to the function that called binCall() (implicit binding);
2. The incoming context parameter means: change the pointer of this to this parameter;
3. Changing the this point is actually adding a temporary method to the context with the value this;
4. When calling context.fn(), the pointing of this has been changed, and the parameters must be passed in using the spread operator
5. delete context.fn deletes the temporary method because it is no longer needed

7. Core Principles

By temporarily adding a method on the passed in object, the value of this method is the caller of the current binCall. Then context.fn(...argArray) calls this function, changes the point of this through implicit binding, and finally gets the result and returns.

 

Click Follow to learn about HUAWEI CLOUD's new technologies for the first time~

{{o.name}}

{{m.name}}