js Object.create 原理

测试代码

const obj1 = {
  name: "Alice",
  age: 25
}

const obj2 = Object.create(obj1)

console.log(obj2, "sdjlfsjldsfjlkf")

console.log(obj1.name, "sdfsdfsfsdfvsd")

console.log(obj2.prototype, "lskdjfslkvnsndslkf")
//obj2.__proto__ 就是指向obj1，__proto__ 存储的是变量的内存引用地址，指向的是obj1，通过这种方式和obj1共用数据内存
console.log(obj2.__proto__, "vsdsdsfdsfsdf")

//true
console.log(obj2.__proto__ === obj1, "ndslkjslkfjslkdjvnsdlskf")

//Unexpected error when starting the router: TypeError: Cannot set properties of undefined (setting 'cbd')
//普通对象没有prototype属性，只有函数才能有prototype属性，用于定义所有实例共享的方法和属性。
obj2.prototype.cbd = 234324234
console.log(obj2.prototype, "vnskldjslkvnsldfjsf")

Object.create 是 JavaScript 中用于创建新对象的方法，它允许你指定新对象的原型。理解其创建过程的原理有助于更深入地掌握 JavaScript 的对象和原型链。

Object.create 的基本用法

const proto = {
    greet() {
        console.log('Hello, world!');
    }
};

const obj = Object.create(proto);
obj.greet(); // Hello, world!

创建过程原理

当你调用 Object.create(proto) 时，JavaScript 会执行以下步骤：

1. 创建一个新对象：

   • JavaScript 创建一个新的空对象。

2. 设置新对象的原型：

   • 新对象的 [[Prototype]]（内部属性）被设置为传入的对象 proto。
   • 这意味着新对象可以访问 proto 中定义的属性和方法。

3. 返回新对象：

   • 最后，返回新创建的对象。

详细步骤

下面通过一个简化的示例来说明 Object.create 的工作原理：

function myObjectCreate(proto) {
    // 创建一个新对象
    const obj = {};

    // 将新对象的原型设置为指定的 proto
    Object.setPrototypeOf(obj, proto);

    // 返回新对象
    return obj;
}

// 使用 myObjectCreate 创建一个新对象
const proto = {
    greet() {
        console.log('Hello!');
    }
};

const newObj = myObjectCreate(proto);
newObj.greet(); // Hello!

内部原理

在 JavaScript 引擎内部，Object.create 的实现可能会类似于以下步骤：

• 内部构造：引擎会调用一个内部构造函数（通常是一个隐式过程），创建一个空对象。
• 原型设置：使用 Object.setPrototypeOf 或类似机制，将新对象的 [[Prototype]] 指向传入的对象。
• 返回：返回新对象供后续使用。

注意事项

• 不可枚举属性：Object.create 只会将传入对象的可枚举属性作为新对象的原型，不会直接复制这些属性。
• 继承：使用 Object.create 创建的对象可以访问原型对象中的方法和属性，方便实现继承。
• 属性描述符：Object.create 还可以接受第二个参数，用于定义新对象的属性描述符。

使用示例

const proto = {
    sayHi() {
        console.log(`Hi, I'm ${this.name}`);
    }
};

const obj = Object.create(proto, {
    name: { value: 'Alice', writable: true, enumerable: true, configurable: true }
});

obj.sayHi(); // Hi, I'm Alice

总结

Object.create 是一个灵活且强大的方法，用于创建具有特定原型的新对象。它在实现继承和原型链时非常有用，理解其内部工作原理能帮助你更好地使用 JavaScript 的对象模型。