博客
关于我
javaScript函数中关于this的指向问题
阅读量:328 次
发布时间:2019-03-04

本文共 1490 字,大约阅读时间需要 4 分钟。

一、this是什么?

在编程中,特别是在JavaScript中,this是一个非常重要的概念。它是函数调用时自动创建的作用域对象,具体指向取决于函数的调用方式。默认情况下,如果没有明确指定this的值,JavaScript会将其指向全局对象window。

二、this的指向

this的指向在不同的场景下会发生变化,理解这些场景对编写高质量的JavaScript代码至关重要。以下是一些常见的情况:

  • 方法中的this:在方法中,this表示该方法所属的对象。例如:
  • var obj = {     a: 1,    b: function(){       console.log(this.a); // 1    }  };

    当调用obj.b()时,this会指向obj对象。

  • 全局函数中的this:如果你在全局作用域中定义了一个函数,且没有使用new关键字调用,那么this会指向全局对象window。例如:
  • function fn(){     console.log(this); // window  } fn();
  • 构造函数中的this:使用new关键字创建的对象,this会指向新创建的对象实例。例如:
  • function Fn(){     this.a = '123';  } var obj = new Fn();

    在这种情况下,obj是一个Fn实例,this在构造函数中指向obj。

  • 严格模式下的this:在JavaScript的严格模式下,如果没有明确指定this的值,this会被设置为undefined,而不是window。需要注意的是,严格模式是在函数的开始时使用"use strict"声明的。
  • 事件处理中的this:在事件处理中,this通常指向触发事件的元素对象。例如,在HTML事件中:
  • 当用户点击按钮时,this会指向按钮元素。

  • 函数内部的this:在函数内部,this的值会根据函数的调用方式而变化。例如,在函数fn()中,若fn()被作为方法调用,this会指向该方法所属的对象;若fn()被作为函数直接调用,this会指向全局对象window。
  • 三、this的特殊情况

    在某些情况下,this的指向可能会有所不同,需要特别注意。以下是一些常见的特殊情况:

    • 返回对象作为函数的返回值:当函数返回一个对象时,该对象会成为新的this值。例如:
    • function fn(){     return { name: '张三' };  }

      在这种情况下,调用fn()后得到的结果是一个对象,this会指向该对象。

    • 返回非对象值作为函数返回值:如果函数返回一个非对象值(如数字、字符串等),则this会指向函数的调用者。
    • 构造函数中的返回值:构造函数如果不返回任何值,或者返回一个非对象值,那么新创建的对象的this会指向该实例。如果构造函数返回一个对象,则this会指向返回的对象。例如:
    • function Fn(){     this.a = 123;    return null;  } var obj = new Fn();

      在这种情况下,obj的this会指向Fn的实例,但由于返回值是null,obj的a属性会是undefined。

      四、总结

      通过以上分析可以看出,this的指向是一个非常灵活的概念,它根据函数的调用方式和上下文而变化。在编写JavaScript代码时,明确this的指向可以帮助我们更好地理解代码的执行流程,并避免一些常见的错误。记住,理解this的指向是成为一名优秀的JavaScript开发者的一部分必备技能。

转载地址:http://akqh.baihongyu.com/

你可能感兴趣的文章
【单片机开发】智能小车工程(经验总结)
查看>>
【单片机开发】基于stm32的掌上游戏机设计 (项目规划)
查看>>
C++&&STL
查看>>
微信js-sdk使用简述(分享,扫码功能等)
查看>>
c++中ifstream及ofstream超详细说明
查看>>
web项目配置
查看>>
基于单片机简易信号误差分析设计-全套资料
查看>>
基于单片机简易脉搏测量仪系统设计-毕设课设资料
查看>>
Javascript中String支持使用正则表达式的四种方法
查看>>
Servlet2.5的增删改查功能分析与实现------删除功能(四)
查看>>
spring启动错误:Could not resolve placeholder
查看>>
invalid byte sequence for encoding
查看>>
技术美术面试问题整理
查看>>
ORB-SLAM2:LoopClosing线程学习随笔【李哈哈:看看总有收获篇】
查看>>
Codeforces Round #305 (Div. 1) B. Mike and Feet(单调栈)
查看>>
js求阶乘
查看>>
Making the grade 和Sonya and Problem Wihtout a Legend
查看>>
Nginx---惊群
查看>>
项目中常用的审计类型概述
查看>>
python-day3 for语句完整使用
查看>>