前端开发初学者必须了解的“this”关键字

如果对JavaScript的关键字this理解不够深刻，有时候会掉入意想不到的坑。在这里我们总结了5条通用规则来帮助你判断this到底指向什么。虽然没有囊括所有的情况，但日常大部分情况都可以使用这些规则来正确推断。

河西网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作，到程序开发，运营维护。创新互联2013年至今到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

  1. this的值通常是由所在函数的执行环境决定，也就是说要看函数是如何被调用的;
  2. 同一个函数每一次调用，this都可能指向不同的对象;

全局对象 (Global Object)

打开Chrome浏览器开发者面板(Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J)，并且输入:

 
 
 
      
  
  
  1. console.log(this); 
    2.

看看输出了什么?

 
 
 
      
  
  
  1. // Window {} 
    2.

window对象! 因为在全局作用域下，this指向全局对象。在浏览器中全局对象就是window对象。

为了让你更加清楚理解为什么this会指向window对象，我们来看另外一个例子：

 
 
 
      
  
  
  1. var myName = 'Brandon'; 
    2.

我们可以通过在控制台输入myName来访问其值：

 
 
 
      
  
  
  1. myName 
    2.   
  
  
  2. // 输出 'Brandon' 
    3.

其实，所有在全局定义的变量都绑定到window对象。我们来做如下测试：

 
 
 
      
  
  
  1. window.myName 
    2.   
  
  
  2. // 输出 'Brandon' 
    3.   
  
  
  3. window.myName === myName 
    4.   
  
  
  4. // 输出 true 
    5.

现在我们将this放到函数内部，看看有何效果。

 
 
 
      
  
  
  1. function test(){ 
    2.   
  
  
  2. return this; 
    3.   
  
  
  3. } 
    4.   
  
  
  4. test(); 
    5.

你会发现this依然指向全局的window对象。因为this关键字没有处于一个声明的对象内部，默认指向全局window对象。这一点可能对于大部分初学者来说有点难以理解。当读完这篇文章，你就会豁然开朗。

注意：如果在strcit模式下，上面的例子中this为undefined。

声明的对象 (Declared Object)

当this关键字在一个声明对象内部使用，其值会被绑定到调用该this的函数的最近的父对象。我们用例子来说明这个问题：

 
 
 
      
  
  
  1. var person = { 
    2.   
  
  
  2. first: 'John', 
    3.   
  
  
  3. last: 'Smith', 
    4.   
  
  
  4. full: function() { 
    5.   
  
  
  5. console.log(this.first + ' ' + this.last); 
    6.   
  
  
  6. } 
    7.   
  
  
  7. }; 
    8.   
  
  
  8. person.full(); 
    9.   
  
  
  9. // 输出 'John Smith' 
    10.

在被声明的对象person中的full函数里面使用了this, 那么调用this的full函数的最近的父对象就是person, 因此，this指向person。

为了更好的描述this实际上是指向person对象的，你可以拷贝如下代码到浏览器控制台，将this打印出来。

 
 
 
      
  
  
  1. var person = { 
    2.   
  
  
  2. first: 'John', 
    3.   
  
  
  3. last: 'Smith', 
    4.   
  
  
  4. full: function() { 
    5.   
  
  
  5. console.log(this); 
    6.   
  
  
  6. } 
    7.   
  
  
  7. }; 
    8.   
  
  
  8. person.full(); 
    9.   
  
  
  9. // 输出 Object {first: "John", last: "Smith", full: function} 
    10.

我们接下来看一个更复杂的例子：

 
 
 
      
  
  
  1. var person = { 
    2.   
  
  
  2. first: 'John', 
    3.   
  
  
  3. last: 'Smith', 
    4.   
  
  
  4. full: function() { 
    5.   
  
  
  5. console.log(this.first + ' ' + this.last); 
    6.   
  
  
  6. }, 
    7.   
  
  
  7. personTwo: { 
    8.   
  
  
  8. first: 'Allison', 
    9.   
  
  
  9. last: 'Jones', 
    10.   
  
  
  10. full: function() { 
    11.   
  
  
  11. console.log(this.first + ' ' + this.last); 
    12.   
  
  
  12. } 
    13.   
  
  
  13. } 
    14.   
  
  
  14. }; 
    15.

在这里我们有嵌套的对象，在这个时候，this分别指向谁呢? 我们将其打印出来看一看：

 
 
 
      
  
  
  1. person.full(); 
    2.   
  
  
  2. // 输出 'John Smith' 
    3.   
  
  
  3. person.personTwo.full(); 
    4.   
  
  
  4. // 输出 'Allison Jones' 
    5.

你会发现满足我们前面所描述的规则：其值会被绑定到调用this的函数的最近的父对象。

new关键字

当使用new关键字构建一个新的对象，this会绑定到这个新对象。我们来看一个例子：

 
 
 
      
  
  
  1. function Car(make, model) { 
    2.   
  
  
  2. this.make = make; 
    3.   
  
  
  3. this.model = model; 
    4.   
  
  
  4. }; 
    5.

根据***条规则，你可能会推断this指向全局对象。但是如果我们使用new关键字来声明一个新的变量，Car函数中的this将会绑定一个新的空对象，然后初始化this.make和this.model的值。

 
 
 
      
  
  
  1. var myCar = new Car('Ford', 'Escape'); 
    2.   
  
  
  2. console.log(myCar); 
    3.   
  
  
  3. // 输出 Car {make: "Ford", model: "Escape"} 
    4.

call, bind, 和apply

我们可以显示的在call()，bind()，apply()中设置this的绑定对象。这三个函数很类似，但是我们需要注意它们微小的区别。

我们来看一个例子：

 
 
 
      
  
  
  1. function add(c, d) { 
    2.   
  
  
  2. console.log(this.a + this.b + c + d); 
    3.   
  
  
  3. } 
    4.   
  
  
  4. add(3,4); 
    5.   
  
  
  5. // 输出 NaN 
    6.

add函数输出NaN, 因为this.a和this.b未定义。

现在我们引入对象，并且使用call()和apply()来调用：

 
 
 
      
  
  
  1. function add(c, d) { 
    2.   
  
  
  2. console.log(this.a + this.b + c + d); 
    3.   
  
  
  3. } 
    4.   
  
  
  4. var ten = {a: 1, b: 2}; 
    5.   
  
  
  5. add.call(ten, 3, 4); 
    6.   
  
  
  6. // 输出 10 
    7.   
  
  
  7. add.apply(ten, [3,4]); 
    8.   
  
  
  8. // 输出 10 
    9.

当我们使用add.call()，***个参数是this需要绑定的对象，剩下的是add函数本来的参数。

因此，this.a指向ten.a,this.b指向ten.b。add.apply()也类似，除了第二个参数是一个数组，用于存储add函数的参数。

bind()函数和call()类似，但是bind()函数不会立即被调用。bind()函数会返回一个函数，并且将this绑定好。接下来我们来用例子来帮助理解bind()函数的应用场景：

 
 
 
      
  
  
  1. var small = { 
    2.   
  
  
  2. a: 1, 
    3.   
  
  
  3. go: function(b,c,d){ 
    4.   
  
  
  4. console.log(this.a+b+c+d); 
    5.   
  
  
  5. } 
    6.   
  
  
  6. } 
    7.   
  
  
  7. var large = { 
    8.   
  
  
  8. a: 100 
    9.   
  
  
  9. } 
    10.

执行:

 
 
 
      
  
  
  1. small.go(2, 3, 4); 
    2.   
  
  
  2. // 输出 10 
    3.

如果我们想使用large.a的值，而不是small.a呢? 我们可以使用call/apply:

 
 
 
      
  
  
  1. small.go.call(large, 2, 3, 4); 
    2.   
  
  
  2. // 输出 109 
    3.

但是，如果我们现在还不知道这三个参数应该传入什么值，应该怎么办呢? 我们可以使用bind:

 
 
 
      
  
  
  1. var bindTest = small.go.bind(large, 2); 
    2.

如果我们将bindTest在控制台下打印出来，我们会看到：

 
 
 
      
  
  
  1. console.log(bindTest); 
    2.   
  
  
  2. // 输出 function (b,c,d){console.log(this.a+b+c+d);} 
    3.

注意：该函数已经将this绑定到large对象，并且传入了***个参数b。所以，我们接下来是需要传入余下的参数即可：

 
 
 
      
  
  
  1. bindTest(3, 4); 
    2.   
  
  
  2. // 输出 109 
    3.

箭头函数(->)

因为需要很大的篇幅，我们会专门写一篇博客来介绍。

结论

当你读完这篇博客，你应该可以理解大多数情况下this指向的对象。

接下来我们来总结一下：

  1. this的值通常是由当前函数的执行环境所决定;
  2. 在全局作用域，this指向全局对象 (window对象);
  3. 当使用new关键字声明，this指向新建对象;
  4. 我们可以使用call(), bind(), apply()来设置this;
  5. 箭头函数不会绑定this。

【本文为专栏作者“谢军”的原创稿件，转载可通过作者微信公众号(jingfeng18)获取联系】

戳这里，看该作者更多好文

新闻名称：前端开发初学者必须了解的“this”关键字
文章URL：http://www.shufengxianlan.com/qtweb/news19/85769.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

外贸建站知识

同城分类信息

雅安电信机房　　 　宜宾网站营销推广　　 　成都网站设计　　 　网站建设　　 　vi形象设计　　 　古巴雪茄　　 　乐山电信机房　　 　界面设计　　 　成都网站优化　　 　成都品牌官网设计公司　　 　四川艺考培训　　 　小程序开发　　 　梦港之夜　　 　成都企业网站建设公司　　 　清舞人间　　 　成都门窗定制　　 　普能电气　　 　铁科精智测控　　 　成都展柜厂　　 　四川搅拌罐车