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
文章评论