JS深入之从原型到原型链

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

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

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

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

//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.什么是原型链？(类似于家族族谱？或者可以说是找家族遗传病?)

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

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

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

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

        

//1.当小狗玩具需要新功能时，原型没有
dog.sing();//原型没有，会报错//2.那就在原型链上添加新功能
Object.prototype.sing = function(){console.log(this.name + '会唱歌！！！')
}dog.sing()//输出优优会唱歌

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

3.图解原型链关系

// 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.总结

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