在学习JS时你是不是被prototype__proto__和原型链整的晕头转向？别急，这篇文章带你彻底吃透它们！

为什么要有原型？

刚开始写JS时我总是不理解为什么要用原型。

从先看一个例子来看。假设我们想创建多个“人”的对象，每个人都有名字并能打招呼。初学者可能会这样写：

function Person {
this.name = name;this.sayHello = function {
console.log;}，}
let p1 = new Person;说起来，let p2 = new Person;

这个写法存在严重的性能问题！

• 每次new一个实例时都会在内存中创建一个新的sayHello函数；
• 如果创建成千上万个实例，就会浪费大量内存；说起来，
• 原型就是为了解决这个问题而诞生的——把公共方法放到共享的地方！

一.显示原型prototype

"构造函数和实例之间的桥梁"——这就是prototype！说起来，

• 关键点1：每个函数天生自带一个prototype属性！怎么说呢，它是构造函数与实例之间的"中间人"
• 关键点2：可以把公共属性/方法挂载到prototype上。让所有实例共享，这能节省90%的内存！

"之前我总混淆prototype和__proto__，现在终于明白它们根本不是同一类东西了"

// 公共方法只需要定义一次！Person.prototype.sayHello = function {
console.log;}，// 测试
const person1 = new Person;const person2 = new Person;console.log，// true!是同一个函数引用
console.log);// false,sayHello在原型上
console.log);// true

注意事项警告！⚠️

• ❌不能通过实例修改原型上的属性值;老实说，
• ❌不要给prototype直接赋值对象字面量!

// 错误做法！Person.prototype = { sayHello {...} };说起来，// constructor指向Object了！// 应该这样：
Object.assign {...} });

• ❌避免在循环中动态修改原型!

二.隐式原型__proto__

"原来所有对象都有一个'秘密通道'指向它的构造函数!" - 一位开发者感叹道

• 关键发现1: 所有对象都有__proto__属性,它像一座桥梁连接着当前对象和它的构造函数!       )
• 关键发现2: JavaScript引擎查找属性时采用这样的搜索方法: 查找自身 → 没找到就去 __proto__ → 再没有就沿着 __proto__ 不断往上... 直到找到或者遇到null终止
• 关键发现3: 每个constructor属性记录着创建当前对象的是哪个构造函数!(即: constructor === 构造器本身) 比如的观点是，

  Object.getPrototypeOf === obj.__proto__
  obj.constructor === obj.__proto__.constructor
  

实际使用场景💡

• 🔹通过instanceof判断类型时检查的是右边构造函数.prototype是否出现在左边实例.__ proto __ 的链条中!

  class Dog {}
  class Cat {}
  const a=new Dog;a instanceof Dog // true
  a instanceof Cat // false
  // 本质上检查的是:
  Dog.prototype.isPrototypeOf // true
  Cat.prototype.isPrototypeOf // false
  

• 🔹通过for...in循环遍历时不仅遍历自身可枚举属性还会遍历整个原型链上的可枚举属性!

  const obj={x:1};obj.y=2，Object.defineProperty;for{
  if)continue;console.log，// x y
  }
  

• 🔹通过getPrototypeOf/getOwnPropertyNames/getOwnPropertyDescriptor等API操作原型链更使用较稳定!

  Object.getPrototypeOf===obj.__ proto __;// 获取真正继承来自父类而非自身定义过且不可枚举的属性列表:
  Object.getOwnPropertyNames.filter)
  

...

 
⚠️警告:
——————————————————————-
————⚠️禁止直接修改程序内置对象!—— ⚠️避免循环引用导致栈溢出!—— ⚠️谨慎覆盖toString/valueOf等特殊方法!其实，——————————————————————-

javascript
const arr=;

arr._ proto _={length:5};// 震惊，array length竟然变成5了?，console.log;//5，这绝不是你想要看到结果!

: 原型链查找过程示意图

### 原理详细说明🧠

属 性 名称	属 性所 在位置	作 用
prototype	函 数 本 身	提供给所有实例共享使用
__ proto _	对 象 自 身	指向其构造器
constructor	原 型 对 象 上	指回其构造器本身

💼常见面试题回顾:

Q1:如何判断两个变量引用同一个对象?A:obj1===obj2||Object.is

Q2:如何清空一个对象但保留其prootype?A:for{delete obj;}或Object.keys.forEach;

Q3:为什么说null没有prorotype?A:因为null表示"无",没有任何隐含信息可言。

至于💫常用方法，

✅优先使用 ES6 Class语法糖包装传统OOP风格!recommendtxt>

✅将公共方法挂载至 静态static成员或独立工具库中!importanttxt>

✅使用 Symbol私有化保护敏感数据!safetytxt>

从🚀进阶预告来看，

至于我们探讨。·]] ·]] ·]]

请继续关注后续精彩内容...

---

``javascript // 基础案例演练: function Grandfar{ this.familyName=王`;}

Grandfar.prototype.house=function{ return祖宅;}，

function Far{ this.age=45;}

// 建立血缘关系: Far.protoType=new Grandfar;Far.protoType.occupation=商人;

function Son{}

// 延续家族传统: Son.protoType=new Far;

// 新生代继承者诞生: const child=new Son;

// 验证DNA遗传方法: child.familyName;// 王 child.age;// 45 child.house;// 祖宅 child.occupation;// 商人

运行方式分析: 当访问child.house时发生以下过程:

· 查找Son prototype → 没有house · 接着追溯至Far prototype → 没有house · 再继续延伸至Grandfar prototype → Bingo!找到了，

内部机制揭秘: ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌───────┐ ┌──┬──┐ │Grandfath├─▶│HouseMethod│ │Far├───▶│Son├───▶│{} │ │Null├──▶│ └──┴──│ er │ │ │ │ ├─────┘ └─────┘ └───▲───┘ └──▲──┘ └───▲ ├── ████ ███ ██ ██ ██ ├─────┴───┴───▲ ├── │ ↑ ↑ ↑ ↑ └─────────┴───┬───┴ ├── Grandparent Protype Farson Protype Farson Protype Object Protype Null Terminate Chain

markdown Click Here To See The Complete Process Of Property Search In Action!

---