JavaScript对象的特性与实践应用深入详解

2023-09-02 02:26:06 264

本文实例讲述了JavaScript对象的特性与实践应用。分享给大家供大家参考，具体如下：

JavaScript的简单数据类型是数字、字符串、布尔值（true/false）、null以及undefined，其它所有的值都是对象。这些对象是可变的键值对集合。

对象是属性的容器，每个属性都有名字和值。属性的名字可以是包含空字符串在内的任何字符串，而属性值是除undefined值之外的任意值。

对象是无类型的，它对属性的名字和值没有类型限制。所以对象很适合汇集和管理数据。对象可以包含其他对象，所以可以很容易地表示成树状或图形数据结构。

使用原型链，可以让一个对象继承另一个对象的属性。合理地使用这一特性，可以减少初始化对象所消耗的内存和时间。

1对象字面量

对象字面量是包围在一对花括号中的零或多个名值对，它可以出现在任何允许表达式出现的地方：

varempty_object={};
varstooge={
"first-name":"deniro",
"last-name":"Li"
};

属性的名字可以是包含空字符串在内的任何字符串。如果属性名是合法的JavaScript标识符，则可以不加引号。逗号用来分隔多个名值对。

属性值可以是任意的表达式（包括另一个对象字面量），即对象是可潜逃的：

varflight={
airline:"Oceanic",
number:815,
departure:{
IATA:"SYD",
time:"2017-08-0219:00",
city:"Sydney"
},
arrival:{
IATA:"LAX",
time:"2017-08-0321:37",
city:"LosAngeles"
}
};

2检索

可以使用[]语法来获取对象的值。如果字符串表达式是一个字符串字面量，而且它又是一个合法的JavaScript标识符，那么也可以使用.语法。优先使用.语法，因为它更紧凑，而且可读性更好：

console.log(stooge["first-name"]);//"deniro"
console.log(flight.departure.IATA);//"SYD"（优先考虑.表示法）

如果要检索的属性的值不存在，会返回undefined：

console.log(stooge["middle-name"]);
console.log(flight.status);
console.log(stooge["FIRST-NAME"]);

||运算符可用来填充默认值：

console.log(stooge["middle-name"]||"(none)");//(none)
console.log(flight.status||"unknown");//unknown

从undefined的属性中取值会抛出TypeError异常，我们可以使用&&来避免这个问题：

console.log(flight.equipment);//undefined
//console.log(flight.equipment.model);//抛出TypeError
console.log(flight.equipment&&flight.equipment.model);//undefined

3更新

可以通过赋值语句来更新对象的值。如果属性名已存在于对象中，那么属性的值就会被替换：

stooge["first-name"]="lily";
console.log(stooge["first-name"]);//"lily"

如果对象之前没有这个属性，那么这个新属性就会被扩充到对象中：

stooge["middle-name"]="Song";
console.log(stooge["middle-name"]);//"Song"
stooge.nickname="Deniro";
console.log(stooge.nickname);//"Deniro"
flight.equipment={
model:"Boeiing787"
};
console.log(flight.equipment.model);//"Boeiing787"
flight.status="overdue";
console.log(flight.status);//"overdue"

4引用

对象是通过引用来传递的，所以它们永远不会被复制：

varx=stooge;
x.nickname="Lucy";
console.log(stooge.nickname);//"Lucy"；x与stooge指向同一个引用
vara={},b={},c={};//a、b、c引用一个不同的空对象
a=b=c={};//a、b、c引用同一个空对象

5原型

每个对象都连接到一个原型对象，然后继承原型对象的属性。所有通过对象字面量创建的对象都连接到Object.prototype，它是标配对象。

创建一个新对象时，可以指定某个对象作为它的原型。我们为Object新增一个create方法，它会创建并返回一个使用原对象作为原型对象的新对象：

if(typeofObject.beget!=="function"){
Object.create=function(o){
varF=function(){
};
F.prototype=o;
returnnewF();
}
}
varanother_stooge=Object.create(stooge);

更新某个对象时，是不会更新原型对象的：

another_stooge["first-name"]="Jack";
console.log(another_stooge["first-name"]);//"Jack"
console.log(stooge["first-name"]);//"lily"

只有在检索的时候，才会用到原型对象。如果没有在对象中检索到某个属性，那么JavaScript就会试着从原型对象中获取属性值，如果还是没有找到，JavaScript就会沿着原型链向上回溯，直到Object。如果都不存在，就会返回undefined。

原型关系是动态的关系。如果我们新增一个属性到原型链中，那么这个属性就会立即对所有基于该原型所创建的对象可见：

stooge.profession="actor";
console.log(another_stooge.profession);//"actor"

6反射

typeof操作符有助于确定属性的类型：

console.log(typeofflight.number);//number
console.log(typeofflight.status);//string
console.log(typeofflight.arrival);//object
console.log(typeofflight.manifest);//undefined

注意原型链中的任何属性都会产生值：

console.log(typeofflight.toString);//function
console.log(typeofflight.constructor);//function

有两种方法可以去除这些属性：
①.检查并丢弃值为函数的属性。
②.使用hasOwnProperty方法，如果对象拥有独有的属性，它就会返回true：

console.log(flight.hasOwnProperty("number"));//true
console.log(flight.hasOwnProperty("constructor"));//false

7枚举

forin语句会遍历一个对象中的所有属性名，所以要过滤掉那些你不想要的属性：

varname;
for(nameinanother_stooge){
if(typeofanother_stooge[name]!=='function'){//过滤掉函数
document.writeln(name+':'+another_stooge[name]+";");
}
}

属性名出现的顺序是不确定的。如果要让属性以特定的顺序出现，就要创建一个包含特定属性名的数组：

vari;
varproperties=[
"first-name",
"middle-name",
"last-name",
'profession'
];//定义想要的属性以及属性顺序
for(i=0;i
8删除
delete运算符会删除对象的属性，但它不会涉及原型链中的任何对象。
删除对象的属性可能会让来自原型链的属性呈现出来：
another_stooge.nickname="Jack";
console.log(another_stooge.nickname);//Jack
deleteanother_stooge.nickname;
console.log(another_stooge.nickname);//Lucy


9减少全局变量的污染
全局变量削弱了程序的灵活性，所以要避免使用。
只创建一个唯一的全局变量：
varMYAPP={};


这个变量就变成我们应用的容器：
MYAPP.stooge={
"first-name":"deniro",
"last-name":"Li"
};
MYAPP.flight={
airline:"Oceanic",
number:815,
departure:{
IATA:"SYD",
time:"2017-08-0219:00",
city:"Sydney"
},
arrival:{
IATA:"LAX",
time:"2017-08-0321:37",
city:"LosAngeles"
}
};


要把全局性的资源都纳入一个命名空间下，这样我们的程序与其他类库发生冲突的可能性会显著降低，而且程序也变得更易阅读。
感兴趣的朋友还可以使用本站在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行结果。
更多关于JavaScript相关内容还可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。

JavaScript对象的特性与实践应用深入详解

热门推荐

随机推荐