gpt4 book ai didi

js函数中的this指向

转载 作者:我是一只小鸟 更新时间:2023-02-02 22:31:42 26 4
gpt4 key购买 nike

写代码的时候遇到这个问题了,在这里复习一下 。

  1. 非箭头函数
    非箭头函数的this指向比较好理解,就是调用这个函数的对象,举个栗子:
                        
                          var obj = {
    foo: {
        bar: 3,
        foo:{
            bar: 4,
            foo: function a() { console.log(this.bar) },
        },
    },
    bar: 2
};

var foo = obj.foo.foo.foo;
var bar = 1;

obj.foo.foo.foo(); //由obj.foo.foo调用,所以此时this指向它,所以打印的this.a为4
foo(); //由window调用,所以this指向window,打印1

                        
                      
  1. 箭头函数
    箭头函数的this指向,网上看到有一种说话是:箭头函数的this指向定义他的对象,这样理解是错误的。。。
    严格来讲应该是:箭头函数的this指向定义它的上下文对象,更通俗一点来说就是指向 定义箭头函数的那个形成函数作用域的函数所在对象 (个人理解,有疑问的话可以在评论区讨论一下)
    举个栗子
                        
                          var obj = {
    foo: {
        bar: 3,
        foo() {
            var bar = 4;
            return () => { console.log(this.bar) };
        },
    },
    bar: 2
};

var foo = obj.foo.foo;
var bar = 1;
obj.foo.foo()() // 此时this指向obj.foo对象,打印3
foo()()  // 此时this指向window,打印1

                        
                      

需要注意的是,执行函数的时候箭头函数才被定义,所以下面这个栗子打印结果才会不一样 下面这段代码最后打印出来都是3 。

                        
                          var obj = {
    foo: {
        bar: 3,
        foo() {
            var bar = 4;
            return () => { console.log(this.bar) };
        },
    },
    bar: 2
};

var foo = obj.foo.foo(); // 改了这里
var bar = 1;
obj.foo.foo()() // 3
foo() // 3

                        
                      



最后,看一下把箭头函数换成普通函数的写法 。

                        
                          var obj = {
    foo: {
        bar: 3,
        foo() {
            var bar = 4;
            return function() { console.log(this.bar) };
        },
    },
    bar: 2
};

var foo = obj.foo.foo;
var bar = 1;

obj.foo.foo()() // 1
foo()() // 1

                        
                      

总之就是,使用箭头函数的this需要考虑它被定义的时候所在函数作用域的this,使用普通函数只用看谁调用了它.

最后此篇关于js函数中的this指向的文章就讲到这里了,如果你想了解更多关于js函数中的this指向的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com