js函数中的this指向

当前位置:

首页 > 网站开发 > JavaScript教程 >

js函数中的this指向

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

非箭头函数
非箭头函数的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

箭头函数
箭头函数的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，使用普通函数只用看谁调用了它。

__EOF__

本文作者：我是猫猫

本文链接： https://www.cnblogs.com/yolocatcat/p/17086824.html

栏目列表