JS中的this详解

函数中的this指向和当前函数在哪定义的或者在哪执行的都没有任何关系
分析this指向的规律如下：

[非严格模式下]

1、自执行函数中的this永远是window

var obj = {
    fn:(function(i){
        //this --> window
        return function() {
            //this --> obj
        }
    })(0)
}
obj.fn();

2、给元素的某个行为绑定一个方法，当行为触发的时候，执行绑定的方法，此时方法中的this就是当前的元素


<div id="div1">有本事点我呀~~</div>
function fn(){
    console.log(this);
}
var obj = {
    fn:fn
}
fn();//this --> window;
obj.fn();//this --> obj;
document.getElementById("div1").onclick = fn();//fn中的this -->#div
document.getElementById("div1").onclick = function() {
    //this --> #div1
    fn();//fn在当我点击这个元素，执行这个匿名函数里面执行的fn,在执行时，前面没有“.”,在这个中的this --> window
};

3、方法执行，看方法名前面是否有”.”,有的话,”.”前面是谁this就是谁，没有的话this就是window


var obj = {
    fn : fn
};
function fn() {

}
fn(); // this --> undefined
obj.fn(); // this --> obj

在构造函数模式中，函数体中的this.xxx = xxx 中的this 是当前类的一个实例


function Fn() {
    this.x = 100; // this --> f
    this.getX = function () {
        console.log(this); // this --> f 因为getX方法执行的时候，"."前面是f,所以this是f
    }
}
var f = new Fn;
f.getX();

使用call/apply来改变this的指向（一旦遇到call/apply上诉四条都没有用）


var obj = {name: "Elle"};
function fn(num1,num2) {
    console.log(num1 + num2);
    console.log(this);
}
fn.call(obj,100,200); // 300 obj
fn.apply(obj,[100,200]); // 300 obj

[严格模式下]

“use strict”; // –> 告诉浏览器我们接下来编写的JS代码采用严格模式

1、自执行函数的this永远是undefined


var obj = {
    fn:(function(i){
        //this --> undefined
        return function() {
            //this --> obj
        }
    })(0)
}
obj.fn();

2、方法执行，看方法名前面是否有”.”,有的话,”.”前面是谁this就是谁，没有的话this就是window


var obj = {
    fn : fn
};
function fn() {

}
fn(); // this --> undefined
obj.fn(); // this --> obj

我们发现严格模式下的this相对于非严格模式的this主要区别在于：对于JS代码中没写执行主体的情况下，非严格模式下都是默认window执行的，所以this指向的是window,但是在严格的模式下，没有写就是没有执行主体，this指向的是undefined