欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS 函数与方法中this指向

程序员文章站 2022-06-28 19:08:38
首先我们要知道,函数跟方法有什么不同呢?我们平时经常使用的funciton就称为函数,如果我们把这个函数作为一个对象的属性值的时候,就称这个函数为方法。接下来我们先来看看函数与方法的this指向的区别。首先这里声明了一个对象叫obj,show为这个对象属性名,且show的属性值为一个匿名函数,因此我们把这个函数称为方法。接着我们又在这个方法里面声明了一个函数并且调用。let name = "这是window下的name"; let obj = { name: "Jok...

首先我们要知道,函数跟方法有什么不同呢?我们平时经常使用的funciton就称为函数,如果我们把这个函数作为一个对象的属性值的时候,就称这个函数为方法。

接下来我们先来看看函数与方法的this指向的区别。

首先这里声明了一个obj对象,show为这个对象属性名,且show的属性值为一个匿名函数,因此我们把这个函数称为方法。接着我们又在这个方法里面声明了一个函数并且调用。

let name = "这是window下的name";

    let obj = {
        name: "Joker",
        show: function () {
            console.log(this);
            console.log(this.name);  // ?

            function whatName() {
                console.log(this);
                console.log(this.name) // ?
            }

            whatName()
        }
    };
    obj.show();

那么方法里面打印的结果跟函数whatName的结果有什么不同呢?

JS 函数与方法中this指向

从中我们可以看到,在方法里面的this指向的就是obj对象,而whatName函数中的this指的是window对象。

那我们应该怎么在whatName这个函数里面拿到obj对象中的属性值呢?

1. 我们可以通过将方法下面的this指向赋值给一个常量,然后在函数里面使用这个常量就能访问到外部的this了。

let name = "这是window下的name";

    let obj = {
        name: "Joker",
        show: function () {
            console.log(this);
            console.log(this.name);
            const that = this; //将方法里面的this指向赋值给一个常量

            function whatName() {
                console.log(that);
                console.log(that.name)
            }

            whatName()
        }
    };
    obj.show();

2.除了使用常量赋值的方法之外,我们还能使用箭头函数的方法让whatName函数获取到obj下的name。

let name = "这是window下的name";

    let obj = {
        name: "Joker",
        show: function () {
            console.log(this);
            console.log(this.name);

            let whatName = () => {
                console.log(this);
                console.log(this.name)
            };

            whatName()
        }
    };
    obj.show();

tips:这里我们可以这样理解,箭头函数中的this就是指上一层中的this指向。

本文地址:https://blog.csdn.net/LttleJoker/article/details/109238515

相关标签: js