谈谈This指向

2023-06-15

784 字约 3 分钟

...

首先要说的是，this的指向在函数定义的时候是确定不了的，只有当函数执行的时候，才知道this到底指向谁，实际上this最终的指向是那个调用它的对象。

举个例子：

function fn(){
  console.log(this);
}

因为函数没有执行的时候，它的指向确实是不确定的，但箭头函数的this在定义的时候就已经确定了。

普通函数中的This

以上面的函数为例，普通函数的直接调用，例如fn的直接调用，就像下面的代码一样，和上面就一点点的区别就是直接调用了函数，这时候的this指向全局对象window。

function fn(){
  var user = "hunt_bo";

  console.log(this.user); //undefined

  console.log(this); //Window  
}

fn();

按照我们上面说的this最终指向的是调用它的对象，这里的函数fn实际是被Window对象所点出来的，下面的代码就可以证明。和上边是一样的效果，区别就是我们定义的一些变量函数，其实是在给window添加属性。

function fn(){
  var user = "hunt_bo";
  console.log(this.user); //undefined
  console.log(this);　　//Window
}

window.fn();

构造函数中的This

function Person(age, name) {
  this.age = age;
  this.name = name
  console.log(this)  // 此处this分别指向Person的实例对象p1和p2
}

var p1 = new Person(15, '张三')

var p2 = new Person(18, '李四')

在构造函数中，它的this始终指向构造函数构造出来的实例，结合前面所分享的原型里边的知识，在构造函数中直接打印this.__proto__.constructor，就会直接打印构造函数自己，有兴趣的话可以试一下。

对象方法中的This

var obj = {
  fn: function () {
    console.log(this); // obj
  }
}

obj.fn();

对象方法调用的时候，此时this指向该方法所属的对象，就是说fn是obj的一个方法，那么当通过obj.fn调用的时候，方法中的this指向的是obj对象。

事件绑定中的This

<body>
  <button id="btn">text</button>
  
  <script>
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function() {
      console.log(this);
    }
  </script>
</body>

在事件绑定中的this，指向的是绑定事件的对象，就是说this指向button。

定时器中的this

setInterval(
  function(){ 
    console.log(this); //window
  }, 
3000);

定时器中的this指向的是window，这个就不做过多的解释了。

箭头函数中的this

箭头函数中的this指向的是定义时的this，而不是执行时的this，说白了就是箭头函数是没有this，this指向谁主要取决于箭头函数所处的环境，箭头函数中的this指向外部环境中的this指向。

改变this的指向

改变this的指向的方法主要有call，apply，bind

.call(),  call(thisScope, arg1, arg2, arg3...)

.apply(), apply(thisScope, [arg1, arg2, arg3...]);两个参数

如果您觉得这篇文章有帮助，请点个赞吧～

分享文章

更多文章 →

javascript2025-09-18

JavaScript 的多线程能力：Worker

如果你写过一些计算量稍大的 JavaScript 代码，比如图像处理、大量数据排序或者复杂的算法，你几乎肯定遇到过浏览器“卡死”的现象。点击页面没反应，动画也停了，就像整个世界都静止了。这就是主线程被阻塞的典型后果。因为主线程既要负责执行 JavaScript，又要负责渲染页面、响应用户操作，一旦它被繁重的计算任务占满，就无暇顾及其他，用户体验便直线下降。这个问题的根源，正是“主线程是单线程的”。那么，如何解决呢？答案很简单：把这...

学习面试

javascript2025-09-10

手把手教你实现一个EventEmitter

你是不是也遇到过这种情况：代码里各种事件监听和触发，回调函数套了一层又一层，最后自己都理不清哪个事件先触发、哪个后触发了？别担心，今天我就带你从零开始实现一个自己的事件触发器（EventEmitter），让你彻底掌握事件驱动的精髓，代码清晰度直接提升200%！为什么要懂EventEmitter？先说说为什么我们要关心这个。Node.js的核心就是事件驱动，比如文件读写、网络请求，都是通过事件来处理的。不会EventEmitter，...

学习面试

javascript2025-08-09

Web Worker 多线程魔法

你是否曾遇到过网页因为复杂计算而卡顿的情况？今天，让我们一起探索Web Worker的神奇世界，看看如何用多线程技术解决性能瓶颈，并实现流畅的图片压缩功能！为什么需要Web Worker？想象一下，你在一个繁忙的餐厅里，只有一位服务员（主线程）负责点餐、上菜、结账所有工作。当客人突然暴增时，这位服务员就会手忙脚乱，其他客人只能干等着… 这就是JavaScript的现状—— 单线程！所有任务都在一个线程中排队执行，一旦遇到复杂计算（...

学习面试

javascript2025-08-07

🌐AST抽象语法树

AST 是前端开发中一个非常重要的概念，它就像是代码的“编译器”，能够帮助我们理解和操作代码。本文将深入探讨 AST 的原理和应用，带你从零开始了解 AST。一、什么是 AST？ AST（抽象语法树）是一种树形结构，用于表示程序代码的语法结构。它将代码分解为一系列的节点，每个节点代表代码中的一个元素，如变量、函数、表达式等。AST 是编译器和解释器的基础，也是代码分析和转换的关键工具。 1\. AST 的结构 AST 的结构通常包括以...

学习面试

javascript2025-08-05

打字机效果是如何实现的

分析效果使用 AI 对话的时候，文字是一个字一个字蹦出来的？它不是等所有内容生成完毕后一次性展示，而是以一种流畅、实时的“打字机”效果呈现，这种体验的背后，隐藏着一种高效的Web技术。它就是服务器推送事件（Server Sent Events，简称 SSE）什么是 SSE 从根本上说，SSE 是一种允许服务器单向、持续地向客户端（浏览器）推送数据的Web技术。可以把它想象成一个电台广播：服务器是广播电台，持续不断...

学习面试

javascript2025-08-04

Promise 从原理到实现

前言是异步编程的核心概念之一，它为我们提供了一种更优雅的方式来处理异步操作。本文将全面剖析的工作原理，并逐步实现一个符合规范的。正文一、Promise 基础概念代表一个异步操作的最终完成（或失败）及其结果值。它有种状态： 1. pending ：，既不是成功，也不是失败状态 2. fulfilled ：意味着操作完成 3. rejected ：意味着操作状态一旦改变就不能再变，只能从变为，或从变为。二...

学习面试

请登录后发表评论

去登录

加载评论中...

相关文章

评论

发表评论