1. 定义
JS中的this代表的是当前行为执行的主体,context指的是当前行为执行的环境(区域)。
例如:我在餐厅吃饭和我在食堂吃饭,this都是我,改变的是执行环境。
2.判断this到底是谁
- 函数执行,首先看执行时函数名前是否有 “ . ”,有的话前面是谁this就是谁,没有的话this就是window。
function fn() {console.log(this);}
var obj = {fn: fn};
fn(); // this -> window;
obj.fn(); //this -> obj;
function sum() {
fn();
}
sum(); // this -> window
var oo = {
sum: function() {
fn();
}
};
oo.sum(); // this -> window
- 自执行函数中的this永远是window;
- 给document的某个元素绑定某个事件,执行时的this是该元素。
el.onclick = fn; // fn中的this是el
el.onclick = function() { fn(); } // fn中的this是window,匿名函数function中的this是el
- 匿名函数中的this指向window。(箭头函数除外)
var obj = {
id: 'awesome',
cool: function() {
setTimeout(()=>{
console.log(this);
},0);
}
}
obj.cool(); //输出obj
var obj = {
id: 'awesome',
cool: () => {
setTimeout(()=>{
console.log(this);
},0);
}
}
obj.cool(); //输出window
var obj = {
id: 'awesome',
cool: function() {
setTimeout(function() {
console.log(this);
},0);
}
}
obj.cool(); //输出window
- 回调函数中传入的函数实质是将函数当做参数传入,因此this指向也为window。
var obj = {
fn: function(){
console.log(this);
}
}
function fn(callback){
callback();
}
fn(obj.fn); //输出window
3. 实例
var num = 20;
var obj = {
num: 30,
fn: (function(num){
this.num *= 3;
num += 15;
var num = 45;
return function() {
this.num *= 4;
num += 20;
console.log(num);
}
})(num)
}
var fn = obj.fn;
fn();
obj.fn();
console.log(window.num, obj.num);
结果为 65 85 240 120
分析如图: