如何改变函数的this指向
本篇内容介绍了"如何改变函数的this指向"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
如果是函数声明，那么函数内部的this指向全局对象或者调用该函数的对象。
箭头函数的this绑定的是父级作用域内的this
使用call，apply，bind可以绑定this指向。其中bind是永久改变this指向并且不会立即执行。apply，call临时改变this指向并且立即执行。
apply，call不同之处在于调用的参数形式：
call（thisArg, arg1?, arg2?, arg3?…）第一个参数代表this指向，剩下的参数就是原函数的参数。
apply（thisArg, argArray?）第一个参数代表this指向，第二个参数是以数组的形式传递参数。
/* bind, call, apply调用示例 */
var obj = {
x: 'obj',
getX: function（） {
// 注意这里不能使用箭头函数
return this.x;
}
};
// 调用 obj 对象上的函数属性， this就会绑定为obj
// 'obj'
console.log（obj.getX（））;
var x = 'window';
function target（a, b, c） {
console.log（a, b, c）;
return this.x;
}
/* bind */
// undefined undefined undefined
// 'window'
console.log（target（））;
const targetBound = target.bind（obj, 1）; // 此时targetBound就是一个改变了this指向的target
// 1 2 3
// 'obj'
console.log（targetBound（2, 3））;
/* call */
// 4 5 6
// 'obj'
console.log（target.call（obj, 4, 5, 6））;
/* apply */
// 7 8 9
// 'obj'
console.log（target.apply（obj, [7, 8, 9]））;
自定义实现call，apply，bind
这三个函数都有很强的错误处理功能，假如传入的thisArg是一个基本类型，也会被使用包装类替换，虽然不会报错，但是不推荐这样写，尽量传递复杂类型的变量作为thisArg。
自定义实现myBind，myCall，myApply
// 先定义一个函数将任意类型都转换成对象，用于指向this
function anyToObj（value） {
// symbol, bigint 就不判断了，直接在default中
switch （typeof value） {
case 'boolean':
return new Boolean（value）;
case 'number':
return new Number（value）;
case 'string':
return new String（value）;
case 'undefined':
return this;
case 'object':
if （value === null） return this; // 这里的this就指向了全局对象
return value;
default:
return value;
}
}
/* myBind */
Function.prototype.myBind = function （thisArg, …argArray） {
// 防止出现 const myBind = Function.prototype.myBind; myBind（）;
if （typeof this !== 'function'） {
throw new TypeError（'myBind must be called on a function'）;
}
const that = this; // this 就指向 f.myBind（） 的 f
const thatArg = anyToObj（thisArg）; // 处理一下thisArg
const myBound = function （…args） {
// 指定唯一的键
const tempKey = Symbol（'__innerFunction__'）;
thatArg.tempKey = that; // 将 that 函数赋值给一个对象的属性
let ret;
if （this instanceof myBound） {
// 调用 myBind 之后返回的是 myBound，假如调用 new myBound（），就会进这个分支
ret = new thatArg.tempKey（…argArray.concat（args））;
} else {
// 这里是调用 myBound（），这样调用 tempKey 方法里的 this 就指向了 thatArg
ret = thatArg.tempKey（…argArray.concat（args））;
}
// 不会对对象造成污染
delete thatArg.tempKey;
return ret;
};
return myBound;
};
/* myCall */
// 与 myBind 相比直接调用了
Function.prototype.myCall = function （thisArg, …argArray） {
if （typeof this !== 'function'） {
throw new TypeError（'myCall must be called on a function'）;
}
const thatArg = anyToObj（thisArg）;
const tempKey = Symbol（'__innerFunction__'）;
thatArg.tempKey = this;
const ret = thatArg.tempKey（…argArray）;
delete thatArg.tempKey;
return ret;
};
/* myApply */
// 与 myCall 相比，第二个参数希望是数组形式，多了个 CreateListFromArrayLike 用于转化 argArray
Function.prototype.myApply = function （thisArg, argArray） {
if （typeof this !== 'function'） {
throw new TypeError（'myApply must be called on a function'）;
}
const CreateListFromArrayLike = function （val） {
// 同样缺乏 bigint 的处理，直接放在 default 中
switch （typeof val） {
case 'string':
case 'number':
case 'boolean':
case 'symbol':
throw new TypeError（'CreateListFromArrayLike called on non-object'）;
case 'object':
if （Array.isArray（val）） return val;
if （val === null） return [];
return Array.from（val）;
default:
return [];
}
};
// 检测 argArray 的类型
const tempArgArray = CreateListFromArrayLike（argArray）;
const thatArg = anyToObj（thisArg）;
const tempKey = Symbol（'__innerFunction__'）;
thatArg.tempKey = this;
const ret = thatArg.tempKey（…tempArgArray）;
delete thatArg.tempKey;
return ret;
};
// 这样 myBind，myCall，myApply就完成了，下面进行测试
var obj = {
x: 'obj',
getX: function（a, b, c） {
console.log（a, b, c）;
return this.x;
}
}
var x = 'window';
// 1 2 3
// 'obj'
console.log（obj.getX（1, 2, 3））;
// target变成一个全局函数，this 指向全局对象
const target = obj.getX;
// 1 2 3
// 'window'
console.log（target（1, 2, 3））;
/* myBind */
const targetBound = target.myBind（obj, 1）;
// 1 2 3
// 'obj'
console.log（targetBound（2, 3））;
/* myCall */
// 4 5 6
// 'obj'
console.log（target.myCall（obj, 4, 5, 6））;
/* myApply */
// 7 8 9
// 'obj'
console.log（target.myApply（obj, [7, 8, 9]））;
"如何改变函数的this指向"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！
