JavaScript this用法总结

   <p>在JavaScript中，this关键字可以说是最复杂的机制之一。对this的作用机制缺乏比较深入的理解很容易在实际开发中出现问题。</p>    <h2><strong>1、this的作用</strong></h2>    <p>为什么要在JavaScript中使用this呢？因为this提供了一种简明的方式来隐式传递一个对象引用，可以让函数接口设计的简单且容易复用：</p>    <pre>  <code class="language-javascript">function display() {      console.log(this.name);  }    var obj1 = {name: "obj1"};  var obj2 = {name: "obj2"};    display.call(obj1);  //  "obj1"  display.call(obj2);  //  "obj2"  </code></pre>    <p>通过call方法，我们可以在调用display函数时为this传入不同的对象。如果不使用this关键字，那么上面的函数就需要显示增加一个调用时上下文参数：</p>    <pre>  <code class="language-javascript">function display(context) {      console.log(context.name);  }    var obj1 = {name: "obj1"};  var obj2 = {name: "obj2"};    display(obj1);  //  "obj1"  display(obj2);  //  "obj2"  </code></pre>    <p>实际上这不够简洁，当使用模式比较复杂时，显示的上下文传递会让代码变得混乱复杂。使用this关键字，我们可以在调用时为this传入不同的对象引用，保证了方法的使用灵活性。</p>    <h2><strong>2、this的使用复杂性</strong></h2>    <p>this使用机制复杂，在开发容易出问题的根本原因在于：this是在运行时绑定，而不是在编写时绑定，this实际值取决于函数调用时的上下文。this的绑定和函数声明的位置没有关系，只取决于函数的调用方式。在JavaScript中，当函数被调用时，会创建一个活动记录（执行时上下文），这个记录包含函数在何处调用、函数的调用方法和传入参数等信息，this会记录其中一个属性。判断this实际绑定值，关键在于分析函数实际调用的位置。</p>    <h2><strong>3、this绑定规则</strong></h2>    <p>前面说了函数的实际调用位置决定了this的绑定值。在JavaScript中，this有4种绑定规则。</p>    <h3><strong>3.1、new绑定</strong></h3>    <p>在JavaScript中使用new调用函数会自动执行下面的操作：</p>    <p>（1）创建一个新的对象</p>    <p>（2）对新对象执行原型链接</p>    <p>（3）新对象会被绑定到函数的this</p>    <p>（4）如果函数没有返回其他对象，那么新对象会被返回</p>    <p>new绑定容易理解，下面是一段常见的用new调用函数创建对象的代码：</p>    <pre>  <code class="language-javascript">function Book(name, author, isbn) {      this.name = name;      this.author = author;      this.isbn = isbn;  }    let book = new Book("Zakas", "ES6", 12345);    console.log(book.name);  //  "Zakas"  </code></pre>    <h3><strong>3.2、隐式绑定</strong></h3>    <p>当对象内部包含一个指向函数的属性，并且在调用时通过这个属性间接引用函数（obj.prop()的形式），那么函数内的this会隐式指向这个对象，也即隐式绑定：</p>    <pre>  <code class="language-javascript">function foo() {      console.log(this.a);  }    var obj = {      a: 2,      foo: foo  };    obj.foo();  //  2  </code></pre>    <p>在调用位置上，函数是通过obj.foo来引用的，可以说函数被调用时obj对象拥有或包含它。此时，this绑定在obj这个上下文对象上。</p>    <h3><strong>3.3、显示绑定</strong></h3>    <p>在某些情况下，我们希望函数内的this绑定在某些指定的对象上，这称为显示绑定。在JavaScript中可以使用call和apply为函数显示指定this绑定。call和apply的第一个参数是一个对象，这个对象会被绑定到this上：</p>    <pre>  <code class="language-javascript">function foo() {      console.log(this.a);  }    var obj = {          a:2  };    foo.call(obj);  //  2  </code></pre>    <p>使用bind也可以让this绑定在指定对象上，bind绑定也是一种显示绑定，又称为硬绑定：</p>    <pre>  <code class="language-javascript">function foo(something) {      this.a = something;  }  var obj1 = {};  var bar = foo.bind(obj1);    bar(2);  console.log(obj1.a);  //  2  </code></pre>    <h3><strong>3.4、默认绑定</strong></h3>    <p>当使用独立函数调用（func()形式），会发生默认绑定，可以把这条规则看成是无法使用其他规则时的默认规则。看下面的示例代码：</p>    <pre>  <code class="language-javascript">function foo() {      console.log( this.a );  }    var a = 2;    foo();  //  2  </code></pre>    <p>当调用foo时，使用默认绑定规则，this被绑定到全局对象上。在strict模式下，this会绑定到undefined。</p>    <h2><strong>4、绑定优先级</strong></h2>    <p>上面4种绑定规则独立使用的话，判断this的绑定值并不复杂。但实际函数调用时，可能多条绑定规则都可以使用，那么这时就要根据每个规则的绑定优先级来判断this实际的绑定值。接下来看各种绑定规则的优先级。</p>    <h3><strong>4.1、默认绑定优先级最低</strong></h3>    <p>默认绑定的优先级最低，这个容易理解。因为当无法使用其他的绑定规则时才会使用默认规则。</p>    <h3><strong>4.2、显示绑定优先级高于隐式绑定</strong></h3>    <pre>  <code class="language-javascript">function foo() {      console.log(this.a);  }    var obj1 = {a: 2, foo: foo};  var obj2 = {a: 3, foo: foo};    obj1.foo();  //  2  obj1.foo.call(obj2);  //  3  </code></pre>    <p>上面的代码中，obj1.foo()使用隐式绑定规则，this绑定到obj1对象上。obj1.foo.call()可同时使用隐式绑定和显示绑定规则，显示绑定优先级高于隐式绑定，this绑定到obj2对象上。</p>    <h3><strong>4.3、new绑定优先级高于隐式绑定</strong></h3>    <pre>  <code class="language-javascript">function foo(something) {      this.a = something;  }    var obj1 = {      foo: foo  };    var obj2 = {};    obj1.foo(2);  console.log(obj1.a);  //  2    obj1.foo.call(obj2, 3);  console.log(obj2.a);  //  3    var bar = new obj1.foo(4);  console.log(obj1.a);  //  2  console.log(bar.a);  //  4  </code></pre>    <p>上面代码中，new obj1.foo(4)可同时使用new绑定和隐式绑定。由bar.a的值为4可以知道，new绑定优先级高于隐式绑定。</p>    <h3><strong>4.4、new绑定优先级高于显示绑定</strong></h3>    <pre>  <code class="language-javascript">function foo(something) {      this.a = something;  }  var obj1 = {};  var bar = foo.bind(obj1);    bar(2);  console.log(obj1.a);  //  2    var baz = new bar(3);  console.log(obj1.a);  //  2  console.log(baz.a);  //  3  </code></pre>    <p>上面代码中，new bar(3)可同时使用new绑定和bind绑定。baz.a的值为3，说明new绑定优先级高于隐式绑定。</p>    <h3><strong>4.5、综述</strong></h3>    <p>现在可以根据this绑定优先级判断函数在调用位置实际绑定的值。实际可以按照下面的顺序判断：</p>    <p>（1、函数是否在new中调用？如果是的话this绑定新创建的对象。调用例子：var bar = new foo()。</p>    <p>（2、函数是否通过apply、call显示绑定或者bind硬绑定？如果是，this绑定指定的对象。调用例子：var bar = foo.call(obj)。</p>    <p>（3、函数是否在某个上下文对象中调用（隐式绑定）？如果是，this绑定在上下文对象上。调用例子：var bar = obj.foo()。</p>    <p>（4、如果都不是的话，使用默认绑定。在严格模式下，this绑定到undefined，在非严格模式下，绑定到全局对象。调用例子：var bar = foo()。</p>    <h2><strong>5、箭头函数中的this</strong></h2>    <p>ES6中引入了箭头函数，箭头函数使用操作符=>定义。箭头函数不使用上面4种this绑定规则，而是根据外层作用域来决定this：</p>    <pre>  <code class="language-javascript">function foo() {      return (a) => {          console.log(this.a);      };  }        var obj1 = {a:2};  var obj2 = {a:3};    var bar = foo.call(obj1);  bar.call(obj2);  //  2  </code></pre>    <p>foo内部的箭头函数创建时，foo函数内this绑定到obj1上，bar（箭头函数）的this也会绑定到obj1上，箭头函数内的this是不能被修改的。</p>    <p> </p>    <p>来自：http://www.cnblogs.com/xfshen/p/6011541.html</p>    <p> </p>