JavaScript全解析——this指向

这篇具有很好参考价值的文章主要介绍了JavaScript全解析——this指向。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本系列内容为JS全解析,为千锋教育资深前端老师独家创作

致力于为大家讲解清晰JavaScript相关知识点,含有丰富的代码案例及讲解。如果感觉对大家有帮助的话,可以【点个关注】持续追更~

this指向(掌握)

this 是一个关键字,是一个使用在作用域内的关键字

作用域分为全局作用域和局部作用域(私有作用域或者函数作用域)

全局作用域

全局作用域中this指向window

局部作用域

函数内的 this, 和 函数如何定义没有关系, 和 函数在哪定义也没有关系,只看函数是如何被调用的(箭头函数除外)

可分为以下场景:

普通函数中调用

普通函数中的this和全局调用一样,this指向window

语法:函数名()

<script>
    // 全局使用 this 
    console.log(this) //window 
    console.log(window) //window 
    console.log(window === this) //true 
    //普通函数调用 
    function fn() { 
        console.log('我是全局 fn 函数') 
        console.log(this) //window 
    } 
    fn() 
</script>

对象(包含数组)中调用

该函数内的 this 指向 前面的内容,也就是那个对象或者数组

语法:

对象名.函数名()*

对象名

<script> 
    //对象函数调用 
    function fn() { 
        console.log(this) //{fun: ƒ} 
    } 
    var obj = { 
        fun: fn 
    } 
    obj.fun() 
    obj['fun']() 
</script>

定时器处理函数中调用

定时器中的this同样也是指向window

<script> 
    // 定时器处理函数 
    setTimeout(function() { 
        console.log(this); //window 
    }, 1000) 
</script>

事件处理程序中调用

事件处理程序中的this指向的是事件源

<!DOCTYPE html> 
<html lang="en"> 

<head> 
   <meta charset="UTF-8"> 
   <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">        <title>Document</title> 
   <style> 
       div { 
           width: 200px; 
           height: 200px; 
           background-color: red; 
        } 
    </style> 
</head> 

<body> 
   <div>hello world</div> 
   <script> 
       var res = document.querySelector('div') 
       
       res.onclick = function() { 
           console.log(this); //<div></div>
       } 
   </script> 
</body> 

</html>

自执行函数中调用

●自执行函数中的this也指向window

<script> 
    (function() { 
        console.log(this); //window 
    })() 
</script>

强行改变this指向

通过上面的学习大家知道,this在不同的情况指向是不同的,但是有时候需要指向一个制定的对象,这就需要改变this的指向

可以理解成不管之前指向哪里,现在我让你指向哪里你就要指向哪里

强行改变this指向的方式可以通过call、apply和bind来改变

call调用

作用:改变函数内部this的指向

语法:

函数名.call()

对象名.函数名.call(参数1,参数2,参数3...)

参数:

○第一个参数是this要指向的对象

○从第二个参数开始,依次给函数传递实参

特点: 会立即调用函数或者说立即执行

<script> 
    function fn(a, b) { 
        console.group('fn 函数内的 打印') 
        console.log('this : ', this) 
        console.log('a : ', a) 
        console.log('b : ', b) 
        console.groupEnd() 
    } 
    var obj = { 
        name: '我是 obj 对象' 
    } 
    var arr = [100, 200, 300, 400, 500] 
    // 用 call 调用 
    fn.call(obj, 100, 200) 
    fn.call(arr, 1000, 2000) 
    /* 
    this : {name: '我是 obj 对象'} 
    a : 100 
    b : 200 
    fn 函数内的 打印 
    this : (5) [100, 200, 300, 400, 500] 
    a : 1000 
    b : 2000 
    */ 
</script>

apply调用

作用: 改变函数内部this的指向

语法:

○函数名.apply()
○对象名.函数名.apply(参数1,[参数2,参数3...])

参数:

○第一个参数是this要指向的对象

○第二参数的一个数组,要传递的实参要放到数组里面,就是有一个实参也要放到数组里面

特点: 会立即调用函数或者说立即执行

<script> 
    function fn(a, b) { 
        console.group('fn 函数内的 打印') 
        console.log('this : ', this) 
        console.log('a : ', a) 
        console.log('b : ', b) 
        console.groupEnd() 
     } 
     var obj = { 
         name: '我是 obj 对象' 
     } 
     var arr = [100, 200, 300, 400, 500] 
     // 用 apply 调用 
     fn.apply(obj, [100, 200]) 
     fn.apply(arr, [1000, 2000]) 
     /* 
     fn 函数内的 打印 
      this : {name: '我是 obj 对象'} 
      a : 100 
      b : 200 
      fn 函数内的 打印 
      this : (5) [100, 200, 300, 400, 500] 
      a : 1000 
      b : 2000 
      */ 
</script>

bind调用

作用: 改变函数内部this的指向

语法:

函数名.bind()

对象名.函数名.bind(参数1,参数2,参数3...)

参数:

第一个参数是this要指向的对象

从第二个参数开始,依次给函数传递实参

特点: 函数不会立即调用,会返回一个改变this指向以后的函数,使用的时候需要调用

<script> 
    function fn(a, b) { 
        console.group('fn 函数内的 打印') 
        console.log('this : ', this) 
        console.log('a : ', a) 
        console.log('b : ', b) 
        console.groupEnd() 
     } 
     var obj = { 
         name: '我是 obj 对象' 
     } 
     var arr = [100, 200, 300, 400, 500] 
     // 用 bind 调用 
     // 注意: 因为是 bind, 不会把 fn 函数执行, 而是把 fn 
     // res 接受的就是 bind 方法复制出来的 fn 函数, 和 fn 
     var res = fn.bind(obj, 100, 200) 
     var res1 = fn.bind(arr, 1000, 2000) 
     res() 
     res1() 
     /* 
     fn 函数内的 打印 
     this : {name: '我是 obj 对象'} 
     a : 100 
     b : 200 
     fn 函数内的 打印 
     this : (5) [100, 200, 300, 400, 500] 
     a : 1000 
     b : 2000 
     */ 
</script>

以上即为JS中this指向的一些基础知识点,更多技术干货、知识技巧可以关注我们!有不清楚的问题也可以在评论区交流讨论,也可以私信小千~文章来源地址https://www.toymoban.com/news/detail-438919.html

到了这里,关于JavaScript全解析——this指向的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JS中this的指向

    this永远指向一个对象 this的指向完全取决于函数调用的位置 JavaScript支持运行环境动态切换,this的指向是动态的 全局上下文(Global Context) 在全局执行环境中(在任何函数体外部),this都是指向全局对象,在浏览器中,window对象即是全局对象。 函数上下文(Function Context)

    2024年02月07日
    浏览(39)
  • 箭头函数的 this 指向哪里?

    箭头函数不同于传统 JS 中的函数,箭头函数并没有属于自己的 this,他所谓的 this 是捕获其所在上下文的 this 值,作为自己的 this 值,并且由于没有属于自己的 this,所以是不会被 new 调用的,这个所谓的 this 也不会被改变。可以用 Babel 理解一下箭头函数:

    2023年04月26日
    浏览(94)
  • react关于类组件this指向

    文章目录 前言: 绑定方式: 一、手动绑定 this: 二、使用箭头函数: 常见问题: 总结: 在 React 中,类组件中 this 的指向和普通的 JavaScript 类相同,指向当前实例对象。但是,在事件处理函数中,this 的指向会有所不同。 当我们使用类组件的时候,事件处理函数中的 this 默认

    2024年02月08日
    浏览(38)
  • web前端开发this指向问题

    ❗ 函数内部中的 this 指向谁,不是在函数定义时决定的,而是在函数第一次调用并执行的时候决定的 1. call 方法 语法:函数名.call(调用者, 参数1, …) 作用:函数被借用时,会立即执行,并且函数体内的this会指向借用者或调用者 function fn(name, age) {     this.name = name;     thi

    2024年02月21日
    浏览(38)
  • JS 能改变this指向的方法

    JavaScript中的this非常重要,它用于引用当前函数所属的对象。但是,有时候我们需要在不同的上下文中使用相同的函数,这就需要改变this指向。在JavaScript中,有几种方法可以实现这一目标。 call方法是JS中最基本的改变this指向的方法之一。它允许您将一个函数作为另一

    2024年02月08日
    浏览(39)
  • 【ES6】Class中this指向

    先上代码: 正常运行的代码: 输出: 单独调用函数printName: 输出: debugger调试一下,看看什么情况,调试代码: 调试界面,this显示undefined,在单独调用时,this的指向是undefined。在单独调用的场景下,要如何才能解决该问题呢?下面给出两种种比较简单的解决方法。 1、在

    2024年02月09日
    浏览(32)
  • axios回调函数中this指向已经改变的解决方法

    在axios回调函数中,this指向的是回调函数本身的作用域,而不是Vue实例的作用域。因此,你不能直接通过this访问Vue实例中的数据。为了解决这个问题,有几种方法: 1.使用箭头函数,箭头函数会绑定当前作用域的this,而不会创建新的this。 例如: 2.在Vue实例中保存this,使用

    2024年02月07日
    浏览(45)
  • Js:apply/call/bind、作用域/闭包、this指向(普通,箭头,JS/Vue的this)

    共同点: apply()、call() 和 bind() 方法 三者作用都是 改变this指向。 接收的第一个参数都是this要指向的对象 区别: apply只有两个参数,第二个参数为数组; call和bind传参相同,多个参数依次传入的; call和apply都是对函数进行直接调用(立即执行),而bind方法不会立即调用函数

    2023年04月08日
    浏览(92)
  • 【面试必考点】这一次带你彻底学会this的指向问题

    相信很多朋友和我一样,总是搞不清this的指向关系,由于没有硬性要求,所以又总是不想学习,经过两次面试后,笔者发现这个考点真是 面试官常考的点 , 大家静下心来一起学习这篇this的指向吧! 文章主体内容分为两块:this的指向以及如何改变this的指向 全局的this指向

    2024年02月13日
    浏览(39)
  • 前端面试题-js-new关键字-this指向-js事件流-防抖节流

    1.创建一个简单的空对象 2.原型的绑定,确定对象O的原型链 3.绑定this对象为O,传入参数;执行Person构造函数,进行属性和方法的赋值操作 4.返回结果 普通函数的this指向 函数的this指向有一个基本的原则,谁调用的函数,函数的this就指向谁,否则指向全局 箭头函数的this指向

    2024年01月25日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包