JavaScript 核心知识点（四）

数据类型 + 作用域 + 闭包

1. 原始类型 & 引用类型

原始类型（值类型）：Number/String/Boolean/Null/Undefined/Symbol/BigInt

存栈，赋值是拷贝值

javascript 复制代码

let a = 10;
let b = a;
b = 20;
console.log(a); // 10 不受影响

引用类型：Object/Array/Function

存堆，赋值是拷贝地址（引用）

javascript 复制代码

let obj1 = { name: "张三" };
let obj2 = obj1;
obj2.name = "李四";
console.log(obj1.name); // 李四 跟着变

2. 深浅拷贝

浅拷贝：只拷贝第一层，深层还是引用关系

javascript 复制代码

// 方法1：展开运算符
let obj = { a: 1, b: { c: 2 } };
let copy = { ...obj };
copy.b.c = 999;
console.log(obj.b.c); // 999 深层受影响

深拷贝：完全独立，互不影响

javascript 复制代码

// 简易深拷贝（面试常用）
let deep = JSON.parse(JSON.stringify(obj));
deep.b.c = 888;
console.log(obj.b.c); // 999 不受影响

3. 作用域链、闭包原理

作用域：变量 / 函数可访问的范围

全局作用域
函数作用域
块级作用域（let/const）

作用域链

内层找变量 → 先找自己 → 再找外层 → 直到全局

javascript 复制代码

let a = 10;
function fn() {
  let b = 20;
  function inner() {
    console.log(a + b); // 能访问到外层a、b
  }
  inner();
}
fn(); // 30

闭包：函数嵌套，内层函数访问外层函数变量，且被外部保留 → 形成闭包

作用

私有化变量
延长变量生命周期
保存状态

javascript 复制代码

function outer() {
  let count = 0; // 被闭包保护
  return function inner() {
    count++;
    console.log(count);
  };
}

const fn = outer();
fn(); // 1
fn(); // 2
fn(); // 3

闭包原理

外层函数执行完毕本该销毁，但内层函数被引用 → 作用域链不销毁 → 变量保留。

4. this 指向（普通函数 / 箭头函数 / 定时器）

1）普通函数

谁调用，this 指向谁

javascript 复制代码

const obj = {
  fn: function () {
    console.log(this); // obj
  }
};
obj.fn();

2）箭头函数

没有自己的 this，继承外层作用域的 this

javascript 复制代码

const obj = {
  fn: () => {
    console.log(this); // window/全局
  }
};

3）定时器

setTimeout 里的普通函数 → this = window

javascript 复制代码

setTimeout(function () {
  console.log(this); // window
}, 1000);

定时器 + 箭头函数 → this 继承外层

javascript 复制代码

const obj = {
  fn: function () {
    setTimeout(() => {
      console.log(this); // obj
    }, 1000);
  }
};
obj.fn();

一句话速记

原始类型赋值拷贝值，引用类型赋值拷贝地址
浅拷贝一层，深拷贝完全独立
作用域链：由内向外找变量
闭包：内层访问外层变量且被保留
普通函数 this 看调用，箭头函数 this 看外层

总结

1.原始类型存栈、赋值传值；引用类型存堆、赋值传地址

2.浅拷贝只复制第一层，深拷贝完全独立

3.作用域链是变量查找规则，闭包是函数 + 作用域的组合

4.普通函数this看调用者，箭头函数this继承外层，定时器普通函数this=window

以上是本次分享全部内容。

非常感谢您阅读本篇博客文章。希望这篇文章能够为您提供有价值的信息，并帮助您解决问题或增长知识。如果您对文章内容有任何问题、建议或反馈。同时，也欢迎您继续关注我的博客，获取更多有趣、实用的内容。

期待与您在下一篇文章再次见面。谢谢！