时间:2021-05-26
本文实例讲述了JavaScript对象的特性与实践应用。分享给大家供大家参考,具体如下:
JavaScript 的简单数据类型是数字、字符串、布尔值(true/false)、null 以及 undefined,其它所有的值都是对象。这些对象是可变的键值对集合。
对象是属性的容器,每个属性都有名字和值。属性的名字可以是包含空字符串在内的任何字符串,而属性值是除 undefined 值之外的任意值。
对象是无类型的,它对属性的名字和值没有类型限制。所以对象很适合汇集和管理数据。对象可以包含其他对象,所以可以很容易地表示成树状或图形数据结构。
使用原型链,可以让一个对象继承另一个对象的属性。合理地使用这一特性,可以减少初始化对象所消耗的内存和时间。
1 对象字面量
对象字面量是包围在一对花括号中的零或多个名值对,它可以出现在任何允许表达式出现的地方:
var empty_object = {};var stooge = { "first-name": "deniro", "last-name": "Li"};属性的名字可以是包含空字符串在内的任何字符串。如果属性名是合法的 JavaScript 标识符,则可以不加引号。逗号用来分隔多个名值对。
属性值可以是任意的表达式(包括另一个对象字面量),即对象是可潜逃的:
var flight = { airline: "Oceanic", number: 815, departure: { IATA: "SYD", time: "2017-08-02 19:00", city: "Sydney" }, arrival: { IATA: "LAX", time: "2017-08-03 21:37", city: "Los Angeles" }};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);//抛出 TypeErrorconsole.log(flight.equipment && flight.equipment.model);//undefined3 更新
可以通过赋值语句来更新对象的值。如果属性名已存在于对象中,那么属性的值就会被替换:
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: "Boeiing 787"};console.log(flight.equipment.model);//"Boeiing 787"flight.status = "overdue";console.log(flight.status);//"overdue"4 引用
对象是通过引用来传递的,所以它们永远不会被复制:
var x = stooge;x.nickname = "Lucy";console.log(stooge.nickname);//"Lucy";x 与 stooge 指向同一个引用var a = {}, b = {}, c = {};//a、b、c 引用一个不同的空对象a = b = c = {};//a、b、c 引用同一个空对象5 原型
每个对象都连接到一个原型对象,然后继承原型对象的属性。所有通过对象字面量创建的对象都连接到 Object.prototype,它是标配对象。
创建一个新对象时,可以指定某个对象作为它的原型。我们为 Object 新增一个 create 方法,它会创建并返回一个使用原对象作为原型对象的新对象:
if (typeof Object.beget !== "function") { Object.create = function (o) { var F = function () { }; F.prototype = o; return new F(); }}var another_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(typeof flight.number);//numberconsole.log(typeof flight.status);//stringconsole.log(typeof flight.arrival);//objectconsole.log(typeof flight.manifest);//undefined注意原型链中的任何属性都会产生值:
console.log(typeof flight.toString);//functionconsole.log(typeof flight.constructor);//function有两种方法可以去除这些属性:
①. 检查并丢弃值为函数的属性。
②. 使用 hasOwnProperty 方法,如果对象拥有独有的属性,它就会返回 true:
7 枚举
for in 语句会遍历一个对象中的所有属性名,所以要过滤掉那些你不想要的属性:
var name;for (name in another_stooge) { if (typeof another_stooge[name] !== 'function') {//过滤掉函数 document.writeln(name + ': ' + another_stooge[name] + "; "); }}属性名出现的顺序是不确定的。如果要让属性以特定的顺序出现,就要创建一个包含特定属性名的数组:
var i;var properties = [ "first-name", "middle-name", "last-name", 'profession'];//定义想要的属性以及属性顺序for (i = 0; i < properties.length; i += 1) { document.writeln(properties[i] + ": " + another_stooge[properties[i]] + "; ");}8 删除
delete 运算符会删除对象的属性,但它不会涉及原型链中的任何对象。
删除对象的属性可能会让来自原型链的属性呈现出来:
another_stooge.nickname = "Jack";console.log(another_stooge.nickname);//Jackdelete another_stooge.nickname;console.log(another_stooge.nickname);//Lucy9 减少全局变量的污染
全局变量削弱了程序的灵活性,所以要避免使用。
只创建一个唯一的全局变量:
var MYAPP = {};这个变量就变成我们应用的容器:
MYAPP.stooge = { "first-name": "deniro", "last-name": "Li"};MYAPP.flight = { airline: "Oceanic", number: 815, departure: { IATA: "SYD", time: "2017-08-02 19:00", city: "Sydney" }, arrival: { IATA: "LAX", time: "2017-08-03 21:37", city: "Los Angeles" }};要把全局性的资源都纳入一个命名空间下,这样我们的程序与其他类库发生冲突的可能性会显著降低,而且程序也变得更易阅读。
感兴趣的朋友还可以使用本站在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行结果。
更多关于JavaScript相关内容还可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了JavaScript数组特性与实践应用。分享给大家供大家参考,具体如下:JavaScript提供了一种类似数组特性的对象,它把数组的下标变为字符串
本文详细讲述了JavaScript继承的特性与实践应用。分享给大家供大家参考,具体如下:继承是代码重用的模式。JavaScript可以模拟基于类的模式,还支持其
JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性。主要内容如下:理解JavaScript
下面通过文字详解加代码分析的方式给大家分享下javascript设计模式之对象工厂函数与构造函数的相关知识。概述使用对象字面量,或者向空对象中动态地添加新成员,
JavaScript,很少能让人想到它面向对象的特性,甚至有人说它不是面向对象的语言,因为它没有类。没错,JavaScript真的没有类,但JavaScript