JS中的原型与原型链

基本概念

原型（Prototype） ：每个对象都有一个内部属性 [[Prototype]]，通常通过 __proto__ 访问（非标准，但广泛支持）。
原型链（Prototype Chain） ：对象通过原型链查找属性和方法。如果对象本身没有某个属性或方法，它会沿着原型链向上查找，直到找到或到达原型链的顶端（null）。

2. 原型的作用

实现继承：通过原型链，对象可以继承其原型对象的属性和方法。
共享属性和方法：原型允许多个对象共享相同的属性和方法，从而节省内

对象中的原型

每个对象都有一个内部属性 [[Prototype]]，通常通过 __proto__ 访问（非标准，但广泛支持）

我们现在创建按一个User函数来理解原型原型的概念

javascript 复制代码

function User(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log('我是' + this.name)
    }
}

const user1 = new User('小王', 18)
user1.sayHello() // 我是小王
const user2 = new User('小高', 20)
user1.sayHello() // 我是小高

这里面创建了一个User构造函数，每个对象里面都有一个sayHello方法，sayHello 方法是完全一样的，没必要为每个用户单独生成一个; 所以我们可以改造一下，把方法挂载到User的原型上，当然也可以增加一个性别的属性，假设他们的性别都是一样的

javascript 复制代码

function User(name, age) {
    this.name = name;
    this.age = age;
}

User.prototype.sayHello = function() {
    console.log('我是', this.name + '我的性别是' + this.sex)
}
User.prototype.sex = '男'

const user1 = new User('小王', 18)
user1.sayHello() // 我是小王
const user2 = new User('小高', 20)
user1.sayHello() // 我是小高

这个就是原型用来共享数据！

什么是原型链？

重要概念：所有的对象都是通过new创建的，{} 和 \[\] 则是语法糖, 看下面的代码👇

javascript 复制代码

var u2 = { // 对象 u2 通过 new Object 创建
  firstName: '莫',
  lastName: '妮卡'
}
// 等效于
var u2 = new Object(); 
u2.firstName = '莫';
u2.lastName = '妮卡';

上面的代码原型链如下👇

所有的对象都是通过Object创建的，所以当前两张图可以合并

上面的图片中从 u1->user原型->Object原型；这就被称为原型链！

Function 中的原型链

javascript 复制代码

function User(name) {
    this.name = name
}
const user1 = new User('小王')

上面的代码原型链如下

完整的图例如下👇