0

0

js怎么使用Object.create创建对象

畫卷琴夢

畫卷琴夢

发布时间:2025-08-25 13:36:01

|

307人浏览过

|

来源于php中文网

原创

object.create用于创建新对象并直接指定其原型,语法为object.create(proto, [propertiesobject]),其中proto是必选的原型对象,传入null可创建不继承任何属性的“干净”对象;2. 使用object.create(null)可创建无原型链干扰的对象,适用于需要纯净哈希表的场景,避免属性名冲突和意外继承;3. 与new构造函数的区别在于,new基于构造函数实例化并绑定this,而object.create直接基于指定原型创建对象,更侧重原型链的精确控制;4. 实际应用包括实现原型继承、创建安全的数据映射结构以及通过propertiesobject参数在创建时定义属性的可写、可枚举和可配置特性,提升代码的安全性和可维护性。

js怎么使用Object.create创建对象

Object.create
在JavaScript里,它就是一种创建新对象的方式,但它特别的地方在于,你可以直接指定这个新对象的原型(prototype)是谁。简单来说,它让你能非常精确地控制一个新对象继承自哪里,而不是像字面量创建那样默认继承自
Object.prototype

js怎么使用Object.create创建对象

解决方案

要使用

Object.create
,它的基本语法是
Object.create(proto, [propertiesObject])

第一个参数

proto
,就是你希望新创建的对象继承的原型对象。这个参数是必须的。如果你想创建一个完全“干净”的对象,不继承任何东西(包括
Object.prototype
上的方法,比如
toString
),你可以传入
null

js怎么使用Object.create创建对象

第二个参数

propertiesObject
是可选的。如果提供了,它会是一个对象,其自身的(非继承来的)可枚举属性会作为新创建对象的属性描述符。这意味着你可以像使用
Object.defineProperty
那样,在这里定义新对象的属性,包括它们的
value
writable
enumerable
configurable
等特性。

举个例子,我们先定义一个原型对象:

js怎么使用Object.create创建对象
const animal = {
  eats: true,
  walk() {
    console.log("Animal walking...");
  }
};

// 使用Object.create创建dog对象,让它继承animal
const dog = Object.create(animal);
dog.barks = true; // dog自己的属性
dog.walk(); // 继承自animal的方法
console.log(dog.eats); // 继承自animal的属性

// 另一个例子,同时定义属性
const personPrototype = {
  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

const john = Object.create(personPrototype, {
  name: {
    value: "John Doe",
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: {
    value: 30,
    writable: true,
    enumerable: false // 不可枚举
  }
});

john.greet(); // Hello, my name is John Doe.
console.log(john.age); // 30
for (let key in john) {
  console.log(key); // 输出: name, greet (age不会被枚举)
}

我觉得,理解

Object.create
的关键在于,它给你提供了一种非常直接的“原型链”控制能力。不像
{}
new Object()
那样,它们默认都会以
Object.prototype
为原型,
Object.create
让你能精确地指定这个起点。

Object.create(null)
有什么特别的用处?

Object.create(null)
这个用法其实挺有意思的,它创建的是一个不继承任何属性和方法的对象,甚至连
Object.prototype
上的
toString
hasOwnProperty
这些常用方法都没有。它就是一个“纯粹”的对象,一个空的哈希表。

这在某些场景下特别有用。比如,当你需要一个字典或者映射表,只想存储键值对,而不想被原型链上的方法干扰时,它就派上用场了。想象一下,如果你用

{}
来创建一个映射,然后不小心某个键名和
Object.prototype
上的某个方法名冲突了,比如
obj.toString = "my value"
,这虽然不常见,但在遍历或者某些操作时可能会引入意想不到的行为。而
Object.create(null)
创建的对象,就没有这些顾虑。

const cleanMap = Object.create(null);
cleanMap.name = "Alice";
cleanMap.age = 25;
// cleanMap.toString(); // 这会报错,因为没有这个方法

console.log(cleanMap.name); // Alice

// 遍历时更安全,不会遍历到原型链上的属性
for (let key in cleanMap) {
  console.log(key + ": " + cleanMap[key]); // 只会输出 name 和 age
}

这种“干净”的对象,在处理JSON数据、实现简单的哈希映射或者作为数据缓存时,能提供更可靠和可预测的行为。它避免了潜在的原型链污染问题,也让你的代码意图更明确:我就是要一个纯粹的数据容器。

Object.create
和构造函数(
new
关键字)创建对象有什么区别?

这确实是JavaScript里对象创建的两个重要范式,它们虽然都能创建对象,但背后思想和应用场景却不太一样。

new
关键字结合构造函数,更像是一种“类”的实例化过程。当你写
new MyConstructor()
时,JavaScript会做几件事:

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

下载
  1. 创建一个全新的空对象。
  2. 将这个新对象的内部原型(
    [[Prototype]]
    ,也就是
    __proto__
    )设置为
    MyConstructor.prototype
  3. 执行
    MyConstructor
    函数,并将这个新对象作为
    this
    上下文。通常,构造函数会在这里初始化新对象的属性。
  4. 如果构造函数没有显式返回一个对象,那么就返回这个新创建的对象。

这种方式,我们通常用来创建“实例”,每个实例都拥有自己的状态,但共享构造函数原型上的方法。它模拟了传统面向对象语言中的类和实例关系。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.greet = function() {
  console.log(`Hi, I'm ${this.name}.`);
};

const bob = new Person("Bob", 40);
bob.greet(); // Hi, I'm Bob.
console.log(bob.__proto__ === Person.prototype); // true

Object.create
则更纯粹地聚焦于原型链的继承。它直接让你指定新对象的原型,没有中间的构造函数执行过程,也没有
this
的绑定(除非你在
propertiesObject
里定义了getter/setter)。它就是简单地“制造一个继承自
proto
的对象”。

我觉得,你可以这样理解:

  • new
    关键字:我有一个“蓝图”(构造函数),我要根据这个蓝图“生产”一个产品(实例)。产品有自己的特性,但共享蓝图的公共功能。
  • Object.create
    :我有一个“现有物品”(原型对象),我想要一个“新物品”,它应该和这个“现有物品”有一样的基因(原型),但它自己可以有新的、独立的变化。

所以,当你需要基于一个已有的对象直接创建另一个继承它的对象时,

Object.create
非常直接。当你需要定义一个“类型”或“类”,并创建其多个实例时,构造函数和
new
更合适。它们是解决不同问题的工具,但都围绕着JavaScript的原型继承机制。

Object.create
在实际开发中能解决什么问题?

在实际的JavaScript开发中,

Object.create
的应用场景比你想象的要多,它主要解决了几个关于对象创建和继承的痛点。

一个很典型的应用就是实现原型继承。虽然ES6有了

class
语法糖,但底层依旧是原型继承。在没有
class
的时代,或者当你需要更细粒度地控制继承关系时,
Object.create
是构建继承链的利器。比如,你有一个基础对象,想让多个子对象共享它的方法和属性,同时每个子对象又有自己的特定数据。

const vehicle = {
  speed: 0,
  accelerate(amount) {
    this.speed += amount;
    console.log(`Current speed: ${this.speed}`);
  }
};

const car = Object.create(vehicle);
car.model = "Sedan";
car.accelerate(50); // Current speed: 50

const bike = Object.create(vehicle);
bike.type = "Mountain";
bike.accelerate(10); // Current speed: 10

这里,

car
bike
都继承了
vehicle
accelerate
方法,但它们有各自独立的
speed
状态(因为
speed
是在
accelerate
方法内部通过
this.speed
操作的,如果
speed
直接在
vehicle
上,它们会共享同一个
speed
,这是原型链的另一个知识点,需要注意)。

另一个重要场景就是创建“纯净”的对象,前面提到了

Object.create(null)
。这对于避免原型链上的意外属性干扰,或者在构建数据结构(比如简单的哈希表)时,提供了更高的安全性。想象一下,如果你从外部接收一个JSON对象,并想把它转换成一个内部的映射表,如果使用
{}
,那么像
obj.constructor
obj.prototype
这样的属性可能会被误用或干扰。而
Object.create(null)
则完全规避了这些问题,它创建的对象就是一张白纸。

最后,通过

propertiesObject
参数,
Object.create
还能在创建对象的同时,精细控制新属性的特性。这在需要定义不可枚举、不可写或不可配置的属性时非常有用,比如创建一些常量对象或者内部状态。

const config = Object.create(null, {
  API_KEY: {
    value: "your_secret_key",
    writable: false, // 不可修改
    enumerable: true, // 可枚举
    configurable: false // 不可删除或重新配置
  },
  VERSION: {
    value: "1.0.0",
    writable: false,
    enumerable: true,
    configurable: false
  }
});

// config.API_KEY = "new_key"; // 这会报错或无效,因为writable是false
console.log(config.API_KEY); // your_secret_key

这种能力让你在对象创建阶段就定义好属性的行为,而不是事后通过

Object.defineProperty
去修改,让代码更简洁和意图更明确。我觉得,这就像是你在造一个东西的时候,就想好了它应该具备哪些功能和限制,而不是等造好了再打补丁。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

536

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

372

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

706

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

470

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

388

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

989

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

652

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

537

2023.09.20

笔记本电脑卡反应很慢处理方法汇总
笔记本电脑卡反应很慢处理方法汇总

本专题整合了笔记本电脑卡反应慢解决方法,阅读专题下面的文章了解更多详细内容。

1

2025.12.25

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 2.9万人学习

Pandas 教程
Pandas 教程

共15课时 | 0.8万人学习

ASP 教程
ASP 教程

共34课时 | 2.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号