JS深入之从原型到原型链

1.什么是原型？（玩具模具）假设现在是在一个玩具工厂

构造函数===小狗玩具模型

原型=====玩具模型所共有的属性（类似于通用组件？或者说公共方法）

实例对象======所生产的小狗玩具

javascript 复制代码

//1.这是一个小狗玩具模具（构造函数）
function dogToy(name){
    this.name = name
};

//2.给小狗感觉添加都会叫的功能
dogToy.prototype.shout = function(){
    console.log(this.name + '在汪汪叫！！！')
}

//3.生产小狗玩具（实例对象）
const dog = new dogToy('优优');
dog.shout();//打印出来就是优优在汪汪！

所有通过 new dogToy() 生产的玩具，自动继承模具原型（shout 功能）
原型像公共工具箱，省去给每个玩具单独装功能的麻烦

2.什么是原型链？(类似于家族族谱？或者可以说是找家族遗传病?)

当小狗玩具需要新功能时：

先看看自己有没有这个属性；

如果自己没有，就去找原型，看看原型有没有

原型要是没有，就去找原型的原型，一直像这样找，直到找到或者直到尽头如法在找

javascript 复制代码

//1.当小狗玩具需要新功能时，原型没有
dog.sing();//原型没有，会报错

//2.那就在原型链上添加新功能
Object.prototype.sing = function(){
    console.log(this.name + '会唱歌！！！')
}

dog.sing()//输出优优会唱歌

原型链像族谱：bear1 → BearToy.prototype → Object.prototype → null
属性查找顺序：由近及远向上追溯

3.图解原型链关系

javascript 复制代码

// 1. 实例与构造函数原型
console.log(bear1.__proto__ === BearToy.prototype); // true

// 2. 构造函数原型与顶级原型
console.log(BearToy.prototype.__proto__ === Object.prototype); // true

// 3. 顶级原型的终点
console.log(Object.prototype.__proto__); // null

实例.__proto__ → 指向「构造函数的原型」
构造函数.prototype → 指向「原型对象」
链条终点是 null

4.总结

原型：构造函数的公共工具箱（构造函数.prototype）
原型链 ：实例 → 构造函数原型 → 上级原型 → ... → null
核心价值：实现属性和方法的共享，节省内存