this

this作用域内存

1. 概念

  • this：当前行为执行的主体（谁执行的这个行为）；
  • context：当前行为执行的环境；（在哪儿执行的这个行为）

  • 两者无关系

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function eat(){
        this---> someone
    }
    someone.eat();
    ~function(){
        someone.eat();
        this-->someone
    }();

  • 上面someone.eat();this始终是执行者someone跟在哪儿执行无关；

  • 也跟函数在哪儿定义的无关；

2. 如何区分this

  • 非严格模式下：默认都是window在执行，所以this–>window
  • 严格模式：没写就是没执行主体，this–>undefined

2.1 函数执行时，函数名前有无 .

  • 有则.前面是谁this就是谁；
  • 没有，this就是window/undefined；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function fn(){
    console.log(this);
}
   
var obj={fn:fn};
fn(); //this-->window
obj.fn(); //this-->obj
   
function sum(){
//this-->window
    fn(); //this-->window
}
sum();
   
var obj2={
    add:function(){
    //this--window
        fn();//this-->window
    }
};
obj2.add();

2.2 自执行函数中的this永远是window（不可能出现.）

1
2
3
4
5
6
7
8
9
var obj={
    fn:(function(i){
        //this-->window/undefined
        return function(){
            //this-->obj
        }
    })(2)
}
obj.fn();

2.3元素绑定某事件，当某事件触发时，执行对应的方法，方法中的this就是当前元素；

1
2
3
4
5
6
7
8
9
function fn() {
    console.log(this);
}
document.getElementById('div').onclick = fn;//fn中的this-->#div;
document.getElementById('div').onclick = function(){
//this-->#div
    fn();//this-->window
};

2.4 构造函数中，函数体内的this.xxx=xxx中的this是当前实例

1
2
3
4
function Fn(){
    this.x=100;//this-->f
}
var f=new Fn;

2.5使用call/apply改变this指向（优先级别最高）