图解avaScript中this指向(超透彻)

最新推荐文章于 2023-09-14 10:09:06 发布

苘迷

最新推荐文章于 2023-09-14 10:09:06 发布

阅读量670

点赞数

分类专栏：前端文章标签： javascript 图解 avascript this指向

原文链接：https://www.mk2048.com/blog/blog.php?id=h0ac0112akbb&title=%E5%9B%BE%E8%A7%A3avaScript%E4%B8%ADthis%E6%8C%87%E5%90%91%28%E8%B6%85%E9%80%8F%E5%BD%BB%29

版权

前端专栏收录该内容

734 篇文章 1 订阅

订阅专栏

一个图讲清楚JavaScript中this指向：

说明：

(1)严格模式下，禁止this关键字指向全局对象会报错。

(2)闭包中的this对象具有全局性，因此通常指向window。

(3)优先级：new>apply/call>.调用>默认调用

(4)null/undefined，在使用apply或者call时传入null/undefined时，会使用默认调用。

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

    <head>
        <meta charset="UTF-8" />
        <title>null/undefined参数</title>
    </head>

    <body>

        <script type="text/javascript">
            function foo(a, b) {
                console.log('a:'   a   ",b:"   b)
            }
            foo.apply(null, [1, 2])
        </script>
    </body>

</html>

(4)箭头函数--根据外层作用域决定this指向。

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

    <head>
        <meta charset="UTF-8" />
        <title>箭头函数的this指向</title>
    </head>

    <body>

        <script type="text/javascript">
            function foo() {
                setTimeout(() => {
                    console.log(this.a)
                }, 100)
            }
            var obj = {
                a: 2
            }
            foo.apply(obj); //2
        </script>
    </body>

</html>