【JavaScript】题（牛客网）——熟练使用函数调用，超详细讲解

1 熟练使用函数调用

1.1 题目

执行以下程序，输出结果为

var uname = "window";
var object = {
  uname: "object",
  fun: function () {
    console.log(this.uname);
    return function () {
      console.log(this.uname);
    };
  },
};

object.fun()();

1.2 答案

object
window

1.3 分析

官方解析：

object.fun()()等效于var fn = object.fun(); fn();
实际上是调用函数两次，第一次是调用object对象的fun函数，第二次是调用fun函数的返回函数。
第一次调用fun函数时，this指向上一级对象，即object对象，因此输出对象object的uname属性值object,
第二次调用的返回函数，其this指向window对象，这是因为匿名函数具有全局性，匿名函数的this指向window对象，因此输出结果为window对象的uname属性值window。

详细解析及拓展：

var object = {
  uname: "object",
  fun: function () {
    console.log(this.uname);
    return function () {
      console.log(this.uname);
    };
  },
};

1.3.1 object.fun

object.fun;
console.log("---")
console.log(object.fun, "---object.fun")
console.log("---")

输出

---
ƒ () {                         // 输出 object.fun 本身的值
    console.log(this.uname);
    return function () {
      console.log(this.uname);
    };
  } '---object.fun'
---

首先定义了一个 object 对象，其有两个属性，uname 和 fun，所以，object.fun 的值是一个函数，准确地说是 object.fun 指向一个下面这样的函数

function () {
	console.log(this.uname);
	return function () {
	  console.log(this.uname);
	};
}

object.fun; 语句不会调用函数， object.fun(); 语句才会调用函数

1.3.2 object.fun()

object.fun();
console.log("---")
console.log(object.fun(), "---object.fun()")
console.log("---")

输出

object                            // 执行 object.fun()
---
object                            // 执行 object.fun()，再输出 object.fun() 本身的值
ƒ () {
      console.log(this.uname);
    } '---object.fun()'
---

object.fun() 是调用 object.fun 函数，

// object.fun 函数
function () {
	console.log(this.uname);     // 调用该函数，这里输出 this.uname 
	return function () {         // return 语句返回一个函数
	  console.log(this.uname);
	};
}

由于 object.fun 返回一个函数，所以 object.fun() 的值是一个下面这样的函数

function () {
  console.log(this.uname);
}

这里的this指向什么？

object.fun(); 语句是指调用 object.fun 所指向的函数，这个函数又是普通函数，普通函数内部的 this 指向函数运行时所在的对象, 所以这里的 this 指向 object，因此 this.uname 即 object.uname 即 "object"

1.3.3 object.fun()()

object.fun()();
console.log("---")
console.log(object.fun()(), "---object.fun()()")
console.log("---")

输出

object                           // 调用 object.fun()()
window
---
object                           // 调用 object.fun()()
window 
undefined '---object.fun()()'    // 再输出 object.fun()() 本身的值
---

object.fun()() 是两个步骤，先执行 object.fun()，得到一个 return 的普通函数 fun1，再执行 fun1()，即

object.fun()();
// 即
(object.fun())();
// 即
var fun1 = object.fun();
fun1();

先执行 object.fun()，输出 object，再执行 fun1();

// fun1 函数
function () {
  console.log(this.uname);  // 调用该函数，这里输出 this.uname 
}

由于 object.fun() 没有 return 语句，所以 object.fun()() 本身没有值，所以返回 undefined

这里的this指向什么？

实际上执行的这两步，第二步执行普通函数 fun1(); 不是由 object 调用的，是处于全局，所以这里的 this 指向 window，this.uname 即 window.uname,因此输出 "window"

1.4 知识点

1. 立即调用的函数表达式（IIFE）

• 根据 JavaScript 的语法，圆括号()跟在函数名之后，表示调用该函数。比如，print()就表示调用print函数。

(function(){ /* code */ }());
// 或者
(function(){ /* code */ })();

2. this指向

• 箭头函数: () => {} 没有自己的 this 对象, 内部的 this 就是定义时上层作用域中的 this, this 指向是固定的
• 普通函数: fun() {} 内部的 this 指向函数运行时所在的对象, this 指向是可变的

知识点不多，但用起来还需小心，如有错误或不理解的点，欢迎指出。如需了解更详细的知识点，跳转☞【JavaScript】 函数 function