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这个方法
函数表达式和函数声明的区分(函数提升比变量提升的优先级高)
函数在运行的瞬间,生成一个活动对象(Active Object),简称AO
- 参考博客:https://www.cnblogs.com/libin-1/p/6101185.html
- 分析参数 函数接收形式参数,添加到AO的属性,并且这个时候值为undefine,例如AO.age=undefine 接收实参,添加到AO的属性,覆盖之前的undefine
- 分析变量声明,如var age;或var age=23; 如果上一步分析参数中AO还没有age属性,则添加AO属性为undefine,即AO.age=undefine 如果AO上面已经有age属性了,则不作任何修改
- 分析函数的声明,如果有function age(){} 把函数赋给AO.age ,覆盖上一步分析的值
箭头函数中的this 判断
箭头函数里面的this是继承它作用域父级的this, 即声明箭头函数处的this
let a = {
b: function() {
console.log(this)
},
c: () => {
console.log(this)
}
}
a.b() // a: 普通函数的this是在调用的时候决定的
a.c() // window:箭头函数的this看外层的是否有函数, 如果有,外层函数的this就是内部箭头函数的this,如果没有,则this是window。
let d = a.b
d() // window
this判断 下面输出为多少?
var name1 = 1;
function test() {
let name1 = 'kin';
let a = {
name1: 'jack',
fn: () => {
var name1 = 'black'
console.log(this.name1) // 看当前外部,有函数,外层的this就是内部的this,没有的话就是window(JS只有全局作用域和函数作用域)
}
}
return a;
}
test().fn() // ?
答案: 输出1
因为fn处绑定的是箭头函数,箭头函数并不创建this,它只会从自己的作用域链的上一层继承this。这里它的上一层是test(),非严格模式下test中this值为window。
- 在非严格模式下,由于this必须是一个对象,所以就默认为指向全局对象window,在严格模式下this为undefined
- 如果在绑定fn的时候使用了function,那么答案会是 'jack'
- 如果第一行的 var 改为了 let,那么答案会是 undefind, 因为let不会挂到window上