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。

var name = 'John';var myObject = function() { return {getName: function() { return this.name;}, name: ’eczn’ }}();myObject.getName(); // => // 'eczn'

getName 的 this 指的是 myObject，因为 getName 直接是 myObject 所调用的，所以这里的 this 指的是 ———— 调用函数的那个对象

myObject.getName()通常情况下谁调用了某个函数，这个函数中的this就指向谁啦