函数里的this指向问题

1.当函数没有用作构造函数时，this指向window

2.用作构造函数时，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();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

 

 

输出：

tools.js:249     2
tools.js:255     4
tools.js:244     1
tools.js:244     1
tools.js:249     2
tools.js:252     3
tools.js:252     3

ES6里有一种新的函数声明方法：箭头函数

利用这种语法可以很方便的声明一个函数，具体的语法，在这里就不提了，网上有很多资料可以看的，我就来说下箭头函数中，this指向的问题

下看下面的例子：

var foo = () => {
    console.log('箭头函数：', this.box)
}
var bar = function () {
    console.log('普通函数：', this.box)
}
var box = 10

foo.call({ box: 20 })
bar.call({ box: 20 })
bar()
// 箭头函数： 10
// 普通函数： 20
// 普通函数： 10

从上面的例子，可以看出，箭头函数里的this指向是更改不了的，它的this始终指向定义时所处的上下文，上面的foo定义时所在的上下文是window，所以运行之后的结果输出的是10，普通函数中的this指向的是运行时所在的上下文，所以bar函数运行后输出的是20

好，为了理解什么是定义时的上下文，我们在看下面的例子

function foo () {
    setTimeout(() => {
        console.log('箭头函数:', this.box)
    }, 200)
}
var box = 10

foo.call({ box: 20 })
// 箭头函数: 20


function foo () {
    setTimeout(function () {
        console.log('普通函数：', this.box)
    }, 200)
}
var box = 10

foo.call({ box: 20 })
// 普通函数： 10

上面的例子有些特别，有些人就可能会有疑问，为什么foo函数执行之后输出的是20为不是10？

这是因为只有当函数foo被调用之后，foo里面的code才会被编译，之后执行，所以因为foo在被调用的时候，它的this指向{box: 20}，所以setTimeout里的箭头函数的上下文就是{box: 20}，所以输出20

而下面的普通函数里的this默认指向的就是window，所以输出10