JavaScript对象完全指南:创建、属性操作与原型链解析

作者:代码拾荒时间:2026-10-30 14:44:39浏览:233

本文深入解析JavaScript对象的核心机制,涵盖直接量、构造函数及Object.create三种创建方式。详细阐述属性查询、设置、删除与检测方法,解析原型链继承原理。重点介绍ES5引入的属性特性(writable、configurable等)、存取器属性及对象扩展性控制(preventExtensions、seal、freeze),并说明JSON序列化规则,帮助开发者掌握对象的高级操作。

JavaScript对象基础与创建方式

JavaScript中的对象本质上是属性的无序集合,每个属性由键值对构成,支持动态增删操作。

在JavaScript中,几乎所有事物都被视为对象,包括字符串、数字、数组和日期等类型。

JavaScript对象不仅拥有自有属性,还能通过原型机制从另一个对象继承属性,其中方法通常属于继承属性。这种“原型式继承”构成了JavaScript语言的核心特征。

1.创建对象

第一种方式是利用对象直接量语法来创建对象。

这是最直观的对象创建方式,对象直接量由多个键值对组成,各属性间以逗号分隔,整个结构被花括号包裹。


var empty = {}; //不包含任何属性的对象
var point = { x: 3, y: 5 }; //包含两个属性的对象
var point2 = { x: point.x + 1, y: point.y + 1 }; //属性值可以是表达式
var book = {
"main title": "JavaScript", //属性名有空格,必须用字符串表示
"sub-title": "The Defintive Guide", //属性名有连字符,必须用字符串表示
"for": "all audiences", //属性名是保留字,必须用字符串表示
author: { //这个属性的值是一个对象
firstname: "David",
surname: "Flanagan"
}

在ECMAScript 5标准中,若属性名为保留字则无需使用引号包裹。此外,对象直接量中最后一个属性后的逗号会被自动忽略。

第二种方式是通过关键字创建对象。

关键字new用于创建并初始化对象,其后跟随一个构造函数。JavaScript核心内置类型均包含内置构造函数,以下是内置对象的创建示例。


var o = new Object(); //创建一个空对象,等价于 0={}
var a = new Array(); //创建一个空数组
var d = new Date(); //创建一个代表当前时间的Date对象
var r = new RegExp("js"); //创建一个正则表达式对象

除内置构造函数外,使用自定义构造函数来初始化新对象也是常见做法。

在介绍第三种方法前,需先理解“原型”概念。除null外,每个JavaScript对象都关联一个对象,并可从中继承属性,该关联对象即为“原型”,类似于C#中的基类概念。

通过对象直接量和构造函数创建的所有对象,均可通过Object.prototype获取其原型引用。不存在原型的对象极少,Object.prototype便是其中之一。

普通对象均拥有原型,例如Array数组对象的原型为Array.prototype。同时,所有内置构造函数都拥有一个继承自Object.prototype的原型。因此,通过new Array()创建的数组对象属性同时继承自Array.prototype和Object.prototype。当对象存在多重继承关系时,这一系列链接的原型对象被称为“原型链”。

第三种方式是利用Object.create()函数创建对象。

Object.create(Object[,Properties])是ECMAScript 5引入的静态函数,用于创建对象。它接收两个参数:第一个指定新对象的原型;第二个为可选参数,用于描述对象属性。

使用该函数创建对象时,只需传入所需的原型对象即可:


var a = Object.create({ 'isLock': true }); //为对象a指定一个原型
console.log(a.isLock); //=> true o继承原型对象属性isLock
console.log(a.hasOwnProperty('isLock')); //=> false 验证isLock并非o的自有属性 

若要创建一个普通的空对象,需传入参数Object.prototype:


var b = Object.create(Object.prototype); 

通过传入参数null可创建没有原型的对象,此类对象不会继承任何属性:


var b = Object.create(null); //该对象不包括任何对象的基础方法 

基于原型创建对象使得任意对象均可被继承,这是一个强大特性。例如,可防止程序无意修改不受控对象。程序不直接操作原对象,而是操作通过Object.create()创建的继承对象。

对象属性的查询、设置与继承机制

2.查询和设置属性

对象属性值可通过点运算符(.)和方括号运算符([])进行查询或设置。


var book = { 'author': 'Tom', 'main title': 'Hello JavaScript' };
var author = book.author; //1.获取book的“author”属性值
var title = book["main title"]; //2.获取book的“main title”属性值
book.edition = 6; //3.给book创建一个“edition”属性
book["main title"] = "ECMAScript"; //4.修改"main title"属性值 

在ES3版本中,若属性名为关键字必须通过方括号形式访问。ES5版本放宽了限制,允许直接在点运算符后使用保留字。

关联数组对象

前文提到可通过object["property"]操作对象属性,这种语法类似数组,但元素通过字符串而非数字索引,这类数组称为关联数组。JavaScript对象均为关联数组,通过[]访问属性时,可在运行时创建或修改,灵活性更高。

继承

JavaScript对象属性分为两类:一类是用户自定义的“自有属性”,另一类是从原型对象继承的属性。对象属性的多重继承关系构成了原型链。

对象属性在赋值前会先检查原型链,以判断是否允许赋值。例如,若对象o继承自一个只读属性x,则对x属性赋值将被禁止。若允许赋值,操作仅在原始对象上创建或修改已有属性,不会改变原型链。

在JavaScript中,通常仅在查询属性时才能体现继承的存在,而设置属性与继承无关。利用此特性可有选择地覆盖继承的属性。

属性访问错误

查询不存在的属性不会报错。若在对象自身属性和继承属性中未找到指定属性,则返回undefined。通过以下代码可验证:


var a = { name: 'admin' }; //定义一个原型对象a
var b = Object.create(a); //定义一个对象b继承至对象a
console.log(b.name); //=> admin b继承a的name属性,正常输出
console.log(b.age); //=>undefined b本身和继承对象都没有age属性,故输出undefined 

但有一种特殊情况:若对象本身不存在,试图访问该对象的属性时会抛出异常。例如:


console.log(c.name); //Uncaught ReferenceError: c is not defined
var d = null;
console.log(d.name); //Uncaught TypeError: Cannot read property 'name' of null 

因此,在访问不确定对象的属性时,必须进行验证。


var book = { "length": 21 };
var len = book && book.length; //这里用&&的第三种用法代替if。
console.log(len); //=>21 

属性删除与检测方法

3.删除属性

delete运算符可删除对象属性,成功时返回true。但delete无法删除configurable特性为false的属性,且只能删除自身属性,不能删除继承属性。


delete book.author // 返回true 

删除全局属性时,可直接省略全局对象,delete后跟随要删除的属性名即可。


this.x=1; //创建一个全局属性
console.log(delete x); //=>true 

4.检测属性

检测属性即判断某属性是否存在于对象中。通常可通过in运算符、hasOwnProperty()和propertyIsEnumerable()方法完成验证。

in运算符用于判断,若对象自有属性或继承属性包含该属性则返回true。


var o = { "x": 5 };
console.log("x" in o); //=>true 对象o有属性x
console.log("y" in o); //=>false 对象o没有属性x
console.log("toString" in o); //=>true 对象o继承属性toString 
hasOwnProperty()方法用来检测给定属性是否为对象的自有属性,对于继承属性返回false。
var o = { "x": 5 };
console.log(o.hasOwnProperty("x")); //=>true
console.log(o.hasOwnProperty("toString")); //=>false 
propertyIsEnumerable()方法是hasOwnProperty()的增强版。只有检测到属性为对象的自有属性并且这个属性可枚举性时才返回true。
var o = Object.create({ "y": 5 });
o.x = 6;
console.log(o.propertyIsEnumerable("x")); //=>true x为自有属性
console.log(o.propertyIsEnumerable("y")); //=>false y是继承属性
console.log(Object.prototype.propertyIsEnumerable("toString")); //=>false toString不可枚举 

属性存取器与特性描述

5.属性存取器

在ECMAScript 5标准中,对象可使用get和set关键字定义类似C#、Java等高级语言的保护属性。此类属性称为“存取器属性”,且可被继承。


var obj = {
//数据属性(可看成字段)
data: null,
//存取器属性(保护属性)
get Data() { return this.data; },
set Data(value) { this.data = value; }
};
obj.Data = "admin";
console.log(obj.data); //=>admin 

这种写法与Java中的保护属性相似,体现了JavaScript作为面向对象编程语言的特性。

若对象属性同时具备get和set方法,则为可读/写属性。若仅含get方法,则为只读属性。若仅含set方法,则为只写属性,读取只写属性始终返回undefined。

6.属性的特性

在ECMAScript 3标准下,对象属性均具备可写、可配置和可枚举特性。而在ECMAScript 5标准下,可通过特定API标识属性是否为可写、可配置和可枚举,这些API即为属性特性。

•普通数据属性的4个特性:value(值)、writable(可写性)、enumerable(可枚举性)、configurable(可配置性)。

•存储器属性的4个特性:get(读取)、set(写入)、enumerable(可枚举性)、configurable(可配置性)。

ECMAScript 5定义了Object.getOwnPropertyDescriptor()方法,用于查询对象特定属性的特性,返回一个代表对象属性4个特性的“属性描述符”对象。


var descriptor = Object.getOwnPropertyDescriptor({ length: 50 }, "length");
console.log(descriptor); 
//=> descriptor = { value: 50, writable: true, enumerable: true, configurable: true }
//------------------------------------------------------------------
var random = {
//只读属性:返回一个0-255之间的随机数
get octet() { return Math.floor(Math.random() * 256); }
};
var descriptor1= Object.getOwnPropertyDescriptor(random,"octet");
console.log(descriptor1); 
//=> descriptor1 = Object {set: undefined, enumerable: true, configurable: true}

从方法名可知,该方法仅能获取对象自有属性的描述符,对于继承属性和不存在的属性,返回undefined。若要获取继承属性的特性,需遍历原型链。

若要设置属性或使新创建属性具备特定特性,需调用Object.defineProperty()方法。第一个参数为要修改的对象;第二个参数为要修改的属性;第三个为属性描述符对象。返回值为修改后的对象副本。


var o = {}; //创建一个空对象
Object.defineProperty(o, "x", {
value: 1, //定义一个x属性,赋值为1
writable: true, //可写
enumerable: false, //不可枚举
configurable: true //可配置
});
if (o.x) console.log(Object.keys(o)); //=> props = [] 属性存在,但是不能枚举
Object.defineProperty(o, "x", { writable: false }); //让属性x变为只读
o.x = 2; //试图修改属性x的值失败,但不报错
console.log(o.x); //=>1 
Object.defineProperty(o, "x", { value: 2 }); //但属性x依然为可配置,可以直接修改value值特性。
console.log(o.x); //=>2
Object.defineProperty(o, "x", { //将数据属性修改为存取器属性
get: function () {
return 0;
}
});
console.log(o.x); //=>0

该方法同样无法设置继承属性的特性。若需同时修改多个自有属性的特性,可使用Object.defineProperties()方法。第一个参数为要修改的对象;第二个参数为映射表对象,包含属性名称及对应属性的描述符对象。


var p = Object.defineProperties({}, {
x: { value: 3, writable: true, enumerable: true, configurable: true },
y: { value: 4, writable: true, enumerable: true, configurable: true },
r: {
get: function () {
return Math.sqrt(this.x * this.x + this.y * this.y);
},
enumerable: true,
configurable: true
}
});
console.log(p.r); //=>5

对象原型、类属性与扩展性控制

7.对象的三个属性

原型属性

对象的原型用于继承属性,该属性极为重要,以至于常将“o的原型属性”简称为“o的原型”。

原型属性在对象创建时即已设定。前文已介绍原型,此处补充说明。

•通过对象直接量创建的对象使用Object.prototype作为原型;

•通过new关键字创建的对象使用构造函数的prototype作为原型;

•通过Object.create()创建的对象使用第一个参数作为原型。

在ES5版本中,将对象传入Object.getPrototypeOf()方法可查询其原型对象。

若要检测一个对象是否为另一个对象的原型,可使用isPrototypeOf()方法。


var a = { x: 2 };
var b = Object.create(a);
console.log(a.isPrototypeOf(b)); //=> true
console.log(Object.prototype.isPrototypeOf(b));//=> true

类属性

对象的类属性是一个字符串,用于表示对象类型信息。但JS未提供直接查询方法,需通过间接方式查询,即调用对象的toString()方法,并提取返回字符串第8个字符至倒数第二个位置之间的字符。若对象继承的toString()方法被重写,则必须通过Function.call()方法间接调用。


function classof(o) {
if (o === null) return "Null";
if (o === undefined) return "Undefined";
return Object.prototype.toString.call(o).slice(8,-1);
}

classof()函数可接收任何类型参数,且包含对null和undefined的特殊处理。


console.log(classof(null)); //=> "Null"
console.log(classof(1)); //=> "Number"
console.log(classof("")); //=> "String"
console.log(classof(false)); //=> "Boolen"
console.log(classof({})); //=> "Object"
console.log(classof(/./)); //=> "Regexp"
console.log(classof(window)); //=> "Window"(浏览器宿主对象类)

可扩展性

对象的可扩展性表示是否可向对象添加新属性。在ECMAScript 5标准下,所有自定义对象、内置对象和宿主对象默认支持可扩展性。下文介绍几个检测和设置对象可扩展性的方法及其区别。

Object.preventExtensions()方法可将传入对象设置为不可扩展。需注意两点:1.一旦对象转为不可扩展,便无法再转换回可扩展状态;2.若向不可扩展对象的原型添加属性,该不可扩展对象同样会继承这些新属性。

Object.isExtensible()方法可检测传入对象的可扩展性。

Object.seal()方法可将传入对象设置为不可扩展,并将对象所有自有属性设置为不可配置。即不能向该对象添加新属性,也不能删除或配置已有属性。对于已密封的对象同样无法解封,可使用Object.isSealed()方法检测对象是否封闭。

Object.freeze()方法更为严格,它直接冻结对象。除了将对象设置为不可扩展及其属性设置为不可配置外,还将对象自有属性的所有数据属性设置为只读。可使用Object.isFrozen()方法检测对象是否被冻结。

Object.preventExtensions()、Object.seal()和Object.freeze()三个方法均返回传入的对象。

对象序列化与JSON处理

8.序列化对象

想必大家对JSON并不陌生,本节主要介绍JSON序列化。所谓序列化即JS对象与字符串之间的相互转换,JSON作为数据交换格式。ECMAScript 5提供了两个内置函数JSON.stringify()和JSON.parse(),分别用于序列化和还原JS对象。


var obj = { x: 3, y: 5 }; //定义一个测试对象
var str = JSON.stringify(obj); //str = "{"x":3,"y":5}"
obj = JSON.parse(str); //obj = Object {x: 3, y: 5}

JSON全称是“JavaScript Object Notation”(JavaScript对象表示法)。JSON语法无法表示JavaScript中的所有值。支持序列化和还原的包括对象、NaN、数组、字符串、无穷大数字、true\false和null。函数、RegExp、Error对象和undefined值无法序列化和还原。JSON.stringify()函数仅能序列化对象可枚举的自有属性。日期对象序列化的结果为ISO格式的日期字符串。

以上所述是小编给大家介绍的JavaScript权威指南之对象,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对本站网站的支持!

作者最新文章