1
// 类型检测
2
typeof 123           // 'number'
3
typeof 'str'         // 'string'
4
typeof true          // 'boolean'
5
typeof undefined     // 'undefined'
6
typeof null          // 'object' (历史 bug)
7
typeof Symbol()      // 'symbol'
8
typeof []            // 'object'
9
typeof function(){}  // 'function'
10

11
// 准确检测
12
Object.prototype.toString.call(null)      // '[object Null]'
13
Object.prototype.toString.call([])        // '[object Array]'
14
Object.prototype.toString.call(new Date()) // '[object Date]'
15

16
Array.isArray([])        // true
17
instanceof               // 检测原型链

1
null == undefined    // true（宽松相等）
2
null === undefined   // false（严格相等）
3

4
Number(null)         // 0
5
Number(undefined)    // NaN
6

7
// 实际使用
8
let obj = null;       // 明确表示空对象
9
let value;            // undefined，未赋值
10

11
function fn() {}
12
fn();                 // undefined，无返回值

1
// 浅拷贝：只复制第一层，引用类型仍共享
2
const obj = { a: 1, b: { c: 2 } };
3
const shallow = { ...obj };
4
// 或 Object.assign({}, obj)
5

6
shallow.b.c = 999;
7
console.log(obj.b.c); // 999，原对象也被修改
8

9
// 深拷贝：递归复制所有层级
10
const deep = JSON.parse(JSON.stringify(obj));
11
deep.b.c = 888;
12
console.log(obj.b.c); // 2，原对象不受影响

1
// 方法1：JSON（简单场景，有缺陷）
2
const copy1 = JSON.parse(JSON.stringify(obj));
3
// 缺陷：undefined/function/Symbol 会丢失，循环引用报错
4

5
// 方法2：递归实现
6
function deepClone(obj, map = new WeakMap()) {
7
  if (obj === null || typeof obj !== 'object') return obj;
8
  if (obj instanceof Date) return new Date(obj);
9
  if (obj instanceof RegExp) return new RegExp(obj);
10

11
  // 处理循环引用
12
  if (map.has(obj)) return map.get(obj);
13

14
  const clone = Array.isArray(obj) ? [] : {};
15
  map.set(obj, clone);
16

17
  for (let key in obj) {
18
    if (obj.hasOwnProperty(key)) {
19
      clone[key] = deepClone(obj[key], map);
20
    }
21
  }
22
  return clone;
23
}
24

25
// 方法3：structuredClone（现代浏览器）
26
const copy3 = structuredClone(obj);

1
// 作用域链：查找变量时逐级向上
2
var a = 'global';
3

4
function outer() {
5
  var b = 'outer';
6

7
  function inner() {
8
    var c = 'inner';
9
    console.log(a); // 'global'，沿作用域链找到全局
10
    console.log(b); // 'outer'
11
    console.log(c); // 'inner'
12
  }
13

14
  inner();
15
}
16

17
// 块级作用域
18
if (true) {
19
  let x = 1;
20
  var y = 2;
21
}
22
console.log(x); // ReferenceError
23
console.log(y); // 2（var 没有块级作用域）

1
// 闭包示例
2
function counter() {
3
  let count = 0; // 被闭包引用，不会被垃圾回收
4

5
  return {
6
    increment: () => ++count,
7
    decrement: () => --count,
8
    getCount: () => count
9
  };
10
}
11

12
const c = counter();
13
c.increment(); // 1
14
c.increment(); // 2
15
c.getCount();  // 2

1
// 1. 数据私有化
2
function createWallet(initial) {
3
  let balance = initial;
4

5
  return {
6
    deposit(amount) { balance += amount; },
7
    withdraw(amount) { balance -= amount; },
8
    getBalance() { return balance; }
9
  };
10
}
11

12
// 2. 函数柯里化
13
function multiply(a) {
14
  return function(b) {
15
    return a * b;
16
  };
17
}
18
const double = multiply(2);
19
double(5); // 10
20

21
// 3. 防抖节流
22
function debounce(fn, delay) {
23
  let timer = null; // 闭包保存定时器
24
  return function(...args) {
25
    clearTimeout(timer);
26
    timer = setTimeout(() => fn.apply(this, args), delay);
27
  };
28
}
29

30
// 4. 模块化（IIFE）
31
const module = (function() {
32
  let privateVar = 'private';
33

34
  return {
35
    getPrivate: () => privateVar
36
  };
37
})();

1
// 变量提升
2
console.log(a); // undefined（var 提升）
3
var a = 1;
4

5
console.log(b); // ReferenceError（暂时性死区）
6
let b = 2;
7

8
// 经典面试题
9
for (var i = 0; i < 3; i++) {
10
  setTimeout(() => console.log(i), 100);
11
}
12
// 输出：3 3 3
13

14
for (let j = 0; j < 3; j++) {
15
  setTimeout(() => console.log(j), 100);
16
}
17
// 输出：0 1 2（每次循环创建新的 j）
18

19
// const 注意
20
const obj = { a: 1 };
21
obj.a = 2;        // ✅ 允许，修改属性
22
obj = { b: 1 };   // ❌ 报错，不能重新赋值

1
// 1. 对象方法调用
2
const obj = {
3
  name: 'obj',
4
  fn() { console.log(this.name); }
5
};
6
obj.fn(); // 'obj'
7

8
// 2. 普通函数调用
9
function fn() { console.log(this); }
10
fn(); // window（非严格模式）
11

12
// 3. 构造函数
13
function Person(name) {
14
  this.name = name;
15
}
16
const p = new Person('Tom');
17
console.log(p.name); // 'Tom'
18

19
// 4. call/apply/bind
20
const ctx = { name: 'ctx' };
21
fn.call(ctx);    // this = ctx
22
fn.apply(ctx);   // this = ctx
23
const bound = fn.bind(ctx);
24
bound();         // this = ctx
25

26
// 5. 箭头函数
27
const arrow = {
28
  name: 'arrow',
29
  fn: () => console.log(this.name), // 外层 this（window）
30
  fn2() {
31
    return () => console.log(this.name); // 外层 this（arrow）
32
  }
33
};
34
arrow.fn();      // undefined
35
arrow.fn2()();   // 'arrow'
36

37
// 经典面试题
38
const person = {
39
  name: 'person',
40
  sayName: function() {
41
    console.log(this.name);
42
  }
43
};
44

45
const fn1 = person.sayName;
46
fn1(); // undefined（this 丢失）
47

48
const fn2 = person.sayName.bind(person);
49
fn2(); // 'person'

1
// 原型链图示
2
// 实例 --> 构造函数.prototype --> Object.prototype --> null
3

4
function Person(name) {
5
  this.name = name;
6
}
7
Person.prototype.sayHi = function() {
8
  console.log('Hi, ' + this.name);
9
};
10

11
const p = new Person('Tom');
12

13
p.__proto__ === Person.prototype;           // true
14
Person.prototype.__proto__ === Object.prototype; // true
15
Object.prototype.__proto__ === null;        // true
16

17
// 属性查找顺序
18
p.name;       // 自身属性
19
p.sayHi();    // 原型上的方法
20
p.toString(); // Object.prototype 上的方法

1
// prototype：构造函数的原型对象
2
Person.prototype; // { sayHi: f, constructor: Person }
3

4
// __proto__：实例的原型引用（非标准但广泛支持）
5
p.__proto__; // 同 Person.prototype
6

7
// constructor：原型对象指向构造函数的引用
8
Person.prototype.constructor === Person; // true
9

10
// Object.getPrototypeOf（标准方法）
11
Object.getPrototypeOf(p) === Person.prototype; // true

1
// 1. 原型链继承（缺陷：引用类型共享）
2
function Parent() {
3
  this.hobbies = ['reading'];
4
}
5
function Child() {}
6
Child.prototype = new Parent();
7

8
// 2. 构造函数继承（缺陷：无法继承原型方法）
9
function Parent(name) {
10
  this.name = name;
11
}
12
function Child(name) {
13
  Parent.call(this, name);
14
}
15

16
// 3. 组合继承（常用）
17
function Parent(name) {
18
  this.name = name;
19
}
20
Parent.prototype.sayName = function() {
21
  console.log(this.name);
22
};
23
function Child(name, age) {
24
  Parent.call(this, name); // 继承实例属性
25
  this.age = age;
26
}
27
Child.prototype = new Parent(); // 继承原型方法
28
Child.prototype.constructor = Child;
29

30
// 4. 寄生组合继承（最佳方案）
31
function inheritPrototype(Child, Parent) {
32
  const prototype = Object.create(Parent.prototype);
33
  prototype.constructor = Child;
34
  Child.prototype = prototype;
35
}
36
function Child(name, age) {
37
  Parent.call(this, name);
38
  this.age = age;
39
}
40
inheritPrototype(Child, Parent);
41

42
// 5. ES6 Class（推荐）
43
class Parent {
44
  constructor(name) {
45
    this.name = name;
46
  }
47
  sayName() {
48
    console.log(this.name);
49
  }
50
}
51
class Child extends Parent {
52
  constructor(name, age) {
53
    super(name); // 必须先调用 super
54
    this.age = age;
55
  }
56
}

1
// instanceof 检测构造函数的 prototype 是否出现在对象的原型链上
2
[] instanceof Array;    // true
3
[] instanceof Object;   // true（原型链上）
4

5
// 手动实现
6
function myInstanceof(obj, Constructor) {
7
  let proto = Object.getPrototypeOf(obj);
8
  const prototype = Constructor.prototype;
9

10
  while (proto !== null) {
11
    if (proto === prototype) return true;
12
    proto = Object.getPrototypeOf(proto);
13
  }
14
  return false;
15
}
16

17
myInstanceof([], Array);  // true
18
myInstanceof([], Object); // true
19
myInstanceof({}, Array);  // false

1
// 1. let/const 块级作用域
2
let x = 1;
3
const y = 2;
4

5
// 2. 解构赋值
6
const { name, age } = person;
7
const [first, ...rest] = array;
8

9
// 3. 模板字符串
10
const str = `Hello, ${name}!`;
11

12
// 4. 箭头函数
13
const fn = (a, b) => a + b;
14

15
// 5. 默认参数
16
function greet(name = 'World') {}
17

18
// 6. 展开运算符
19
const arr = [...arr1, ...arr2];
20
const obj = { ...obj1, ...obj2 };
21

22
// 7. Promise
23
Promise.resolve(1).then(v => console.log(v));
24

25
// 8. async/await
26
async function fetchData() {
27
  const res = await fetch(url);
28
  return res.json();
29
}
30

31
// 9. Class
32
class Person {
33
  constructor(name) { this.name = name; }
34
  sayHi() { console.log(`Hi, ${this.name}`); }
35
}
36

37
// 10. Module
38
import { foo } from './module';
39
export const bar = 1;
40

41
// 11. Symbol
42
const id = Symbol('id');
43

44
// 12. Map/Set
45
const map = new Map([['key', 'value']]);
46
const set = new Set([1, 2, 3]);
47

48
// 13. Proxy/Reflect
49
const proxy = new Proxy(target, {
50
  get(target, prop) { return Reflect.get(target, prop); }
51
});
52

53
// 14. 可选链 (ES2020)
54
const city = user?.address?.city;
55

56
// 15. 空值合并 (ES2020)
57
const value = input ?? 'default';

1
// Map 操作
2
const map = new Map();
3
map.set('key', 'value');
4
map.set(1, 'number key');
5
map.set({}, 'object key'); // 对象作为键
6

7
map.get('key');      // 'value'
8
map.has('key');      // true
9
map.delete('key');   // true
10
map.size;            // 2
11

12
// 遍历
13
map.forEach((v, k) => console.log(k, v));
14
for (const [k, v] of map) { }
15

16
// 转换
17
const arr = [...map];           // Map -> Array
18
const obj = Object.fromEntries(map); // Map -> Object
19
const map2 = new Map(Object.entries(obj)); // Object -> Map

1
// Object.defineProperty（Vue 2）
2
function defineReactive(obj, key, val) {
3
  Object.defineProperty(obj, key, {
4
    get() { return val; },
5
    set(newVal) { val = newVal; }
6
  });
7
}
8
// 缺陷：无法监听 obj.newKey = value
9

10
// Proxy（Vue 3）
11
const proxy = new Proxy(target, {
12
  get(target, key, receiver) {
13
    track(target, key); // 依赖收集
14
    return Reflect.get(target, key, receiver);
15
  },
16
  set(target, key, value, receiver) {
17
    trigger(target, key); // 触发更新
18
    return Reflect.set(target, key, value, receiver);
19
  },
20
  deleteProperty(target, key) {
21
    trigger(target, key);
22
    return Reflect.deleteProperty(target, key);
23
  }
24
});
25
// 优势：可以监听所有操作