JavaScript 语言核心

// ❌ 反例：var 泄漏到循环外
for (var i = 0; i < 3; i++) {
  // ...
}
console.log(i); // 3 —— i 泄漏到了循环外
 
// ✅ 正例：let 限制在块级作用域内
for (let j = 0; j < 3; j++) {
  // ...
}
console.log(j); // ReferenceError: j is not defined

// 全局作用域
const globalVar = "global";
 
function example() {
  // 函数作用域
  const functionVar = "function";
 
  if (true) {
    // 块级作用域
    const blockVar = "block";
    console.log(blockVar); // ✅ 'block'
  }
 
  console.log(blockVar); // ❌ ReferenceError
}
 
console.log(functionVar); // ❌ ReferenceError

const x = 10;
 
function outer() {
  const x = 20;
 
  function inner() {
    console.log(x); // 20 —— 查找"写代码时"最近的 x
  }
 
  return inner;
}
 
const fn = outer();
fn(); // 20 —— 不是全局的 10

console.log(x); // ❌ ReferenceError: Cannot access 'x' before initialization
let x = 10;

console.log(y); // undefined —— 不报错但值错了
var y = 20;
 
// 实际执行相当于：
var y; // 声明提升
console.log(y); // undefined
y = 20; // 赋值留在原处

function bad() {
  message = "hello"; // ❌ 没有声明，自动变全局变量（非严格模式）
}
 
bad();
console.log(message); // 'hello' —— 全局污染

function makeCounter() {
  let count = 0; // 外部作用域变量
 
  return function () {
    // 内部函数
    count++; // 访问外部变量
    return count;
  };
}
 
const counter = makeCounter();
counter(); // 1
counter(); // 2
counter(); // 3

// ❌ 反例：用 var 的循环
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 输出：3 3 3 —— 不是预期的 0 1 2

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 输出：0 1 2 —— let 在每次循环创建新的 i

for (var i = 0; i < 3; i++) {
  (function (j) {
    setTimeout(() => console.log(j), 100);
  })(i);
}
// 输出：0 1 2 —— 每次循环传入新的 j 到立即执行函数

function Counter() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    const id = setInterval(() => {
      // ❌ 这里的 count 永远是初始值 0
      console.log(count);
      setCount(count + 1);
    }, 1000);
 
    return () => clearInterval(id);
  }, []); // 空依赖数组
 
  return <div>{count}</div>;
}

// ✅ 方案 1：用函数式 setState，从最新 state 派生
useEffect(() => {
  const id = setInterval(() => {
    setCount((c) => c + 1); // c 是最新值，闭包不影响
  }, 1000);
  return () => clearInterval(id);
}, []);
 
// ✅ 方案 2：把 count 加入依赖数组（每次重建 interval）
useEffect(() => {
  const id = setInterval(() => {
    setCount(count + 1);
  }, 1000);
  return () => clearInterval(id);
}, [count]); // 依赖 count

const counter = (function () {
  let count = 0; // 私有变量，外部无法访问
 
  return {
    increment: () => ++count,
    decrement: () => --count,
    getValue: () => count,
  };
})();
 
counter.increment(); // 1
counter.increment(); // 2
counter.getValue(); // 2
counter.count; // undefined —— 外部访问不到

function attachHandler() {
  const bigData = new Array(1000000).fill("x"); // 100 万元素的大数组
 
  // ❌ 闭包里引用了 bigData，即使后续不需要也无法回收
  document.getElementById("btn").addEventListener("click", () => {
    console.log(bigData.length);
  });
}

function attachHandler() {
  const bigData = new Array(1000000).fill("x");
  const length = bigData.length; // 只保留需要的值
 
  document.getElementById("btn").addEventListener("click", () => {
    console.log(length); // 不再引用 bigData
  });
}

const animal = { eats: true };
const rabbit = { jumps: true };
 
// 把 animal 设为 rabbit 的原型
Object.setPrototypeOf(rabbit, animal);
 
console.log(rabbit.jumps); // true —— rabbit 自己的属性
console.log(rabbit.eats); // true —— 从 animal 原型找到
console.log(rabbit.flies); // undefined —— 整条链上没有

function Animal() {}
Animal.prototype.eats = true; // 给 Animal 构造函数的 prototype 加属性
 
const rabbit = new Animal(); // new 关键字让 rabbit.__proto__ 指向 Animal.prototype
 
console.log(rabbit.__proto__ === Animal.prototype); // true
console.log(rabbit.eats); // true

// ES6 class 写法
class Animal {
  constructor(name) {
    this.name = name;
  }
 
  eat() {
    return `${this.name} eats`;
  }
}
 
class Rabbit extends Animal {
  jump() {
    return `${this.name} jumps`;
  }
}
 
const rabbit = new Rabbit("White");
rabbit.eat(); // "White eats"
rabbit.jump(); // "White jumps"

function Animal(name) {
  this.name = name;
}
Animal.prototype.eat = function () {
  return `${this.name} eats`;
};
 
function Rabbit(name) {
  Animal.call(this, name); // 类似 super(name)
}
Rabbit.prototype = Object.create(Animal.prototype); // 设置原型
Rabbit.prototype.constructor = Rabbit;
Rabbit.prototype.jump = function () {
  return `${this.name} jumps`;
};

// ❌ 危险：直接合并对象时可能污染原型
function merge(target, source) {
  for (const key in source) {
    if (typeof source[key] === "object") {
      target[key] = target[key] || {};
      merge(target[key], source[key]);
    } else {
      target[key] = source[key];
    }
  }
}
 
// 攻击者构造的恶意输入
const malicious = JSON.parse('{"__proto__": {"isAdmin": true}}');
merge({}, malicious);
 
// 影响所有对象
const someObj = {};
console.log(someObj.isAdmin); // true —— Object.prototype 被污染了！

// ✅ 用 Object.create(null) 创建无原型对象
const safeObj = Object.create(null);
safeObj.__proto__; // undefined —— 没有原型链
 
// ✅ 使用 Map 替代普通对象（不会被原型污染）
const map = new Map();
map.set("key", "value");
 
// ✅ 合并时检查危险键
function safeMerge(target, source) {
  for (const key in source) {
    if (key === "__proto__" || key === "constructor" || key === "prototype") {
      continue; // 跳过危险键
    }
    // ...
  }
}

const cat = { sound: "meow" };
const lion = Object.create(cat); // lion 委托给 cat
 
console.log(lion.sound); // 'meow' —— 自己没有，去问 cat
 
cat.sound = "roar"; // 改父对象
console.log(lion.sound); // 'roar' —— 跟着变（不是复制）

function show() {
  console.log(this);
}
 
show(); // 浏览器：window；严格模式：undefined

const obj = {
  name: "Alice",
  greet() {
    console.log(this.name);
  },
};
 
obj.greet(); // 'Alice' —— this 指向 obj

const fn = obj.greet; // 把方法"摘下来"
fn(); // undefined —— this 不再指向 obj，回到默认绑定

class Button extends React.Component {
  handleClick() {
    console.log(this.props); // ❌ this 是 undefined
  }
 
  render() {
    return <button onClick={this.handleClick}>Click</button>;
    //                       ^^^^^^^^^^^^^^^^ 摘下来传给 onClick
  }
}

// 方案 1：构造函数里 bind
constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}
 
// 方案 2：用箭头函数（避免 this 问题）
handleClick = () => {
  console.log(this.props);
};
 
// 方案 3：渲染时包一层
render() {
  return <button onClick={() => this.handleClick()}>Click</button>;
}

function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}
 
const alice = { name: "Alice" };
 
greet.call(alice, "Hello"); // 'Hello, Alice'
greet.apply(alice, ["Hi"]); // 'Hi, Alice'
 
const greetAlice = greet.bind(alice);
greetAlice("Hey"); // 'Hey, Alice' —— bind 返回新函数

function Person(name) {
  this.name = name; // this 指向新创建的对象
}
 
const alice = new Person("Alice");
console.log(alice.name); // 'Alice'

function show() {
  console.log(this.name);
}
 
const obj1 = { name: "A", show };
const obj2 = { name: "B", show };
 
obj1.show(); // 'A' —— 隐式
obj1.show.call(obj2); // 'B' —— 显式 > 隐式
new obj1.show(); // undefined —— new 绑定优先级最高（this 是新对象）

const obj = {
  name: "Alice",
 
  greetNormal: function () {
    console.log(this.name); // 'Alice' —— 隐式绑定
  },
 
  greetArrow: () => {
    console.log(this.name); // undefined —— 箭头函数的 this 不是 obj
  },
};
 
obj.greetNormal(); // 'Alice'
obj.greetArrow(); // undefined（this 来自 obj 外层作用域）

class Timer {
  constructor() {
    this.seconds = 0;
  }
 
  // ❌ 普通函数：this 在 setInterval 回调里丢失
  startBad() {
    setInterval(function () {
      this.seconds++; // this 是 window / undefined
      console.log(this.seconds);
    }, 1000);
  }
 
  // ✅ 箭头函数：this 词法绑定，仍指向实例
  startGood() {
    setInterval(() => {
      this.seconds++; // this 仍指向 Timer 实例
      console.log(this.seconds);
    }, 1000);
  }
}

// 方式 1：脚本顶部（影响整个文件）
"use strict";
 
function example() {
  // ...
}
 
// 方式 2：函数顶部（只影响函数内）
function example() {
  "use strict";
  // ...
}

// 函数可以赋值给变量
const add = function (a, b) {
  return a + b;
};
 
// 函数可以作为参数传递
[1, 2, 3].map((n) => n * 2);
 
// 函数可以从函数返回
function makeAdder(x) {
  return (n) => n + x;
}
const add5 = makeAdder(5);
add5(10); // 15

// 数组方法都是高阶函数
const numbers = [1, 2, 3, 4, 5];
 
numbers.map((n) => n * 2); // [2, 4, 6, 8, 10]
numbers.filter((n) => n % 2 === 0); // [2, 4]
numbers.reduce((sum, n) => sum + n, 0); // 15

// ❌ 旧式 for 循环
const result = [];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    result.push(numbers[i] * 2);
  }
}
 
// ✅ 高阶函数链
const result = numbers.filter((n) => n % 2 === 0).map((n) => n * 2);

// 普通函数
function add(a, b, c) {
  return a + b + c;
}
add(1, 2, 3); // 6
 
// 柯里化版本
const curriedAdd = (a) => (b) => (c) => a + b + c;
curriedAdd(1)(2)(3); // 6
 
// 部分应用
const add1 = curriedAdd(1);
const add1And2 = add1(2);
add1And2(3); // 6

// ✅ 纯函数
function add(a, b) {
  return a + b;
}
 
// ❌ 非纯函数（依赖外部状态）
let counter = 0;
function impureAdd(a) {
  counter++;
  return a + counter;
}
 
// ❌ 非纯函数（修改参数）
function pushAndReturn(arr, item) {
  arr.push(item); // 副作用：修改了 arr
  return arr;
}

// ❌ 反例
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 3 3 3
}
 
// ✅ 正例
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 0 1 2
}

// ❌ 反例
useEffect(() => {
  setInterval(() => setCount(count + 1), 1000); // count 永远是 0
}, []);
 
// ✅ 正例
useEffect(() => {
  setInterval(() => setCount((c) => c + 1), 1000); // c 是最新值
}, []);

// ❌ 反例
class Btn extends React.Component {
  handleClick() {
    console.log(this.props); // undefined
  }
  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}
 
// ✅ 正例 1：箭头函数（类字段）
handleClick = () => {
  console.log(this.props);
};
 
// ✅ 正例 2：构造函数 bind
constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}

const obj = { x: 1 };
obj.x = 2; // ✅ 仍然成功
obj = { x: 3 }; // ❌ TypeError: Assignment to constant variable
 
const frozen = Object.freeze({ x: 1 });
frozen.x = 2; // ❌ 严格模式：TypeError；非严格模式：静默失败

function bad() {
  message = "hello"; // ❌ 没声明 → 全局变量
}
 
// 修复：加严格模式
("use strict");
function good() {
  message = "hello"; // ❌ ReferenceError —— 立即报错
}

// ❌ 反例
const obj = {
  name: "Alice",
  greet: () => console.log(this.name), // this 不是 obj
};
 
// ✅ 正例
const obj = {
  name: "Alice",
  greet() {
    console.log(this.name);
  }, // ES6 方法简写
};

const arr = [1, 2, 3];
Array.prototype.customMethod = function () {}; // 假设有人扩展了原型
 
// ❌ 反例
for (const key in arr) {
  console.log(key); // '0', '1', '2', 'customMethod'
}
 
// ✅ 正例
for (const value of arr) {
  console.log(value); // 1, 2, 3
}
 
// ✅ 正例（更现代）
arr.forEach((value) => console.log(value));