JavaScript对象创建全解析:字面量、构造函数与原型链

作者:函数茶馆

时间:2026-10-29

浏览:640

本文深入解析JavaScript中对象的创建方式,涵盖对象字面量、new Object、Object.create及函数与原型模式。详细对比各方法的语法特性、复用性及适用场景,重点讲解Object.create的原型选择机制与属性描述符,以及通过原型链扩展类功能的最佳实践,帮助开发者掌握高效构建复杂对象的核心技巧。

文章目录

JavaScript对象概述

JavaScript 提供了 Date、Array、String 等丰富的内置对象,它们功能强大且易于使用,深受开发者喜爱。然而,在面对复杂的业务逻辑处理时,这些内置对象往往显得力不从心,此时通常需要开发者根据具体需求自定义对象。

从定义层面来看,JavaScript 中的对象是无序属性的集合,其属性值可以是基本数据类型、其他对象或函数。换言之,对象本质上是一组键值对的集合,其中键映射到具体的值,而值可以是数据或另一个对象。

在 JavaScript 中,对象被视为一种基本数据类型。除了字符串、数字、布尔值(true/false)、null 和 undefined 这几种原始值外,其余所有数据均为对象。因此,若想深入掌握 JavaScript 并顺利进阶,必须透彻理解对象的概念,这也是后续学习的基础。

概述

在 JavaScript 中,对象不仅是一种基本数据类型,在数据结构层面也可视为散列表。它可以被理解为属性的无序集合,除了原始值外,一切皆对象。开发者可通过属性名访问这些值,属性名可以是包含空字符在内的任意字符串。简而言之,对象由一系列属性组成,每个属性包含一个名称(key)和一个对应的值(value)。

理解 JavaScript 对象的概念,可以将其想象为具有特定属性的具体实体。例如,一个女性个体可以看作是一个对象,她拥有身高、年龄、姓名等属性。同样,在 JavaScript 中,我们也可以利用属性来定义和描述对象的特征。

对象创建方法详解

创建对象

既然要学习对象,那得先要有一个对象,这样问题就来了,JavaScript中对象要怎么创建呢?接下来就来看看在JavaScript中如何创建对象。

很多有关于JavaScript书在介绍对象创建的方法时,主要有:

使用对象字面量创建对象(key-value)

使用new创建对象

使用Object.create()创建对象

使用函数创建对象

使用原型创建对象

对象字面量创建法

使用对象字面量创建对象

对象字面量是创建对象最简单的一种形式,目的是在于简化创建包含大量属性的对象的过程。对象字面量由若干属性名(keys)和属性值(values)成对组成的映射表,key和value中间使用冒号(:)分隔,每对key/value之间使用逗号(,)分隔,整个映射表用花括号({})括起来。

通过对象字面量创建对象的语法如下:


var obj = {
property_1: value_1, // property_# 可能是一个标识符...
2: value_2, // 或者是一个数字
// ...,
"property n": value_n // 或是一个字符串
};

这里obj是创建的对象的名称,每一个property_i是一个标识符(可以是一个名称、数字或字符串字面量),并且每个value_i是一个其值,并且将这个值赋予给property_i。来看一个具体实例:


var girl = {
'name': '欣欣',
'age' : 18,
'height': 175,
'weight': 45
}

这个示例创建了一个名为girl的对象,对象有四个属性name、age、height和weight。这四个属性对应有一个属性值。

使用对象字面量创建对象时,如果留空其花括号({}),则可以定义只包含默认属性和方法的对象。如:


var obj = {}

使用这种方式创建的对象时,可以通过点(.),也就是obj.key给对象obj创建对象属性,并且赋予对象的属性值。另外也可以通过方括号([]),也就是obj['key']给对象obj创建对象属性,并且赋予对象的属性值。如下面的示例:


var girl = {};
girl.name = '欣欣';
girl.age = 18;
girl['height'] = 175;
girl['weight'] = 45;

此时在Chrome中打印girl对象时,输出的结果如下所示:


console.log(girl);
//Object {name: "欣欣", age: 18, height: 175, weight: 45}

使用new操作符创建

使用new创建对象

使用new操作符后跟Object构造函数(有关于构造函数,后面再讲)也可以创建对象:

var obj = new Object(); // 和 obj = {}相同

虽然初始状态下,obj是一个空对象,但在JavaScript中可以很方便地动态添加和使用成员,所以我们可以不断加入成员变量和方法。如:


var girl = new Object();
girl['name'] = '欣欣';
girl['age'] = 18;
girl['height'] = 175;
girl['weight'] = 45;

Object.create()方法应用

使用Object.create()创建对象

对象也可以用Object.create()方法创建。该方法非常有用,因为它允许你为创建的对象选择其原型对象,而不用定义一个构造函数。

Object.create()方法创建一个拥有指定原型和若干个指定属性的对象。

Object.create(proto, [ propertiesObject ])

Object.create()方法创建一个对象,其接受两个参数,其中第一个参数是这个对象的原型对象proto;第二个是一个可选参数,用以对对象的属性做进一步描述。这个方法使用很简单:


var obj1 = Object.create({
x: 1,
y: 2
}); //对象obj1继承了属性x和y
var obj2 = Object.create(null); //对象obj2没有原型

如果 proto 参数不是 null 或一个对象值,则抛出一个 TypeError 异常。 有关于Object.create()方法更多的示例可以点击这里进行了解。

函数与原型创建对象

使用函数创建对象

在实际使用当中,字面量创建对象虽然很有用,但是它并不能满足我们的所有需求,我们希望能够和其他后台语言一样创建一个类,然后声明类的实例就能够多次使用,而不用每次使用的时候都要重新创建它。

因为JavaScript没有类,一般都是使用函数来定义一个类似其他语言中的类格式,比如:


function Person() {
this.name = "mary"; // 为这个类添加一个成员变量name,并为这个成员变量赋默认值
this.age = 5;
this.sayHello = function () {
console.log(this.name + " : " + this.age);
};
}

定义好类之后,我们就可以像下面这样创建和使用对象:


var person1 = new Person();
person1.name = 'Tom';
person1.age = 20;
person1.sayHello(); // Tom : 20
var person2 = new Person();
person2.name = 'W3cplus';
person2.age = 5;
person2.sayHello(); // W3cplus : 5

Person()函数不是用来被调用的,它是用来被new用的。

通过原型创建对象

这种方法比较前几种方法来说算是最为复杂,最为高级的方法。这里还涉及到封装的一些知识(有关于这些后续学习到了再记录)。这里简单看看如何通过原型创建对象。

首先像函数方法创建对象一样,先定义一个函数:


function Person() {
this.name = "W3cplus";
this.age = 5;
this.walk = function () {
console.log("一个前端网站...");
};
}

然后在外部可以扩允成员:


//添加成员方法
Person.prototype.sayHello = function () {
console.log("hello");
};
//也可以添加成员属性,
Person.prototype.height = 100;

一方面,原型可以扩充原有类的功能(特别是添加有用方法),也可以像下面这样写:


function Person() { }
Person.prototype.name = "W3cplus";
Person.prototype.age = 5;
Person.prototype.walk = function () {
console.log("一个前端网站...");
};
Person.prototype.sayHello = function () {
console.log("hello");
};
Person.prototype.height = 100;

对象属性访问技巧

属性访问

对象属性访问一般有两种方法,第一种是使用点(.)表示法,这也是最常用的一种方法,也是很多面向对象语言中通用的语法。第二种方法还可以使用中括号([])表示法来访问对象的属性。在使用中括号语法时,应该将要访问的属性以字符串的形式放在中括号中。如下:


person['name'];
person.name;

从功能上来说,上面两种方法访问对象属性没有任何区别。但中括号语法的主要优点有两个:

可能通过变量访问属性,如下:


var propertyName = 'name';
person[propertyName];

另外一个优点是,如果属性名中包含了会导致语法错误的字符或者属性名使用的是关键字或保留字,可以使用中括号访问属性,如下:

person['first name'];

一般情况之下,除非必须使用亦是来访问对象属性,否则建议使用点(.)的方法来访问对象属性。

总结

总结

对象是JavaScript的基本数据类型,如果要更好的往下学习JavaScript相关的知识,很有必要先把对象整明白。这篇主要介绍了几种创建对象的方法。较为简单的是通过字面量({})和new Object()方法创建,但这两种方法创建的对象复用性较差;使用Object.create()创建对象时不需要定义一个构造函数就允许你在对象中选择其原型对象。除了这几种方法还可以使用函数和原型创建对象,而这两种方法相对来说可复用性强,只是使用较为复杂。

有关JavaScript学习笔记之创建对象的知识小编就给大家介绍到这里,希望对大家有所帮助!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章