* THIS:
全局上下文中的THIS是WINDOW;
块级上下文中没有自己的THIS,它的THIS是继承所在上下文中的THIS的;【和箭头函数类似。】
在函数的私有上下文中,THIS的情况会多种多样,也是接下重点研究的.
*
* THIS不是执行上下文(EC才是执行上下文),THIS是执行主体
* 例如:刘德华拿着加了五个鸡蛋的鸡蛋灌饼去北京大饭店吃早餐(事情本身是吃早餐,刘德华吃早餐,这件事情的主体是刘德华【THIS】,在北京饭店吃,北京饭店是事情发生所在的上下文【EC】)
*
*
* 如何区分执行主体?
* 1. 事件绑定:给元素的某个事件行为绑定方法,当事件行为触发,方法执行,方法中的THIS是当前元素本身(特殊:IE6~8中基于attachEvent方法实现的DOM2事件绑定,事件触发,方法中的THIS是WINDOW,而不是元素本身)。
*
* 2. 普通方法执行(包含自执行函数执行、普通函数执行、对象成员访问调取方法执行等):只需要看函数执行的时候,方法名前面是否有“点”,有“点”,“点”前面是谁,THIS就是谁,没有“点”,THIS就是WINDOW[非严格模式]/UNDEFINED[严格模式]。
*
* 3. 构造函数执行(NEW XXX):构造函数体中的THIS是当前类的实例。
*
* 4. ES6中提供了ARROW FUNCTION(箭头函数): 箭头函数没有自己的THIS,它的THIS是继承所在上下文中的THIS。
*
* 5. 可以基于CALL/APPLY/BIND等方式,强制手动改变函数中的THIS指向:这三种模式是很直接很暴力的(前三种情况在使用这三个方法的情况后,都以手动改变的为主)。
// 事件绑定 DOM0 DOM2
let body = document.body;
body.onclick = function () {
// 事件触发,方法执行,方法中的THIS是BODY
console.log(this);
};
body.addEventListener('click', function () {
console.log(this); // => BODY
});
// IE6~8中的DOM2事件绑定
box.attachEvent('onclick', function () {
console.log(this); // => WINDOW
});
// ----------------------------------
// IIFE
(function () {
console.log(this); // => window
})();
// ----------------------------------
let obj = {
fn: (function () {
console.log(this); // => window
return function () {}
})() //把自执行函数执行的返回值赋值给OBJ.FN
};
// ----------------------------------
function func() {
console.log(this);
}
let obj = {
func: func
};
func(); // => 方法中的THIS: WINDOW 【前面没有点,window调用func】
obj.func(); // => 方法中的THIS: OBJ【前面有点,obj调用func】
// ----------------------------------
// => 数组实例基于原型链机制,找到ARRAY原型上的SLICE方法([].slice),然后再把SLICE方法执行,此时SLICE方法中的THIS是当前的空数组
[].slice();
Array.prototype.slice(); // => SLICE方法执行中的THIS:Array.prototype
[].__proto__.slice(); // => SLICE方法执行中的THIS:[].__proto__ === Array.prototype
// ----------------------------------
function func() {
// THIS => WINDOW
console.log(this);
}
document.body.onclick = function () {
// THIS => BODY
func();
};
// ----------------------------------
function Func() {
this.name = "F";
// => 构造函数体中的THIS在“构造函数执行”的模式下,是当前类的一个实例,并且THIS.XXX = XXX是给当前实例设置的私有属性
console.log(this);
}
Func.prototype.getNum = function getNum() {
// 而原型上的方法中的THIS不一定都是实例,主要看执行的时候,“点”前面的内容
console.log(this);
};
let f = new Func; // Func {name: "F"}
f.getNum(); // Func {name: "F"}
f.__proto__.getNum(); // {getNum: ƒ, constructor: ƒ}
Func.prototype.getNum(); // {getNum: ƒ, constructor: ƒ}
// ----------------------------------
let obj = {
func: function () {
console.log(this);
},
sum: () => {
console.log(this);
}
};
obj.func(); // => THIS:OBJ
obj.sum(); // => THIS是所在上下文(EC(G))中的THIS: WINDOW
obj.sum.call(obj); // => THIS:WINDOW,箭头函数是没有THIS,所以哪怕强制改也没用
// ----------------------------------
let obj = {
i: 0,
// func:function(){}
func() {
// THIS: OBJ
let _this = this;
setTimeout(function () {
// THIS:WINDOW 回调函数中的THIS一般都是WINDOW(但是有特殊情况)
_this.i++;
console.log(_this);
}, 1000);
}
};
obj.func();
// ----------------------------------
let obj = {
i: 0,
func() {
setTimeout(function () {
// 基于BIND把函数中的THIS预先处理为OBJ
this.i++;
console.log(this);
}.bind(this), 1000);
}
};
obj.func();
// ----------------------------------
// 建议不要乱用箭头函数(部分需求用箭头函数还是很方法便的)
let obj = {
i: 0,
func() {
setTimeout(() => {
// 箭头函数中没有自己的THIS,用的THIS是上下文中的THIS,也就是OBJ
this.i++;
console.log(this);
}, 1000);
}
};
obj.func();