this 相关

对于前端程序媛（员）来说，this这个机制应用的地方是很多的，所以搞懂是必要的，不熟练使用this将遇到一些困惑，下面是一些关于this的学习心得分享，希望大家可以一起学习：

 this究竟是指向什么呢？this是在运行时进行绑定的，并不是在编写时绑定的，它的上下文取决于函数调用时的各种条件，this绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。

当函数调用时，会创建一个执行上下文，这个上下文会记录函数在哪里调用了，函数的调用方法，函数参数等信息，this就是该上下文的一个属性，会在函数执行的过程中用到。

函数在执行过程中this是如何绑定的

寻找函数的调用位置，其实有的很明显，而某些编程模式会因此函数的真正的调用位置

分析调用栈

 function baz() {
        //当前的调用栈是baz
        //因此，当前的调用位置是全局作用域
        console.log("baz");
        bar(); //bar的调用位置
    }

    function bar() {
        //当前的调用栈是baz->bar
        //因此，当前的调用位置是baz
        console.log("bar");
        foo(); //foo的调用位置
    }

    function foo() {
        //当前的调用栈是baz->bar->foo
        //因此，当前的调用位置是bar
        console.log("foo");
    }
    baz(); //baz的调用位置

分析调用栈是，决定了this的绑定

this的绑定规则

①默认绑定：独立函数调用  ，在下面的代码中，foo（）是直接使用不带任何修饰符的函数引用进行调用的，因此只能使用默认绑定

 function foo() {
        console.log(this.a); //this指向window
    }
    var a = 2;
    foo(); //2

但是在严格模式下，全局对象将无法使用默认绑定，因此this会绑定到undefined

    function foo() {
        'use strict'
        console.log(this); //undefined
        console.log(this.a); //报错
    }
    var a = 2;
    foo(); 

但是有个微妙的非常重要的情况，虽然this的邦定规则完全取决于调用位置，但是只有foo运行在非严格模式下是默认绑定才能绑定到全局对象，但在严格模式下，于foo的调用位置无关了

  function foo() {
        console.log(this); //window
        console.log(this.a); //2
    }
    var a = 2;

    (function() {
        'use strict'
        console.log(this);//undefined
        foo();
    })()

②隐式绑定

function foo() {
        console.log(this); //obj 
        console.log(this.a); //2
    }
    var obj = {
        a: 2,
        foo: foo
    }
    obj.foo();

当foo被调用的时候，它的落脚点确实指向obj对象，当函数引用有上下文对象时，隐式绑定规则会把函数调用中的this邦定到这个上下文对象中，因此，调用foo()时，this被绑定到obj，因此，this.a和obj.a是一样的

③显示绑定

 function foo() {
        console.log(this); //obj 
        console.log(this.a); //2
    }
    var obj = {
        a: 2
    }
    foo.call(obj)

.call(...)和apply(...)方法实现显示绑定

他们的第一个参数是一个对象，不是对象的会利用自己的包装对象转换成对象（new Number()  ，new String() ，new Boolen()等），他们会把这个对象绑定到this，接着在调用函数时指定这个this,因为你可以直接指定this的绑定对象，因此我们称为显式绑定

④new绑定

    function foo(a) {
        this.a = a;
    }
    var bar = new foo(2);
    console.log(bar.a);//2

构造函数是使用new操作时会被调用的函数。他们并不属于类，也不会实例化一个类，实际上，甚至不能说他们是一直特殊的函数类型，他们只是用new操作费调用的普通函数而已。

使用new来调用函数，会自动执行下面操作：

1，创建（或者构造一个）全新的对象

2，这个对象会被执行【原型】连接

3，这个新对象会被绑定到函数调用的this,

4，如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象

上面的代码，使用new调用foo()时，我们会构造一个新的对象并把它绑定到foo()调用中的this上，new是最后一个可以影响函数调用时this邦定行为的方法，我们称之为new绑定

看一下当遇到return的时候：

function fn()  
{  
    this.b = 1;  
    return {};  
}
var a = new fn;  
console.log(a.b); //undefined

function fn()  
{  
    this.b = 1;  
    return function(){};
}
var a = new fn;  
console.log(a.b); //undefined

function fn()  
{  
    this.b = 1;  
    return 1;
}
var a = new fn;  
console.log(a.b); //1

function fn()  
{  
    this.b = 1;  
    return undefined;
}
var a = new fn;  
console.log(a.b); //1

结论是：如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。

function fn()  
{  
    this.b =1;  
    return undefined;
}
var a = new fn;  
console.log(a); //fn {b: 1}

还有一点就是虽然null也是对象，但是在这里this还是指向那个函数的实例，因为null比较特殊。

1.在严格版中的默认的this不再是window，而是undefined。

2.new操作符会改变函数this的指向问题，虽然我们上面讲解过了，但是并没有深入的讨论这个问题，网上也很少说，所以在这里有必要说一下。

function fn(){
    this.num = 1;
}
var a = new fn();
console.log(a.num); //1

为什么this会指向a？首先new关键字会创建一个空的对象，然后会自动将this指向这个空对象，这样的话函数内部的this就会被这个空的对象替代。

总结this理解

再来最后看些this的例子，再来深入总结一下：

再看一下例子：eg1

function a(){
    var b = 1;
    console.log(this.b); //undefined
    console.log(this); //Window
}
a();

function a(){
    var b = 1;
    console.log(this.b); //undefined
    console.log(this);　　//Window
}
window.a();

以上两个例子，道理一样，this最终指向的是调用它的对象，这里是全局对象window

再看一下下面这个例子：eg2

var o = {
    b:1,
    fn:function(){
        console.log(this.b);  //1
    }
}
o.fn();

这里的this指向的是对象o，因为你调用这个fn是通过o.fn()执行的，那自然指向就是对象o，这里再次强调一点，this的指向在函数创建的时候是决定不了的，在调用的时候才能决定，谁调用的就指向谁，一定要搞清楚这个。

eg1和eg2说的不够准确，再看一下下面这个例子：

var o = {
    b:1,
    fn:function(){
        console.log(this.b); //1
    }
}
window.o.fn();

这段代码和上面的那段代码几乎是一样的，但是这里的this为什么不是指向window，如果按照上面的理论，最终this指向的是调用它的对象，这里先说个而外话，window是js中的全局对象，我们创建的变量实际上是给window添加属性，所以这里可以用window点o对象。

这里先不解释为什么上面的那段代码this为什么没有指向window，我们再来看一段代码。

var o = {
    a:16,
    b:{
        a:14,
        fn:function(){
            console.log(this.a); //14
        }
    }
}
o.b.fn();

这里同样也是对象o点出来的，但是同样this并没有执行它，那你肯定会说我一开始说的那些不就都是错误的吗？其实也不是，只是一开始说的不准确，接下来我将补充一句话，我相信你就可以彻底的理解this的指向的问题。

情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题，你想了解可以自行上网查找。

情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。

情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象，下面例子可以证明，如果不相信，那么接下来我们继续看几个例子。

eg3:

var o = {
    a:16,
    b:{
        // a:14,
        fn:function(){
            console.log(this.a); //undefined
        }
    }
}
o.b.fn();

尽管对象b中没有属性a，这个this指向的也是对象b，因为this只会指向它的上一级对象，不管这个对象中有没有this要的东西。

还有一种比较特殊的情况，看下面：eg4

var o = {
    a:16,
    b:{
        a:14,
        fn:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var j = o.b.fn;
j();

这里this指向的是window，是不是有些蒙了？其实是因为你没有理解一句话，这句话同样至关重要。

this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的，eg4中虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window，这和eg3是不一样的，eg3是直接执行了fn。

this讲来讲去其实就是那么一回事，只不过在不同的情况下指向的会有些不同，上面的总结每个地方都有些小错误，也不能说是错误，而是在不同环境下情况就会有不同，所以我也没有办法一次解释清楚，只能你慢慢地的去体会。