1. 函数：JavaScript 的基石
函数在 JavaScript 中是一等公民（First-Class Citizens），意味着它们可以：
- 被赋值给变量
- 作为参数传递给其他函数
- 作为其他函数的返回值
- 拥有属性和方法（虽然函数本身也是对象）
// 函数声明
function greet(name) {
return `Hello, ${name}!`;
}
// 函数表达式
const sayGoodbye = function(name) {
return `Goodbye, ${name}!`;
};
// 箭头函数 (ES6+)
const add = (a, b) => a + b;
// 作为参数 (高阶函数)
function processUser(user, callback) {
console.log(`Processing ${user.name}…`);
callback(user);
}
processUser({ name: 'Alice' }, (u) => console.log(`Callback called for ${u.name}`));
// 作为返回值 (闭包)
function createCounter() {
let count = 0;
return function() {
count += 1;
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
闭包（Closure）
当一个内部函数访问了其外部函数作用域的变量时，就形成了闭包。即使外部函数已经执行完毕，内部函数仍然可以访问那些变量（如上面 createCounter 的例子）。闭包是实现模块化、数据封装和记忆化（Memoization）的关键机制。
2. 对象：数据的结构化表示
对象是键值对（Key-Value Pairs）的集合，用于表示复杂的数据结构。
// 对象字面量
const person = {
firstName: 'John',
lastName: 'Doe',
age: 30,
fullName: function() { // 方法
return `${this.firstName} ${this.lastName}`;
}
};
// 访问属性
console.log(person.firstName); // 'John'
console.log(person['lastName']); // 'Doe'
console.log(person.fullName()); // 'John Doe'
// 动态添加属性
person.job = 'Developer';
console.log(person.job); // 'Developer'
// 构造函数 (传统方式)
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.fullName = function() {
return `${this.firstName} ${this.lastName}`;
};
}
const john = new Person('John', 'Doe', 30);
3. 函数与对象的深度结合：面向对象与原型链
JavaScript 使用**原型（Prototype）**来实现继承（Inheritance），这是它与其他基于类的语言（如 Java）的主要区别。
原型链（Prototype Chain）
- 每个对象都有一个内部链接指向另一个对象（它的原型）。
- 当你试图访问一个对象的属性时，如果该对象自身没有这个属性，JavaScript 会沿着原型链向上查找，直到找到该属性或到达链的末端（null）。
- Object.prototype 是所有对象的最终原型（除了那些明确设置为 null 的）。
// 使用构造函数创建对象
function Animal(name) {
this.name = name;
}
// 在构造函数的 prototype 上添加方法 (所有实例共享)
Animal.prototype.speak = function() {
console.log(`${this.name} makes a noise.`);
};
function Dog(name) {
Animal.call(this, name); // 调用父类构造函数
}
// 设置 Dog.prototype 的原型为 Animal.prototype (继承)
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // 修正 constructor 指向
Dog.prototype.speak = function() { // 方法重写
console.log(`${this.name} barks.`);
};
const d = new Dog('Rex');
d.speak(); // 'Rex barks.'
console.log(d instanceof Dog); // true
console.log(d instanceof Animal); // true
ES6 类（Class）语法糖
ES6 引入了 class 关键字，它提供了更清晰、更接近传统面向对象语言的语法来创建构造函数和实现继承，但其底层仍然是基于原型的。
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
constructor(name) {
super(name); // 调用父类构造函数
}
speak() { // 方法重写
console.log(`${this.name} barks.`);
}
}
const d = new Dog('Rex');
d.speak(); // 'Rex barks.'
4. 综合实战：构建一个小型模块
利用函数（闭包）和对象（数据封装）来创建一个简单的计数器模块，模拟模块化开发。
// 模块模式 (利用 IIFE 和闭包)
const CounterModule = (function() {
// 私有变量 (通过闭包隐藏)
let count = 0;
// 私有函数
function log(message) {
console.log(`[Counter] ${message}`);
}
// 返回一个包含公有方法的对象
return {
increment: function() {
count += 1;
log(`Incremented to ${count}`);
return count;
},
decrement: function() {
count -= 1;
log(`Decremented to ${count}`);
return count;
},
getCount: function() {
return count;
}
};
})();
console.log(CounterModule.getCount()); // 0
CounterModule.increment(); // [Counter] Incremented to 1
CounterModule.increment(); // [Counter] Incremented to 2
console.log(CounterModule.getCount()); // 2
CounterModule.decrement(); // [Counter] Decremented to 1
// 无法直接访问 count 或 log
总结
JavaScript 的核心魅力在于其函数和对象的强大与灵活性：
- 函数：作为一等公民，支持高阶函数和闭包，是实现抽象、模块化和函数式编程的基础。
- 对象：通过原型链实现继承，提供了数据封装和结构化的能力。
- 结合：函数（特别是构造函数、闭包）与对象（实例、原型）共同构建了 JavaScript 的面向对象编程模型。ES6 的 class 提供了更友好的语法。
理解这些核心概念及其相互关系，是掌握 JavaScript 的关键。
