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 知识点
- 立即调用的函数表达式（IIFE）
- 根据 JavaScript 的语法，圆括号
()跟在函数名之后，表示调用该函数。比如，print()就表示调用print函数。
(function(){ /* code */ }());
// 或者
(function(){ /* code */ })();
- this指向
- 箭头函数:
() => {}没有自己的this对象, 内部的this就是定义时上层作用域中的this,this指向是固定的 - 普通函数:
fun() {}内部的this指向函数运行时所在的对象,this指向是可变的
知识点不多，但用起来还需小心，如有错误或不理解的点，欢迎指出。如需了解更详细的知识点，跳转☞【JavaScript】 函数 function
