JavaScript对象操作详解：定义、访问、修改与构造函数

作者：函数茶馆时间：2026-10-30 02:59:24浏览：379

本文详细讲解JavaScript中对象的定义、属性与方法访问、动态修改、构造函数创建、this关键字、全局对象关联以及对象引用传递与比较。通过具体代码示例，解析对象字面量、构造函数、工厂模式及原型链相关概念，帮助开发者深入理解对象操作机制。

从数组到对象


var myarr = ['red','blue','yellow','purple']; 
myarr;// ["red","blue","yellow","purple"] 
myarr[0];//"red" 
myarr[3];//"purple'

数组是开发者熟悉的数据结构，可以理解为键值对的集合，其中键（Key）是默认的索引（如0, 1, 2, 3），值（Value）是对应的数据。对象则可以视为使用自定义键的数组。参考以下代码示例：


var hero ={ 
 breed: 'Turtle', 
 occupation:'Ninja' 
};

通过上述代码，我们可以观察到以下几点： 1. 对象的名称为hero。 2. 与数组使用方括号[]不同，对象使用花括号{}来定义。 3. 对象的属性（如breed和occupation）之间使用逗号,分隔。 4. 键值对的语法格式为 KEY:VALUE。此外，无论属性名是否使用双引号、单引号或省略引号，其结果均相同。以下代码展示了等效的写法：


var obj={a:1,b:2}; 
var obj={'a':1,'b':2}; 
var obj={"a":1,"b":2};

推荐的做法是属性名不使用引号，除非属性名包含特殊字符、数字开头或包含空格等情况。本篇内容较为基础，需注意的是定义数组使用符号[]，而定义对象使用符号{}。关于元素、属性和方法：在学习数组时，我们称其包含元素；而在讨论对象时，术语有所变化。


var animal={ 
   name: 'dog', 
   run:function(){ 
    alert("running"); 
  } 
}

name被称为属性（property），而run是一个函数，在对象中我们称之为方法（method）。

访问对象的属性

访问对象的属性有两种方式可以访问对象的属性。一是使用数组形式的访问：animal['name'] 二是使用点符号访问：animal.name 第一种方式适用于所有情况。但如果属性名是无效标识符（如上一节提到的'1name'或'my name'），则不能使用点符号访问，否则会导致错误。这一点需要特别注意。下面通过具体示例展示对象访问：


var book = { 
  name:'Javascript Fundation', 
  published:jixie. 
  author:{ 
    firstname:'nicholas', 
    lastname:'xia' 
  } 
};

1. 获取author对象的firstname属性


book.author.firstname //nicholas

2. 获取author对象的lastname属性，这里尝试使用另一种写法


book['author']['lastname'] //xia

我们还可以使用混合访问方式。例如book.author['lastname']或book['author'].lastname，这些写法均有效，需灵活运用。当属性名是动态生成的情况时，通常推荐使用数组形式的访问方法。


var key ='lastname' 
book.author[key];//xia

调用对象的方法


var hero = { 
breed: 'Turtle', 
occupation: 'Ninja', 
say: function() { 
return 'I am ' + hero.occupation; 
} 
} 
hero.say();

修改属性和方法

访问对象的方法很简单，使用点符号即可，但也可以使用数组形式，尽管这种写法看起来较为怪异。例如：hero['say'](); 不推荐这种写法，访问对象时尽量使用点符号。修改属性和方法由于JavaScript是动态语言，因此可以在任何时候修改对象的属性和方法。参考以下示例：


var hero={};

hero是一个空对象。


typeof hero.breed;//undefined

这说明hero对象没有breed属性。接下来可以添加属性和方法了。


hero.breed = 'turtle'; 
hero.name = 'Leonardo'; 
hero.sayName = function() {return hero.name;};

调用方法


 hero.sayName();//Leonardo

删除属性


delete hero.name;//true 
hero.sayName();//方法失败

This


var hero = { 
  name : 'Rafaelo', 
  sayName : function(){ 
   return this.name;   
 } 
} 
hero.sayName();//Rafaelo

构造函数与全局对象

this关键字指代当前对象，关于this的复杂问题将在后续讨论。构造函数(Constructor Functions) 另一种创建对象的方式是使用构造函数，直接参考示例：


function Hero(){ 
 this.name ='Refaelo'; 
} 
var hero = new Hero();
hero.name;//Refaelo

这种方式的好处在于创建对象时可以传入参数。


function Hero(name){ 
  this.name = name; 
  this.whoAreYou = function(){ 
    return this.name; 
  } 
} 
 
var hi = new Hero('nicholas'); 
hi.whoAreYou();//nicholas

需要注意的是，不要遗漏new操作符。全局对象前几节我们讨论过全局变量，并建议尽量避免使用。在学习对象后，我们可以重新审视全局变量，其实全局变量就是全局对象的一个属性。如果主机环境是Web浏览器，全局变量即为window。如果我们定义 var a = 1; 可以这样理解：一个全局变量a，作为window的一个属性a。我们可以调用window.a或window['a']。再看预定义函数parseInt('123 m');，我们可以写为window.parseInt('123 m'); constructor 属性对象建立之后，后台会创建一个隐藏属性constructor。


h2.constructor;//Hero(name)

因为constructor属性是对函数的引用。如果你不关心h2对象是由什么创建的，而只关心创建一个新的与h2相似的对象，可以使用如下写法：


var h3 = h2.constructor('Nicholas'); 
h3.name ;//Nicholas

我们来看看如下写法的意思


var o = {}; 
o.constructor;//Object() 
typeof o.constructor;//"functions"

这实际上隐藏了 new Object()，更深层次的应用将在后续教程中说明。 instanceof 操作符使用instance来判断对象是否是由指定的构造函数创建的。


function Hero(){ 
} 
var h = new Hero(); 
var o = {}; 
h instanceof Hero;//true 
h instanceof Object;//false 
o instanceof Object;//true

需要注意的是，instanceof后面跟的是引用而非函数，例如错误写法 h instanceof Hero();（错误）。

函数返回对象与传递对象

函数返回对象可以使用构造函数来创建对象，也可以通过普通函数返回对象来创建对象。


function factory(name){ 
  return { 
   name:name 
 }; 
}

使用这种方法创建对象


var o = factory('one'); 
o.name

接下来看看比较少见的构造函数返回对象的例子


function C(){ 
 this.a = 1; 
 return {b:2}; 
} 
 
var c2 = new C(); 
typeof c2.a //undefined 
c2.b; // 2

这说明并不返回this，而是返回了对象{b:2}。这点需要注意。传递对象如果将对象传递给函数，那么传递的是引用。如果修改了这个引用，也会改变原始对象。以下是对象赋值的示例：


var original = {name:'nicholas'}; 
var copy =original; 
copy.name;//'nicholas'; 
copy.name = 'Jason'; 
original.name;// 'Jason';

修改copy的属性name，也就等于修改了original的属性name。对象传参到函数中，也是同样的道理。


function modify(o){ 
  o.name ='Jason' 
} 
var original={name:'nicholas'}; 
modify(original); 
original.name;//Jason

对象的比较

对象的比较如果两个对象的比较结果为true，那么它们是同一个对象的引用。


var fido ={breed:'dog'}; 
var benji ={breed:'dog'}; 
 
benji===fido; //false; 
benji==fido; //false;

以上代码中的对象都不是同一引用，因此比较结果均为false

作者最新文章

JS大数值转字符串出现科学计数法怎么办

2026-11-05 17:09:21

JS split切割后出现空字符串怎么过滤

2026-11-05 16:00:30

在 React 或 Vue 项目中封装使用 JS 节流防抖

2026-11-05 15:27:29

JavaScript中怎么将带小数的字符串转为整数？

2026-11-05 14:32:38

怎么用JavaScript策略模式重构电商促销计算逻辑？

2026-11-05 14:01:09