JS系列总结笔记——3. 深入理解JS中的this

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
分析如图：