1. Python技术站首页
  2. 其他
  3. JavaScript

JavaScript全解析——this指向

• JavaScript
yizhihongxing

本系列内容为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.cnblogs.com/qian-fen/p/17391354.html

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript全解析——this指向 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月11日
下一篇 2023年5月11日

相关文章

  • js DOM的事件常见操作实例详解

    js DOM的事件常见操作实例详解 前言 在web开发中，dom事件是我们经常会遇到的部分。在dom事件中，我们可以监听各种事件，如点击，键盘输入等。本文将对常见的dom事件进行详细的介绍，并提供常见操作的实例。 常见的DOM事件 以下是一些常见的DOM事件：- 鼠标事件：mousedown, mouseup, click, dblclick, mouseo…

    JavaScript 2023年6月10日
    00

  • JavaScript接口实现代码 （Interfaces In JavaScript）

    JavaScript在ES6之前并没有真正的接口（Interfaces）的概念，但是我们可以通过一些技巧来实现接口。在这篇文章中，我将为你呈现一个完整的JavaScript接口实现代码攻略： 什么是JavaScript接口？ 接口是一个描述类应该如何实现函数的集合。在函数式编程中，接口是一个纯粹的抽象概念，用于描述具有特定行为或功能的组件。 如何实现Java…

    JavaScript 2023年5月18日
    00

  • js基础之DOM中元素对象的属性方法详解

    JS基础之DOM中元素对象的属性方法详解 什么是DOM？ DOM，即文档对象模型（Document Object Model）。在网页中，每个标签都可以看做是一个对象，这些对象被组织在一起形成了DOM树形结构。通过JS可以对DOM树进行访问和操作，从而实现网页的动态效果和交互。 元素对象 在DOM中，标签被称为元素，每个元素都是一个对象，我们可以通过JS来操…

    JavaScript 2023年5月27日
    00

  • 原生JS实现的碰撞检测功能示例

    首先介绍一下什么是碰撞检测。碰撞检测是指在计算机图形学中，用于检测两个物体是否相交的技术。在游戏开发中，碰撞检测是非常重要的技术之一，用于检测游戏角色与游戏场景中的物体是否有接触。 原生JS实现的碰撞检测功能可以通过以下步骤实现： 确定需要检测碰撞的物体 首先，需要确定需要检测碰撞的物体，例如游戏角色、游戏场景中的物体等等。在网页上，也可能需要检测碰撞的元素…

    JavaScript 2023年6月11日
    00

  • JS使用ajax方法获取指定url的head信息中指定字段值的方法

    要使用JS获取指定URL的Head信息中指定字段值，需要使用Ajax方法，具体操作流程如下： 创建XMLHttpRequest对象 XMLHttpRequest对象是用于在后台与服务器交换数据的核心技术之一，能够在不刷新页面的情况下更新网页的局部信息。 const xhr = new XMLHttpRequest(); 用open方法指定请求信息 open方…

    JavaScript 2023年6月11日
    00

  • JavaScript中的substr()方法使用详解

    JavaScript中的substr()方法使用详解 什么是substr()方法？ substr()是JavaScript中用来截取字符串的方法，它可以从一个字符串中截取指定长度的子串，并返回这个子串。substr()方法有两个参数，第一个参数是起始截取位置，第二个参数是截取的长度。如果省略第二个参数，则会截取从起始位置开始到字符串结尾的所有字符。 subs…

    JavaScript 2023年5月28日
    00

  • javascript中递归的两种写法

    当我们需要重复执行相同的任务时，递归是一种非常有效的解决方案。在JavaScript中，递归有两种主要的写法，分别是普通递归和尾递归。本文将详细讲解这两种递归的写法。 什么是递归 递归是一种编程技巧，它是通过一个函数调用自身来完成某个任务的过程。递归有两个特征： 基线条件：递归过程中，必须有一个基准条件（或称终止条件），它告诉递归函数何时停止执行。 递归条件…

    JavaScript 2023年6月10日
    00

  • JS实现简单的键盘打字的效果

    让我们来讲解如何用JS实现简单的键盘打字效果。 分析思路 我们需要监听键盘的按键事件，当有键被按下时，我们获取到该键的对应字符，然后将该字符添加到页面上的一个文本区域中。同时，我们也需要记录已经输入的字符，方便后续的处理。 步骤 在HTML文件中创建一个文本区域，用于显示用户输入的字符。 <textarea id="input"&g…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部