function myCall(fn,context = window){\n context.fn = fn;//将函数fn挂载到对象context上\n const args = [...arguments].slice(2);//myCall中的前两个参数(fn,context)不是我们需要的\n const res = context.fn(...args);\n delete context.fn;//用完删除，避免对传入对象的属性造成污染\n return res;\n}\n这样我们就实现了 call 函数该有的功能，原生的 call 函数是写到 Function.prototype 上的方法，我们也尝试在函数的原型上实现一个 myCall 函数，只需稍加改造即可，代码实现如下：\n\nFunction.prototype.myCall = function(context = window){\n context.fn = this;\n const args = [...arguments].slice(1);//少了一个参数\n const res = context.fn(...args);\n delete context.fn;\n return res;\n}\n处理边缘情况\n上文在函数原型上实现的 myCall 函数，还有优化的空间，有一些边缘的情况，可能会导致报错，比如把要指向的对象指向一个原始值，代码如下：\n\nfn.myCall(0); // Uncaught TypeError: context.fn is not a function\n参考一下原生call函数是怎么解决的：\n\nvar userName = "xxx";\nconst person = {\n userName: "zhangsan",\n};\n \nfunction fn(type) {\n console.log(type, "->", this.userName);\n}\n \nfn.call(0, "number");\nfn.call(1n, "bigint");\nfn.call(false, "boolean");\nfn.call("123", "string");\nfn.call(undefined, "undefined");\nfn.call(null, "null");\nconst a = Symbol("a");\nfn.call(a, "symbol");\nfn.call([], "引用类型");\nundefined 和 null 指向了 window，原始类型和引用类型都是 undefined。\n\n其实是因为，原始类型指向对应的包装类型，引用类型就指向这个引用类型，之所以输出值都是 undefined，是因为这些对象上都没有 userName 属性。\n\n改造一下我们的 myCall 函数，实现原始类型的兼容，代码如下：\n\nFunction.prototype.myCall = function (context = window) {\n if (context === null || context === undefined) {\n context = window; // undefined 和 null 指向 window\n } else {\n context = Object(context); // 原始类型就包装一下\n }\n context.fn = this;\n const args = [...arguments].slice(1);\n const res = context.fn(...args);\n delete context.fn;\n return res;\n};\n还有另外一种边缘情况，假设对象上本来就有一个 fn 属性，执行下面的调用，对象上的 fn 属性会被删除，代码如下：\n\nconst person = {\n userName: "zhangsan",\n fn: 123,\n};\n \nfunction fn() {\n console.log(this.userName);\n}\n \nfn.myCall(person);\n \nconsole.log(person.fn); // 输出 undefined，本来应该输出 123\n因为对象上本来的 fn 属性和 myCall 函数内部临时定义的 fn 属性重名了，可以用 Symbol 来防止对象属性名冲突问题，继续改造 myCall 函数，代码实现如下：\n\nFunction.prototype.myCall = function (context = window) {\n if (context === null || context === undefined) {\n context = window;\n } else {\n context = Object(context);\n }\n const fn = Symbol("fn"); // 用 symbol 处理一下\n context[fn] = this;\n const args = [...arguments].slice(1);\n const res = contextfn;\n delete context[fn];\n return res;\n}
