资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/总结js中this的指向问题

总结js中this的指向问题

lieeps / 3152人阅读

摘要：下面只探讨在浏览器中的指向，有兴趣的也可以把后面的例子在中跑一下。

我们知道js中有个全局对象就是window,如果在顶层声明一个变量如

</>复制代码 
  1. var a=1 //就相当于window.a=1

同时有了node以后，js也可以在服务端运行了，官方解释为Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。通俗说node是一个支持js语法的容器，直接写js就可以在node下运行。这里介绍node主要说一下在node中的全局变量叫global,就像window一样有一些js默认的变量和方法。下面只探讨this在浏览器中的指向，有兴趣的也可以把后面的例子在node中跑一下。

this一般在函数中使用比较多，那就从函数说起吧，我们调用的函数一般分为声明式函数，或者是放在对象中作为方法的函数
一、声明式
</>复制代码 
  1. function demo1(){
  2.     console.log(this)  
  3. }
  4. function demo2(){
  5.     this.num=2
  6.     function demo3(){
  7.           this.num++
  8.           console.log(num)
  9.     }
  10.     return demo3
  11. }
  12. demo1() // 调用demo1函数，这里this很显然指向window
  13. var a=demo2();
  14. a()  // 这里看到会打印出3，应该也很好理解，a变量将demo2函数执行后的的返回值及demo3函数返回，然后执行，此时this依旧指向window
二、对象中的方法调用
</>复制代码 
  1. var obj1={
  2.       value:3,
  3.       increment:function(){
  4.            this.value++;
  5.            console.log(this,this.value)
  6.       }
  7. }
  8. obj1.increment() //  obj1{value:4,increment:function(){...}},4 ;打印出obj1对象和4，obj1包含一个value值和一个increment方法，也好理解

在看一个例子

</>复制代码 
  1. var obj2={
  2.       value:4,
  3.       increment:function(){
  4.            this.value++;
  5.            console.log(this,this.value);
  6.            (function(){
  7.                  console.log("这又是啥",this,this.value)
  8.                  this.value=1
  9.            })() 
  10.       },
  11.       print:function(){
  12.             console.log("print",this.value)
  13.       }
  14. }
  15. obj2.increment() 
  16. obj2.print()
  17. var P=obj2.print
  18. P()
  19. // 打印结果出如下
  20. // {value: 5, increment: ƒ, print: ƒ} 
  21. // 5
  22. // 这又是啥 Window 
  23. // undefined
  24. // print 5
  25. // print 1
依次分析：
</>复制代码 
  1. 第一条先执行obj2中的increment方法，跟上一个例子一样，这里的this是指向我obj2对象，所以this.value再执行+1以后为5，后面是一个自执行函数，这里面的this直接指向了window，window的value一开始不存在所以为undefined,后面增加一个全局变量value值为1；然后是第二条直接执行obj2中的方法print，此时的this还是obj2所以值为5,；然后是第三条声明一个变量P指向obj2中的print方法，执行这个方法这是this指向window，所以输出1
总结来说：
</>复制代码 
  1. 使用声明式函数（后面两个对象中的方法也是使用的声明式函数）会自动绑定this,直接在全局中声明的函数this会直接指向window对象
延伸一下，现在我们都经常会用的es6的箭头函数，箭头函数是不会自动绑定this的，默认从上一级继承下来，那不妨把刚才的例子改下看看
例子1改写
</>复制代码 
  1. var demo1=()=>{
  2.     console.log(this)  
  3. }
  4. var demo2=()=>{
  5.     this.num=2
  6.     function demo3(){
  7.           this.num++
  8.           console.log(num)
  9.     }
  10.     return demo3
  11. }
  12. demo1() // 调用demo1函数，这里this还是指向window,因为之前说的在全局下声明本身就有个this指向window对象
  13. var a=demo2();
  14. a()  // 3，这里也一样
例子2改写
</>复制代码 
  1. var obj1={
  2.       value:3,
  3.       increment:()=>{
  4.            this.value++;
  5.            console.log(this,this.value)
  6.       }
  7. }
  8. obj1.increment() // 这时候会看到输出window对象和一个NaN
简单说明下：
</>复制代码 
  1. 如前面所说箭头函数不会自动绑定this，所以执行increment函数中的this依旧会指向window，而window下的value还不存在，所以为undefined再执行+1操作所以value就变成了NaN了
例子3改写
</>复制代码 
  1. var obj2={
  2.       value:4,
  3.       increment:()=>{
  4.            this.value++;
  5.            console.log(this,this.value);
  6.            (function(){
  7.                  console.log("这又是啥",this,this.value)
  8.                  this.value=1
  9.            })() 
  10.       },
  11.       print:()=>{
  12.             console.log("print",this.value)
  13.       }
  14. }
  15. obj2.increment() 
  16. obj2.print()
  17. var P=obj2.print
  18. P()
  19. // 打印结果出如下
  20. // Window 
  21. //  NaN
  22. // 这又是啥 Window
  23. // NaN
  24. // print 1
  25. // print 1
简单说明下：
</>复制代码 
  1. 第一个依旧window对象(this没绑定的嘛)，后面的value当然又是没声明.....然后自执行函数也没得说,后面才接着给window的value赋值为1了，后面就两句自然输出两次1了
那么箭头函数怎么绑定this呢,有apply,call和bind这三个方法得嘛，大家应该都知道，具体区别可以查一下
GPU云服务器 云服务器 this的指向 改变this指向 js里面的this vps日常维护中的一些要点总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93335.html

相关文章

  • 关于js中this指向的总结

    摘要：中指向问题一直是个坑，之前一直是懵懵懂懂的，大概知道一点，但一直不知道各种情况下指向有什么区别，今天亲自动手测试了下的指向。这就是我关于学习的总结，希望能给需要的人点帮助，然后有啥不足希望有大神能指点出来。 js中this指向问题一直是个坑，之前一直是懵懵懂懂的，大概知道一点，但一直不知道各种情况下指向有什么区别，今天亲自动手测试了下this的指向。 1.在对象中的this对象中的t...

    zhangfaliang 评论0 收藏0

  • 关于js中this指向的总结

    摘要：中指向问题一直是个坑，之前一直是懵懵懂懂的，大概知道一点，但一直不知道各种情况下指向有什么区别，今天亲自动手测试了下的指向。这就是我关于学习的总结，希望能给需要的人点帮助，然后有啥不足希望有大神能指点出来。 js中this指向问题一直是个坑，之前一直是懵懵懂懂的，大概知道一点，但一直不知道各种情况下指向有什么区别，今天亲自动手测试了下this的指向。 1.在对象中的this对象中的t...

    mcterry 评论0 收藏0

  • myslide 插件开发知识点总结和 css3 动画性能问题的研究

    摘要：插件开发知识点总结和动画性能问题的研究这篇文章主要是总结最近开发过程中遇到的问题。有几个问题又是不容易发现原因的问题，但是最后的结果又是很简单的。和都是可以指定函数运行时，的值。比如触发盒子的还有就是禁止元素在水平或者竖直方向滚动。 myslide 插件开发知识点总结和 css3 动画性能问题的研究 这篇文章主要是总结最近开发过程中遇到的问题。有几个问题又是不容易发现原因的问题，但是最...

    iliyaku 评论0 收藏0

  • js中的this总结

    摘要：关于的指向问题算的上是中的一个十分重要的问题了。首先，的指向问题可以用一句话总结就是总是指向调用的对象，也就是说指向谁与函数声明的位置没有关系，只与调用的位置有关。此外注意几种特殊情况，特别是中的箭头函数。 关于this的指向问题算的上是js中的一个十分重要的问题了。今天把这个问题总结下，加深下自己对this的理解。首先，this的指向问题可以用一句话总结就是：this总是指向调用的对...

    light 评论0 收藏0

发表评论

登陆后可评论

0条评论

lieeps

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<