前言

在 JavaScript 里，“原型”这个词听起来高大上，其实就是一个“默认备胎”：当对象自己找不到属性时，就沿着原型这条暗道去“亲戚家”借。没有类、没有蓝图，仅靠这条备胎链，就能把公共方法层层复用，让内存省一半、代码少一半。本文只聊“原型”本身——prototype、__proto__ 这些眼前能用的工具，把“借东西”的流程画成一张家谱图，帮你先看清“亲戚”是谁、住哪、怎么串门。至于后面更高阶的封装、多态、模块化，等我们把这条链走熟再升级也不迟。

一： 原型 prototype

又称显示原型，函数天生拥有的一个属性 ，将构造函数中的一些固定的属性和方法挂载到原型上，在创建实例的时候，就不需要重复执行这些属性和方法了，我们先来创造一个环境，主角依然是我们的小米 su7 ，su7 的属性有无数个，但是各个车主只需要选择并改动的属性并没有那么多，这个时候我们就能用得到原型。

Car.prototype.name = 'su7-Ultra'
Car.prototype.lang = 4800
Car.prototype.height = 1400
Car.prototype.weight = 1.5

function Car(color) {
  this.color = color
}
const car1 = new Car('pink')
const car2 = new Car('green')
console.log(car1);

用原型之后我们只需要输入想要的颜色即可，不需要反反复复创建函数。同时挂载在原型上的属性是可以直接被实例对象访问到的（如下图）

并且实例对象无法修改 构造函数 原型上的属性值，

Person.prototype.say = '我太帅了'
function Person() {
  this.name = '饶总'
}
const p = new Person()  
p.say = 'hello'
const p2 = new Person()
console.log(p2.say);

这个时候同时有两个 key 都为 say ，但 value 不相同，一个被挂在构造函数的原型上，一个被挂在第一个实例对象 p 上，按照上面说法实例对象无法修改构造函数原型上的属性值，但是打印出来真是这样吗，究竟是 '我太帅了' ，还是 'hello'，我们来揭晓答案

果真是实例对象无法修改构造函数原型上的属性值。

二：对象原型 __proto__

又称隐式原型，每一个对象都拥有一个 __proto__ 属性，该属性值也是一个对象， v8在访问对象中的一个属性时，会先访问该对象中的显示属性，如果找不到，就回去对象的隐式原型中查找，实例对象的隐式原型 === 构造函数的显示原型，所以如果实例对象的隐式原型找不到那么就再会去构造函数的显示原型上找

这不得不再引出一个概念—— 原型链：v8 在访问对象中的属性时，会先访问该对象中的显示属性，如果找不到，就去对象的隐式原型上找，如果还找不到，就去__proto__.__proto__ 上找，层层往上，直到找到null为止。这种查找关系被称为原型链

为了更好的理解它，我们来举个继承例子

function Parent() {
  this.lastName = '张'
}
Child.prototype = new Parent()  // {lastName: '张'}.__proto__ = Parent.prototype
function Child() {
  this.age = 18
}
const c = new Child() 
console.log(c.lastName);

在实例对象中我们只能找到儿子的年龄属性，姓氏张是儿子从父亲那里继承的，我们要查到儿子的姓氏，根据原型链原理我们先从实例对象 c 中找有没有显示属性是关于姓氏的，很明显并没有，接着就去实例对象的隐式原型上找，也没有，最后就来到了构造函数的显示原型上查找，在代码的第四行可以看到构造函数的显示原型被赋值上了 lastName 属性，所以最终是否可以查找得到姓氏张呢？我们来直接看结果

好你说这个也太简单了吧，就父子继承而已。话不多说我再附上一串代码和打印结果

Grand.prototype.house = function() {
  console.log('四合院');
}
function Grand() {
  this.card = 10000
}
Parent.prototype = new Grand()  // {card: 10000}.__proto__ = Grand.prototype.__proto__ = Object.prototype.__proto__ = null
function Parent() {
  this.lastName = '张'
}
Child.prototype = new Parent()  // {lastName: '张'}.__proto__ = Parent.prototype
function Child() {
  this.age = 18
}
const c = new Child()  // {age: 18}.__proto__ = Child.prototype
console.log(c.card);
c.house()  
// console.log(c.toString());

这里我们要注意一点：如果让你查找一个整个页面都没有的属性又该会是什么打印结果呢？我们注意看上面最后一行注释掉的代码，他的输出结果如下

他是直接找到了全局的对象上，经历了一遍原型链查找在 Object.prototype上找到，如果再不找到最终就会停留在null上 ，下面放一张 js 界中广为流传的一张图，如果你能看懂那么你就是彻底会了！

三：new 在干什么？

这时候你会说什么？上篇文章不是讲了 new 究竟干了些什么吗，怎么又问，不必惊讶，其实上次没讲全，这次来带你真正看看 new 究竟究竟都干了些什么（这绝对是最终理解）直接一套小连招先上五个步骤

1. 创建一个空对象
2. 让构造函数中的 this 指向这个空对象
3. 执行构造函数中的代码 （等同于往空对象中添加属性值）
4. 将这个空对象的隐式原型(__proto__) 赋值成 构造函数的显示原型(prototype)
5. 返回该对象

再上代码（加注释）

Car.prototype.run = function() {
  console.log('running');
}

function Car() {   // new Function()
  // const obj = {}      //1
  // Car.call(obj)  // call 方法将 Car 函数中的 this = obj    2
  this.name = 'su7'  // 3
  // obj.__proto__ = Car.prototype  // 4
  // return obj    5
}
const car = new Car() // {name: 'su7'}.__proto__  == Car.prototype
car.run()

最后输出

结语

1. 显式原型（prototype）是函数自带的“样板房”，所有实例都能来蹭住。
2. 隐式原型（__proto__）是实例手里的“门禁卡”，刷卡就能进样板房找方法。
3. 原型链就是一张“门禁卡链”：刷不到就再刷上一层的卡，直到 null 到头。
4. new 的五步曲：空对象→认证→绑卡→执行→返回，一口气把“样板房”继承给新实例。

把这四点串成一张地铁图，以后看任何“找不到属性”的问题，先问一句：它刷卡刷到第几站了？原型链通了，继承就不再是黑魔法。

前言

目前我的 JS 技能树点亮了“对象”这一格，这篇文章就是一份“新手村”笔记，只用我已掌握的钥匙，把对象这只“收纳盒”的隔层、暗格、标签一次性摸清楚，不越级打怪，也不提前透支未来语法。如果你也刚学完对象，想先把它玩透再往下走，欢迎一起原地复盘，把基础踩成肌肉记忆。

对象

• 在 js 这门语言中流传着一句话叫 万物皆对象，顾名思义不管你是哪种数据类型都可看作是对象。
  我们知道的数据类型可分为两种——原始类型和引用类型

1. 原始类型又叫简单类型，有 string number boolean undefined null Symbol bigInt
2. 引用类型又叫复杂类型，有 function array object

• 在解释为什么万物都可被称为对象之前我们先聊今天第一个话题——如何创建一个对象

一. 创建对象的方式

1. 对象字面量 只用一个 {} 就能解决

const obj = {
    a : 1
    }    // 这是我们最常看到的

2. new Object() 用new Object() 创建一个对象后，再在外围添加属性

const obj = new Object()  // 构造函数
obj.name = '饶总'
const abc = 'age'   // 目的添加 key 为 age ，value 为 20
obj[abc] = 20   //当 abc 是变量的时候用[]，就可直接访问到 age
delete obj[abc]   //要删掉属性就用 delete
console.log(obj);

3. new 调用自定义的构造函数 关于构造函数

• 当我们需要批量化创建对象时，可以使用构造函数
  方便理解这句话，首先我们设立一个目标，我们要把公司员工的姓名年龄职位输入到系统里面方便统计管理，按照古板的方法就是创造无数个职位对应的函数，一个一个输入姓名年龄放进去

function Insert(name, age) {
  const obj = {
    name: name,
    age: age,
    job: 'coder'
  }
  return obj
}

function Insert2(name, age) {
  const obj = {
    name: name,
    age: age,
    job: 'manager'
  }
  return obj
}

Insert('饶总', 18)

但是栈的容量有限，函数过多就会导致爆栈，那么这个时候就可以用构造函数来解决

function Insert(name, age, job) {
  this.name = name
  this.age = age
  this.job = job
}
const p = new Insert('晓总', 18, 'coder') // { name: '晓总', age: 18, job: 'coder' }
const p2 = new Insert('佳颖', 19, 'manager')
console.log(p);
console.log(p2);

• 当一个函数被 new 调用时，我们称之为构造函数
  再来一个关于生产汽车的例子

function Car(color) {
  this.name = 'su7'
  this.height = '1400'
  this.lang = '4800'
  this.weight = '1500'
  this.color = color
}

const car1 = new Car('purple') // 实例化一个对象
const car2 = new Car('yellow')

由于生产的汽车的大部分标签是一样的，只有极个别标签能自行选择，这个时候用 new 构造一个函数就显得尤为高明

二. new 干了什么？

1. 创建一个 this 对象
2. 执行构造函数中的代码，就是给 this 对象添加属性值
3. 返回这个 this 对象

function person() {
  const _this = {}   //构造一个 _this 对象
  _this.name = 'su7'   
  _this.color = 'green'  //给该对象添加属性值
  return _this       //返回该对象
}

const obj = person()

console.log(obj);

三. 什么是包装类？

1. 当用户定义一个字面量，v8默认执行的还是 new Xxx()

var num = 123  //var num = new Number(123)  
var str = 'hello'  //var str = new String('hello')

2. 一个包装类的实例对象，在参与运算时，会自动拆箱成原始类型

var num = 123  // v8 默认执行 var num = new Number(123)
num.a = 'aaa'
//delete num.a   // 发现是原始类型就自动删除
console.log(num.a); // 执行结果为 undefined，既证明了 num 可以是对象，又说明了 num 的属性被删除了

3. 因为 js 是弱类型语言, 所以只有在赋值语句执行时才会判断值的类型(typeof)，当值被判定为原始类型时，就会自动将包装对象上添加的属性移除

var str = 'hello' 
//typeof('hello')   判断类型为string
//  v8执行 var str = new String('hello')
str.len = 2
//delete str.len  将包装对象上添加的属性移除

结语

对象既是 JavaScript 的地基，也是后续所有语法的交汇点；先把这块“自留地”的边界、门牌和规则摸透，再学任何新框架都能事半功倍。愿这份最基础的笔记，能在你未来的进阶路上当一块靠谱的垫脚石。感谢阅读！