关于javaScript中的this指向总结详解-js教程-PHP中文网

首页

web前端

js教程

关于javaScript中的this指向总结详解

黄舟

Jul 22, 2017 pm 05:02 PM

javascriptjsthis

下面小编就为大家带来一篇基于javaScript的this指向总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

在javascript中this的指向一直是前端同事的心头病，也同时是各面试题的首选，现在我们就来总结一下js中this的指向。首先需要了解一下几个概念：

1:全局变量默认挂载在window对象下

2:一般情况下this指向它的调用者

3:es6的箭头函数中，this指向创建者，并非调用者

4:通过call、apply、bind可以改改变this的指向

下面我们具体分析一下

1:在函数调用时

（非严格模式)

const func = function () {
  console.log(this);
  const func2 = function () {
   console.log(this);
  };
  func2(); //Window
 };
 func(); //Window

（严格模式）

&#39;use strict&#39;
 const func = function () {
  console.log(this);
  const func2 = function () {
   console.log(this);
  };
  func2(); //undefined
 };
 func(); //undefined

结合第四和第一两条规则:func这个函数是全局的，默认挂载在window对象下，this指向它的调用者即window，所以输出window对象，但是在严格模式下，this不允许指向全局变量window，所以输出为undefined（func2在函数直接调用时默认指向了全局window，其实这属于javascript设计上的缺陷，正确的设计方式是内部函数的this 应该绑定到其外层函数对应的对象上，为了规避这一设计缺陷，聪明的 JavaScript 程序员想出了变量替代的方法，约定俗成，该变量一般被命名为 that。这种方式在接下来会讲到）。

2:作为对象方法

const user = {

  userName: &#39;小张&#39;,
  age: 18,
  selfIntroduction: function () {
   const str = &#39;我的名字是:&#39; + this.userName + ",年龄是:" + this.age;
   console.log(str);

   const loop = function () {
    console.log(&#39;我的名字是:&#39; + this.userName + ",年龄是:" + this.age);
   };

   loop();  //我的名字是:undefined,年龄是:undefined

  }
 };

 user.selfIntroduction(); //我的名字是:小张,年龄是:18

按照咱的第一条规则，this指向他的调用者，selfIntroduction（）方法的调用者是user，所以在selfIntroduction（）方法内部this指向了他的父对象即user，而loop方法输出的为undefined的原因就是我在上面所说的javascript的设计缺陷了，在这种情况下，我们通常选择在selfIntroduction（）方法里将this缓存下来。

const user = {
  userName: &#39;小张&#39;,
  age: 18,
  selfIntroduction: function () {
   const str = &#39;我的名字是:&#39; + this.userName + ",年龄是:" + this.age;
   console.log(str);

   const that=this;

   const loop = function () {
    console.log(&#39;我的名字是:&#39; + that.userName + ",年龄是:" + that.age);
   };

   loop();  //我的名字是:小张,年龄是:18

  }
 };

 user.selfIntroduction(); //我的名字是:小张,年龄是:18

此时loop的this指向就理想了。

const user={

  userName:&#39;小张&#39;,
  age:18,
  selfIntroduction:function(){
   const str=&#39;我的名字是:&#39;+this.userName+",年龄是:"+this.age;
   console.log(str); 
  }
 };

 const other =user.selfIntroduction;
 other(); //我的名字是:undefined,年龄是:undefined

 const data={
  userName:&#39;小李&#39;,
  age:19,
 };
 data.selfIntroduction=user.selfIntroduction;
 data.selfIntroduction(); //我的名字是:小李,年龄是:19

在看这段代码，将selfIntroduction（）赋值给了全局变量other，调用other（）方法，other挂载在全局函数window对象下，window对象下没有userName 和 age 这两个属性，所以输出为undefined。第二段代码，申明了data对象，包含了username和age属性，记住我们的第二条规则一般情况下this指向它的调用者，大家就明白了，data是selfIntroduction（）的函数的调用者，所以输出了data的userName和age。

3:在html里作为事件触发

<body>

 <p id="btn">点击我</p>

</body>

const btn=document.getElementById(&#39;btn&#39;);

  btn.addEventListener(&#39;click&#39;,function () {
   console.log(this); //<p id="btn">点击我</p>
  })

在种情况其实也是遵循了第二条规则一般情况下this指向它的调用者，this指向了事件的事件源即event。

4:new关键字（构造函数）

const fun=function(userName){
  this.userName=userName;
 }
 const user=new fun(&#39;郭德纲&#39;); 
 console.log(user.userName); //郭德纲

这个就不多赘述了，new关键字构造了一个对象实例，赋值给了user，所以userName就成为了user对象的属性。

5:es6（箭头函数）

const func1=()=>{
  console.log(this); 
 };
 func1(); //Window

const data={
  userName:&#39;校长&#39;,
  selfIntroduction:function(){
   console.log(this); //Object {userName: "校长", selfIntroduction: function}

   const func2=()=>{
    console.log(this); //Object {userName: "校长", selfIntroduction: function}
   }

   func2();
  }

 }

 data.selfIntroduction();

大家在看看我开头说的第三条准则：es6的箭头函数中，this指向创建者，并非调用者，fun1 在全局函数下创建，所以this指向全局window，而fun2在对象data下创建，this指向data对象，所以在func2函数内部this指向data对象，个人认为es6的箭头函数的this指向是对我上面所说的javascript设计缺陷的改进，（个人认知）。

6:改变this的指向

call、apply、bind这三个函数是可以人为的改变函数的this指向的，在这里就不多说这三者的区别了，在往后的博客里我会详细解释这三者的区别的。现在先拿一个来举一个例子

const func=function(){
 console.log(this);
};

func(); //window

func.apply({userName:"郭德纲"}); //Object {userName: "郭德纲"}

这三个方法都是可以人为的改变this的指向，区别是call、apply会将该方法绑定this之后立即执行，而bind方法会返回一个可执行的函数。

说这很多总结起来就是我开头说的4点

1：全局变量默认挂载在window对象下

2：一般情况下this指向它的调用者

3：es6的箭头函数中，this指向创建者，并非调用者

4：通过call、apply、bind可以改改变this的指向

说实话第一次写博客，确实挺忐忑的，会不会有人看我的博客？会不会写的不正确？……想好多了，总结了：不好的地方欢迎指正。

以上是关于javaScript中的this指向总结详解的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript在行动中：现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。