深入理解JavaScript原型：从原理到实战应用

原型

为什么要学习JavaScript原型

学习JavaScript原型(prototype)是深入理解这门语言核心机制的关键，以下是几个重要原因：

1. 理解JavaScript的面向对象本质

JavaScript是基于原型的语言，而不是基于类的
原型链是实现继承的核心机制
理解原型才能真正掌握JavaScript的OOP特性

2. 提高代码组织和复用能力

通过原型可以高效地共享方法和属性
避免在每个实例上重复创建相同的方法
实现更优雅的代码复用模式

3. 深入理解内置对象的行为

所有内置对象(Array、String等)都通过原型扩展功能
理解原型才能正确扩展和修改内置对象
避免常见的"猴子补丁"问题

4. 掌握现代框架的基础

React、Vue等框架底层都使用原型机制
理解原型能更好地调试框架代码
为学习高级设计模式打下基础

5. 编写更高效的代码

原型继承比类继承更轻量级
减少内存使用，提高性能
理解原型可以优化对象创建过程

函数天生拥有一个属性prototype，是一个对象

new的实现原理解释了为什么对象原型 === 函数原型

对象原型 === 函数原型的意义让实例对象继承到构造函数原型上的属性和方法，方便我们为某一个数据类型添加属性和方法

注意:不是每一种对象都有原型。特例：Object.create(null) 这种里面就没有原型，仅此一种

函数原型

作用：将构造函数中的一些固定的属性和方法挂载到原型上，在创建实例对象的时候，不需要重复执行这些属性和方法，大大提高了代码的复用性

挂载在原型上的属性和方法，在实例对象中可以直接访问到

js 复制代码

//将车的名称这个属性挂载到原型上
Car.prototype.name = 'su7-Ultra'
//定义一个车的函数
function Car(color){
  this.color = color
  this.weight = 1.5
  this.long = 4800
}
const car1 = new Car('blue')
const car2 = new Car('red')
console.log(car2);
console.log(car1)
console.log(car1.name);

实例对象可以直接修改方法里面的属性和方法

js 复制代码

function Car(){
  this.weight = 1.5
  this.long = 4800
}
const car = new Car()
car.long = 4600
console.log(car)

实例对象无法修改原型上的属性和方法，也无法删除原型上的属性和方法如果需要修改只能用delete（Car.prototype）.say自己身上修改或者删除

js 复制代码

Car.prototype.say = function(){
  console.log('I am car');
const car = new Car()
delete car.say
console.log(car.say())

construction 的存在是为了让所有的实例对象都知道自己从哪个构造函数创建的，construction可以人为修改

对象原型

1、每一个对象都有一个属性_ _ proto_ _ ，该属性值也是对象

2、V8 在访问对象中的属性时，会先访问对象上显示拥有的属性，如果找不到就回去对象原型上查找，也就是_ _ proto_ _中查找

3、constructor是函数原型上的，对象原型继承去的。

4、实例对象的对象原型会拥有函数原型上的属性和方法

new的实现原理

创建一个空对象

让函数里面的this === obj（创建出来的空对象）

将函数里面所拥有的代码全部执行掉

将对象._ _ proto_ _ = 函数.prototype

return obj（对象）

原型链

V8 在访问对象中的属性时，会先访问对象上的显示拥有的属性，如果找不到，就会去对象的原型中查找，也就是_ _ proto _ _ 中查找，如果还是找不到，就会去对象原型的对象原型中找，层层往上，直到找到null为止

V8的这种查找的链状关系就叫原型链

js 复制代码

function GrandParent(){
  this.card = 'vise'
}

Parent.prototype = new GrandParent()  //将对象原型赋值给函数原型，从而达到继承的作用
function Parent(){
  this.lastName = '张'
}

Child.prototype = new Parent()  //将对象原型赋值给函数原型，从而达到继承的作用
function Child(){
  this.name = '张三'
  this.age = 18
}

const c = new Child()
console.log(c.lastName);  //使用父类的方法
console.log(c.card);  //使用父类的方法

函数原型和对象原型关系图例

最后完全理解这张图