this 相关

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

1，this并不是指向自身

首先来看一段代码

     function foo(num) {
         console.log("foo:" + num); //0 1 2 3 4
         console.log(this); //window对象
         this.count++; //记录foo被调用的次数
     }
     foo.count = 0; //count 属于foo的属性  并不属于window
     var i;
     for (i = 0; i < 10; i++) {
         if (i < 5) {
             foo(i);
         }
     }
     console.log(foo.count) //

很多人认为 ：函数内部的this指向当前这个函数，这是错误的

对于这个例子来说，一种解决方法是使用foo标识符代替this来指向自身

  function foo(num) {
         console.log("foo:" + num); //0 1 2 3 4
         console.log(this); //window对象
         foo.count++; //记录foo被调用的次数
     }
     foo.count = 0; //count 属于foo的属性  并不属于window
     var i;
     for (i = 0; i < 10; i++) {
         if (i < 5) {
             foo(i);
         }
     }
     console.log(foo.count) //

另一种方法是没有规避了this使用

function foo(num) {
        console.log("foo:" + num); //0 1 2 3 4
        console.log(this); //window对象
        this.count++; //记录foo被调用的次数
    }
    foo.count = 0; //count 属于foo的属性  并不属于window
    var i;
    for (i = 0; i < 10; i++) {
        if (i < 5) {
            foo.call(foo, i) //使用call() 确保this 指向函数foo
        }
    }
    console.log(foo.count) //

2，this指向函数作用域(并不是一直都是对的）

需要知道的一点是this在任何情况都不会指向函数的词法作用域，因为作用域是无法通过js代码访问到的，它存在于引擎内部

下面这个代码很好的说明了这个问题

    function foo() {
        var a = 2;
        this.bar(); // this是window
    }

    function bar() {
        console.log(this); //window
        console.log(this.a); //undefined
    }
    foo();

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

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

3，函数在执行过程中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的绑定

 4，this的绑定规则

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

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

但是在严格模式下，全局对象将无法使用默认绑定，因此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); //
     }
     var a = 2;

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

②隐式绑定

 function foo() {
         console.log(this); //obj
         console.log(this.a); //
     }
     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); //
     }
     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);//

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

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

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

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

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

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

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