javascript中的call方法的另一种实现方式-更接近原方法

上集我们说到对应的我们自己实现的call方法还是有一点纰漏，这里我们就解决它

// 一、预备知识（简单介绍）
// 1、Function.prototype.call()
// 语法：function.call(thisArg, arg1, arg2, ...)
// 参数：thisArg可选的。在function函数运行时使用的this值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为null或undefined时会自动替换为指向全局对象，原始值会被包装。arg1, arg2, ...指定的参数列表。
// 返回值：使用调用者提供的this值和参数调用该函数的返回值。若该方法没有返回值，则返回undefined

// 用法：
// call() 允许为不同的对象分配和调用属于一个对象的函数/方法。
// call() 提供新的 this 值给当前调用的函数/方法。你可以使用 call 来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法）
// 2、this指针
// 在绝大多数情况下，函数的调用方式决定了this的值（运行时绑定）。this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。ES5 引入了bind方法来设置函数的this值，而不用考虑函数如何被调用的。箭头函数不提供自身的 this 绑定（this的值将保持为闭合词法上下文的值）。当前执行上下文（global、function 或 eval）的一个属性，在非严格模式下，总是指向一个对象，在严格模式下可以是任意值。无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this都指向全局对象。在函数内部，this的值取决于函数被调用的方式。在严格模式下，如果进入执行环境时没有设置this的值，this会保持为undefined 。可以使用globalThis获取全局对象，无论你的代码是否在当前上下文运行。

// 3、原型对象
// JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象，对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链 (prototype chain)，它解释了为何一个对象会拥有定义在其他对象中的属性和方法。这些属性和方法定义在 Object 的构造器函数 (constructor functions) 之上的prototype属性上，而非对象实例本身

// 4、Symbol
// symbol 是一种基本数据类型。Symbol() 函数会返回 symbol 类型的值，该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象；它的静态方法会暴露全局的 symbol 注册，且类似于内建对象类，但作为构造函数来说它并不完整，因为它不支持语法："new Symbol()"。每个从 Symbol() 返回的 symbol 值都是唯一的。一个 symbol 值能作为对象属性的标识符；这是该数据类型仅有的目的

// 5、Object.defineProperty()
// Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象，第一个参数是对象，第二个是对象里面的属性，后面的第三个是参数配置，当对象对这个属性设置会触发里面的set方法，获取会触发get方法我们可以在其中做一些我们自己的操作，这两个方法是默认就有的，当然我们可以显式声明出来再加添自己的逻辑


Function.prototype._call = function(context, ...args) {
    //globalThis是全局对象，在浏览器中，全局对象是 Window
    //注意这里我们将传入的对象和参数分开了
    context = context === null || context === void 0 ? globalThis : Object(context);
    //使用Symbol的原因：防止与提供新的 this 值的属性重复
    //这里的symbol是为了防止属性冲突
    const targetFn = Symbol('onlyKey');
    //下面这个Object.defineProperty常用于爬虫的hook代码，以及对应的vue2的响应式原理【有兴趣可以去源码看看】，在ES6还出现了Proxy的方式来实现且功能更强大
    Object.defineProperty(context, targetFn, {
        // enumerable：为true时，该属性才能够出现在对象的枚举属性中。
      enumerable: false,
      value: this,
    });
    //这里是调用对象的方法【再对象中方法其实也是一种属性】那么就会走对应的上面的Object.defineProperty中的get方法【默认就有的，我们也可以自己定义】，它的value是this,那个this就是context因为我们给的对象就是context也就是我们调用传入的obj
    const result = context[targetFn](...args);
    return result;
  };

  function add(a, b) {
    // 测试函数
    console.log(this)
    // { name: 'Alex-jsonk' }
    // 注意这里和上一集的已经不一样了和call方法一样了
    return a + b
}
let obj = {
    name: "Alex-jsonk"
}

console.log(add._call(obj, 1, 2));

//3

以上就是另一种写法，如果你面试前端工程师的时候只要写出一种已经超过大部分人了，当然我们只是为了最求技术的进步，成为顶端的人，我们必须精益求精，深入底层，下集再见。