JavaScript高级知识-this的指向

不点外卖

于 2022-11-07 16:24:08 发布

阅读量278

点赞数

分类专栏： javascript基础知识文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_43484007/article/details/127729761

版权

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>

在这里插入图片描述

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

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

        var names = ['tom'];
        names.forEach(function () {
     
            console.log('forEach: ', this); // window
        })
        names.forEach(functio

最低0.47元/天解锁文章

不点外卖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级知识-this的指向

因为箭头函数demo是没有this的，所以js引擎往上一层作用域找，找到普通函数test(存在this)，而函数test的this指向obj对象，因此最终结果就是obj对象。因为箭头函数demo是没有this的，所以js引擎往上一层作用域找，找到箭头函数test(也不存在this)，最终找到全局作用域，因此最终结果就是window对象。注意：new绑定和call、apply是不允许同时使用的。'指定this，forEach: '4. new绑定优先级高于bind。注意：obj的{}不是一个作用域。
复制链接

扫一扫