共计 795 个字符,预计需要花费 2 分钟才能阅读完成。
this 的指向(简单描述版)
函数的调用
在 JS 的面向对象中 this 是表示函数调用相关联的对象(函数的上下文)。所以要想了解 this 的指向,我们先要清楚函数的调用的方式
1. 作为函数调用
function add(a,b) {
return a + b;
}
add(1,2);
以上代码就是函数作为函数直接被调用,那么在这种情况下,函数上下文 (this) 就有两种可能性质
在浏览器环境中,this 指向了 window 对象
在严格模式下将会是 undefined
2. 作为方法被调用
var method = {};
method.add = function () {};
method.add();
当一个函数被赋值给一个对象属性,并且通过对象属性引用的方式时候,函数就会被作为对象的方法被调用。那么在这种情况下,this 指向的就是引用该方法的宿主对象
3. 作为构造函数调用
let person = new Person();
在使用 new 的时候会有如下动作
创建一个新对象
该对象作为 this 参数传递给构造函数,成为构造函数的上下文
新构造函数对象作为 new 的返回值
4. 使用 call,apply 方法调用
function arguNum() {
var result = 0;
for(var i = 0; i < arguments.length; i++) {
result += arguments[i];
}
this.result = result;
}
var obj1 = {};
var obj2 = {};
arguNum.apply(obj1, [1,2,3]); // 6
arguNum.call(obj2, 1,2,3); // 6
使用 call,apply 可以改变 this 的指向,call&apply 区别在于传递的参数是通过什么方式,call 传递的是参数列表,apply 传递的是一个数组。
结语
关于 this 的指向是前端面试中经常出现的问题,以上只是暂时简短总结了一下结果而已,后面会对各个函数调用的方式进行深入解析。