导航：首页 > 开发技术 >

javascript的this指向怎么理解

发表于：2026-11-04 作者：千家信息网编辑

千家信息网最后更新 2026年11月04日，本文小编为大家详细介绍"javascript的this指向怎么理解"，内容详细，步骤清晰，细节处理妥当，希望这篇"javascript的this指向怎么理解"文章能帮助大家解决疑惑，下面跟着小编的思路

千家信息网最后更新 2026年11月04日javascript的this指向怎么理解

本文小编为大家详细介绍"javascript的this指向怎么理解"，内容详细，步骤清晰，细节处理妥当，希望这篇"javascript的this指向怎么理解"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

this的指向

在我们看见的各种介绍如何判断this的指向方法中，"this的最终指向的是那个调用它的对象" 这句话被视作核心，但是面对多种多样的情况，我们容易搞混。针对针对多种情况结合我的理解，我提出了一句话 "箭头，定时和构造，特殊情况特殊看，普通调用看点号，后面有点不看前，然后就近原则判，最后剩下就是window"。

箭头函数

箭头函数的本身没有this，所有不存在this改变，它捕获外层的this使用

var name = "windowsName";var a = {    name: "Cherry",    fn() {      setTimeout(()=>{        console.log(this.name);       },0)    }}a.fn() //Cherry

解析: 首先对象a调用fn函数，所以fn函数的this指向对象a，然后箭头捕获外层this，那么就不是setTimeout里的this，而是fn函数的this，所以最后拿到对象a里的name

定时器

对于延时函数内部的回调函数的this指向全局对象window

var name = "windowsName";var a = {    name: "Cherry",    fn() {      setTimeout(function (){        console.log(this.name);       },0)    }}a.fn() //windowsName

解析：首先对象a调用fn函数，然后这里setTimeout里的回调函数是匿名函数，为普通的函数，那么匿名函数中的this指向的就是window

var name = "windowsName";var b={  name: "setTimeoutName"}var a = {    name: "Cherry",    fn() {      setTimeout((function (){        console.log(this.name);       }).bind(b),0)    }}a.fn() //setTimeoutName

解析：首先对象a调用fn函数，然后这里setTimeout里的回调函数是匿名函数，为普通的函数，那么匿名函数中的this指向的就是window，但使用bind改变匿名函数的this指向为对象b，所以最后对象b里的name

构造函数

构造函数中的this指向创建的实例对象，

注意：如果构造函数中返回一个对象，创建时不会有新的实例对象，而是这个返回的对象

function fn(){  this.age = 37;}var a = new fn();console.log(a.age); // 37a.age = 38;console.log(fn); // { this.age = 37; }console.log(a.age); // 38

解析：这里我们通过构造函数创建实例对象a，相当于开辟一个新地方将构造函数内容复制过来，就有了a对象，这时候this指向的就是对象a，我们修改对象a中内容不影响构造函数

点号判断

通过.判断this指向，遵循就近原则

var a = {  age:10,  b: {      age:12,      fn(){          console.log(this.age);       }  }}a.b.fn(); //12

解析：对象a调用对象b的fn函数，fn函数前面有两个.，那么最近的是对象b，所以fn函数的this指向的就是对象b，最后拿到的就是对象b的age

var a = {  age:10,  b: {      age:12,      fn(){          console.log(this.age); //undefined      }  }}var c = {  age:20,}var d = {  age:30,}a.b.fn.bind(c).bind(d)(); //20

解析：对象a调用对象b的fn函数然后使用bind改变this的指向，这时候fn前后前后都有.，不看前面的.，只用看后面的，然后最近的bind改变this指向为c，那么此时fn函数的this指向的就是对象c，拿到的就是对象c的age

练习

function outerFunc() {   console.log(this) // { x: 1 }   function func() {    console.log(this) // Window    }   func()} outerFunc.bind({ x: 1 })()

obj = {  func() {    const arrowFunc = () => {      console.log(this._name)    }    return arrowFunc  },  _name: "obj",}obj.func()() //objfunc = obj.funcfunc()()  //undefinedobj.func.bind({ _name: "newObj" })()() //newObjobj.func.bind()()() //undefinedobj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })() //bindObj