javascript - js中 this的问题

问题描述

问 题

js小白 遇到的问题先上代码

var name = "John";

var myObject = function() {

    return {
        getName: function() {
            return this.name;
        }
    }
}();

alert(myObject.getName());

输出的结果是undefined
我的问题是1. return里面的getName的function是不是匿名函数 我现在理解的是匿名函数 那么这个this应该就是指向全局吧？就是window 那为啥不输出john 2.让我更困惑的是，我在调试时候一步步走，走到this.name的时候，this指向的是Object 而当输出完undefined的时候，我在监视那里的this变成了window，this.name也变成了john，不太明白，求大虾解救！

解决方案

这个问题需要一步一步看，首先是myObject是一个对象，上面有个属性是getName，值是一个匿名函数，alert(myObject.getName());，就是这个对象在调用这个方法，所有这个时候的this就是undefined。

//
var name = "John";

var myObject = function() {

    return {
        getName: function() {
            return this.name;
        }
    }
}();

var f = myObject.getName;

alert(f()); //John

// 这样就返回的是John,因为这个时候的getName是在全局执行的，this指向的就是window。

var name = "John";

var myObject = function() {

    return {
        getName: () => {
            return this.name;
        }
    }
}();

alert(myObject.getName()); //John

// 也可以通过es6修正this的指向

再次做下扩展，看下面的代码

    var object = {
        name: 'lucy',
        getName: function() {
            return function () {
                return this.name
            }
        }
    }
 console.log(object.getName()()) //John

object.getName(）方法返回的是一个匿名函数，执行环境是全局作用域，this的指向基于函数的执行作用域所以是window，这个时候window.name是John。
如果我们想返回lucy，就需要通过创建一个箭头函数或者闭包来实现。

var object = {
    name: 'lucy',
    getName: function() { console.log(this)
        return  () => {
            return this.name
        }
    }
}
 console.log(object.getName()()) //lucy
 
 var object = {
    name: 'lucy',
    getName: function() {
        var that = this;
        return function () {
            return that.name
        }
    }
}
 console.log(object.getName()()) //lucy

箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

至于你说的调试this指向改变问题，是因为匿名函数原本的作用域是window，但当执行的时候是myObject调用了它，所以this在那一刻指向了myObject。

这篇关于javascript - js中 this的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！