登录  /  注册
首页 > web前端 > js教程 > 正文

你能搞懂JS的this指向问题吗?看看这篇文章

青灯夜游
发布: 2022-03-25 11:05:52
转载
1779人浏览过

你能搞懂javascript的this指向问题吗?下面本篇文章带大家聊聊这令人烦恼的this指向问题,希望对大家有所帮助!

你能搞懂JS的this指向问题吗?看看这篇文章

this的指向

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

箭头函数

箭头函数的本身没有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); // 37
a.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()() //obj

func = obj.func
func()()  //undefined

obj.func.bind({ _name: "newObj" })()() //newObj

obj.func.bind()()() //undefined

obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })() //bindObj
登录后复制

apply、call、bind

使用 apply、call、bind 函数可以改变this的指向,上面this的例子中使用到

区别

thisArg , [ argsArray] call(thisArg, arg1, arg2, ...)

apply和call函数区别在于this后面传入的参数,apply中传的是一个数组,而call中传入的是展开的参数

bind(thisArg[, arg1[, arg2[, ...]]])()

  • 然后bind函数创建的是一个新的函数,需要手动去调用
  • 这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用

如有错误,请大家指正!!感谢大家阅读!

参考资料

https://juejin.cn/post/6946021671656488991#comment

【相关视频教程推荐:web前端

以上就是你能搞懂JS的this指向问题吗?看看这篇文章的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:掘金社区网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号