【面试题】JavaScript不要用name作全局变量名

这是2020海康威视的一道笔试题

var obj = {
	name: 'zpj',
	sayHello: ()=>'Hello ' + this.name
}
obj.sayHello(); // ？

1. 分析：

1. this指向取决于函数的调用方式。如果是function函数，当作方法调用打印的应该是’zpj’

var obj = {
	name: 'zpj',
	sayHello: function(){return 'Hello ' + this.name;}
}
obj.sayHello(); // 'zpj'

2. 箭头函数的this指向继承自外部环境的this指向。这里指向window，所以是在输出window.name。我们并没有var name;显式声明，所以认为window.name = undefined，猜测输出的应该是'Hello undefined'，但是事实上输出的却是‘Hello ’

var obj = {
	name: 'zpj',
	sayHello: ()=>'Hello ' + this.name
}
obj.sayHello(); // ‘Hello ’

3. 直接输出window.name发现输出不是undefined而是空字符串""
4. 原来，window.name是每个网页默认有的属性，记录open方法或iframe给定的name属性

window.open('https://www.baidu.com', 'mywin');
// 然后在新的页面里
window.name === 'mywin'; // true

5. 如果变量名不是特殊的name，输出就会“如您所愿”了

var obj = {
	_name: 'zpj',
	sayHello: ()=>'Hello ' + this._name
}
obj.sayHello(); // 'Hello undefined'

6. 可以使用call来改变this指向使得输出正确吗？答案是NO！箭头函数的this指向无法改变。

var obj = {
	_name: 'zpj',
	sayHello: ()=>'Hello ' + this._name
}
obj.sayHello.call(obj); // 'Hello undefined'

2. 总结

1. 全局环境下定义的变量会自动注册为window的属性
2. name, self, top, location, status 等不要作为全局变量名，因为他们都是window的属性
3. 对象方法不要使用箭头函数定义，this指向会错误
4. 箭头函数this指向无法改变