如何改变函数的this指向
本篇内容介绍了“如何改变函数的this指向”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
成都创新互联公司主营宁河网站建设的网络公司,主营网站建设方案,重庆APP开发,宁河h5小程序开发搭建,宁河网站营销推广欢迎宁河等地区企业咨询
如果是函数声明,那么函数内部的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指向”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!
网站题目:如何改变函数的this指向
文章位置:http://myzitong.com/article/ghcpdp.html