JS - 基础 - this的指向（function 、箭头函数）

最新推荐文章于 2024-09-10 08:30:00 发布

原创最新推荐文章于 2024-09-10 08:30:00 发布 · 594 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #jquery #html #es6

前端开发 🛸 专栏收录该内容

60 篇文章

订阅专栏

本文探讨JavaScript中this的关键概念，重点在于箭头函数和普通函数中this的指向。箭头函数的this继承自其父执行上下文，例如在函数f()中，箭头函数的this就是f()的this，导致例子中输出333。而function中的this则取决于函数的调用方式。通过实例深入理解this在不同场景下的行为。

箭头函数this

箭头函数的this是继承父执行上下文里面的this

例子：

var x = 11;
var obb = {
    x: 222,
    y: {
        x:333,
        obc: function f() {
            console.log(this)
            var x = 111;
            var obj = {
                x: 22,
                say: () => {
                    console.log(this.x);
                }
            }
            obj.say()
        }
    }
}
obb.y.obc()

输出结果是333，
原因箭头函数没有this，剪头函数的this是继承父执行上下文里面的this ，这里箭头函数的执行上下文是函数f()，所以它就继承了f()的this，

function this

function中的this是函数的调用对象

参考： https://blog.csdn.net/cjgeng88/article/details/79846670

※ 例子（一例顶千言）

var a = {
  foo: () => {
        console.log(this) ;
    } , 
    boo: function()  {
        console.log(this) ;
    } ,
    coo: function() {
        return () => {
            console.log(this);
        }
    }
} ;
var b = a.boo ; 
a.foo() ;
a.boo() ;
b();
a.coo()() ;