# this指向
# 头条一面
请分别写出下面题目的答案。
function Foo() {
getName = function() {
console.log(1);
};
return this;
}
Foo.getName = function() {
console.log(2);
};
Foo.prototype.getName = function() {
console.log(3);
};
var getName = function() {
console.log(4);
};
function getName() {
console.log(5);
}
//请写出以下输出结果:
Foo.getName(); //-> 2 Foo对象上的getName() ,这里不会是3,因为只有Foo的实例对象才会是3,Foo上面是没有3的
getName(); //-> 4 window上的getName,console.log(5)的那个函数提升后,在console.log(4)的那里被重新赋值
Foo().getName(); //-> 1 在Foo函数中,getName是全局的getName,覆盖后输出 1
getName(); //-> 1 window中getName();
new Foo.getName(); //-> 2 Foo后面不带括号而直接 '.',那么点的优先级会比new的高,所以把 Foo.getName 作为构造函数
new Foo().getName();//-> 3 此时是Foo的实例,原型上会有输出3这个方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 箭头函数中的this 判断
箭头函数里面的this是继承它作用域父级的this, 即声明箭头函数处的this
let a = {
b: function() {
console.log(this)
},
c: () => {
console.log(this)
}
}
a.b() // a
a.c() // window
let d = a.b
d() // window
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# this判断 下面输出为多少?
var name1 = 1;
function test() {
let name1 = 'kin';
let a = {
name1: 'jack',
fn: () => {
var name1 = 'black'
console.log(this.name1)
}
}
return a;
}
test().fn() // ?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
答案: 输出1
因为fn处绑定的是箭头函数,箭头函数并不创建this,它只会从自己的作用域链的上一层继承this。这里它的上一层是test(),非严格模式下test中this值为window。
- 如果在绑定fn的时候使用了function,那么答案会是 'jack'
- 如果第一行的 var 改为了 let,那么答案会是 undefind, 因为let不会挂到window上