JavaScript高级知识-this的指向

this的指向

普通函数

函数在调用时，js会默认给this一个值
this的绑定和定义的位置没有关系
this的绑定和调用方式以及调用位置有关系
this是在运行时被绑定的
- 默认绑定
- 隐式绑定
- 显示绑定
- new绑定

        function test() {
   
            console.log(this);
        }
        
        // 1. 直接调用
        test(); // window
        
        // 2 通过对象调用
        const obj = {
   
            name: 'obj',
            test: test
        }
        obj.test(); // obj对象
        
        // 3 通过call/bind/apply指定绑定对象调用
        // 下面绑定方式不加String()包裹也可以，js会将其自动转为对象
        test.apply(String('apply')); // String {'apply'} 对象
        test.call(String('call')); // String {'call'} 对象
        test.bind(String('bind'))(); // String {'bind'} 对象
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述

内置函数的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>Documenttitle>
head>
<body>
    <button>点击bu>
    <script>
        setTimeout(function () {
     
            console.log('定时器函数：', this); // window
        }, 0);

        const btn = document.querySelector('button');
        btn.onclick = function () {
     
            console.log('btn的点击：', this); // 
        }

        var names = ['tom'];
        names.forEach(function () {
     
            console.log('forEach: ', this); // window
        })
        names.forEach(functio
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

相关阅读:
mac 安装SVN报错Error: Command failed with exit 128: git
element ui el-table表格复选框，弹框关闭取消打勾选择
工程管理系统简介工程管理系统源码 java工程管理系统工程管理系统功能设计
3、Tomcat类加载机制
使用pandas配合pytorch实现相关性分析并使用热力图表示
⑭霍兰德RS*型如何选专业？高考志愿填报选专业
【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成
Linux基础教程：3、gdb调试工具的使用
Helm3模板-模板函数与管道
AIGC技术周报｜图灵测试不是AGI的智力标准；SegGPT：在上下文中分割一切；ChatGPT能玩好文字游戏吗？

原文地址：https://blog.csdn.net/weixin_43484007/article/details/127729761