大家好，我是你们的老朋友FogLetter。今天我们要聊的话题是JavaScript中那些看似简单却暗藏玄机的概念——函数优先级、变量在window上的挂载，以及让人又爱又恨的this指向问题。这些知识点看似基础，却经常在面试和实际开发中给我们"挖坑"。让我们一起来揭开它们的神秘面纱吧！
一、函数声明与变量提升的"爱恨情仇"
1.1 函数优先原则
在JavaScript中，函数声明和变量声明都会被提升(hoisting)，但函数声明会被优先提升。这意味着函数会"踩在"变量肩膀上，占据更有利的位置。
console.log(foo); // ƒ foo() {}
function foo() {}
var foo = 1;
上面的代码输出的是函数定义而不是undefined或1，这就是函数优先的体现。
1.2 函数名的"只读"特性
更有趣的是，在函数体内部，函数名是一个不可修改的绑定：
(function b() {
b = 20;
console.log(b); // 仍然是函数b
})();
在严格模式下，这种行为会导致错误：
'use strict';
(function b() {
b = 20; // TypeError: Assignment to constant variable.
console.log(b);
})();
这是因为在严格模式下，函数名被视为一个常量，尝试修改它会抛出错误。
1.3 立即执行函数(IIFE)的陷阱
考虑这个例子：
var b = 10;
(function b() {
b = 20;
console.log(b); // [Function: b]
})();
console.log(b); // 10
这里立即执行函数内部的b被绑定为函数本身，尝试修改它不会影响外部的b变量。这展示了JavaScript作用域和绑定的精妙之处。
二、全局变量的"归宿"：window对象
2.1 var与window的"暧昧关系"
在浏览器环境中，使用var声明的全局变量会自动成为window对象的属性：
var a = 1;
console.log(window.a); // 1
这是ES5及之前版本的设计决策，全局变量和顶层对象(window)的属性是等价的。
2.2 let/const的"洁身自好"
ES6引入的let和const改变了这种行为：
let a = 1;
console.log(window.a); // undefined
它们声明的变量不会成为window对象的属性，而是存在于一个特殊的Script作用域（词法作用域）中。这避免了全局命名空间的污染。
2.3 不同环境下的全局对象
需要注意的是，全局对象在不同环境中是不同的：
- 浏览器中：window
- Node.js中：global
- Web Workers中：self
在严格模式下，全局变量的行为也有所不同：
'use strict';
var a = 1;
console.log(this.a); // undefined (在模块或严格模式下，this不指向window)
三、this的"七十二变"
this是JavaScript中最令人困惑的概念之一，它的值取决于函数的调用方式。
3.1 this的绑定规则
3.1.1 默认绑定（普通函数调用）
function showThis() {
console.log(this);
}
showThis(); // 浏览器中: window / 严格模式: undefined
3.1.2 隐式绑定（方法调用）
const obj = {
name: 'Alice',
greet: function() {
console.log(this.name);
}
};
obj.greet(); // 'Alice'
3.1.3 显式绑定（call/apply/bind）
function greet() {
console.log(this.name);
}
const alice = { name: 'Alice' };
greet.call(alice); // 'Alice'
3.1.4 new绑定（构造函数）
function Person(name) {
this.name = name;
}
const bob = new Person('Bob');
console.log(bob.name); // 'Bob'
3.2 箭头函数的this
箭头函数没有自己的this，它继承自外层作用域：
const obj = {
name: 'Alice',
greet: function() {
setTimeout(() => {
console.log(this.name); // 'Alice'
}, 100);
}
};
obj.greet();
3.3 this的"陷阱"与解决方案
3.3.1 回调函数中的this丢失
const obj = {
name: 'Alice',
greet: function() {
setTimeout(function() {
console.log(this.name); // undefined (this指向window)
}, 100);
}
};
解决方案：
- 使用箭头函数
- 使用bind
- 保存this引用
3.3.2 方法赋值导致的this丢失
const obj = {
name: 'Alice',
greet: function() {
console.log(this.name);
}
};
const greet = obj.greet;
greet(); // undefined
四、实战案例分析
4.1 事件处理中的this
<button id="btn">Click me</button>
<script>
document.getElementById('btn').addEventListener('click', function() {
console.log(this); // 指向按钮元素
});
</script>
4.2 类中的this
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log(`Hello, ${this.name}!`);
}
}
const alice = new Person('Alice');
alice.greet(); // 'Hello, Alice!'
4.3 模块中的this
在ES6模块中，顶层的this是undefined：
// module.js
console.log(this); // undefined
五、最佳实践与总结
- 优先使用const和let：避免var带来的变量提升和全局污染问题
- 理解函数提升：记住函数声明优先于变量提升
- 明确this指向：
- 方法调用时this指向调用对象
- 普通函数调用时注意严格模式差异
- 箭头函数继承外层this
- 避免全局污染：使用IIFE或模块模式封装代码
- 合理使用严格模式：避免意外的全局变量和this指向问题
记住，在JavaScript的世界里，理解规则比记住规则更重要。Happy coding! 🚀
