[JavaScript秘密花园]对象其一:使用和属性
2012-02-10 00:00
639 查看
JavaScript 中所有变量都是对象,除了两个例外 null 和 undefined。
输出 false.toString() :
输出 [1, 2, 3].toString(); :
输出 function Foo(){} 并赋值的结果:
function Foo(){}
Foo.bar = 1;
var btn_1 = document.getElementById("btn_1");
var btn_2 = document.getElementById("btn_2");
btn_1.onclick = function(){
alert(false.toString());
}
btn_2.onclick = function(){
alert([1, 2, 3].toString());
}
btn_3.onclick = function(){
alert( Foo.bar );
}
一个常见的误解是数字的字面值(literal)不是对象。这是因为 JavaScript 解析器的一个错误, 它试图将点操作符解析为浮点数字面值的一部分。
有很多变通方法可以让数字的字面值看起来像对象。
javascript中的toString()方法,主要用于Array、Boolean、Date、Error、Function、Number等对象。详细可以参考JavaScript函数补完:toString()
使用对象的字面语法 - {} - 可以创建一个简单对象。这个新创建的对象从 Object.prototype 继承下面,没有任何自定义属性。
输出 :
var foo = {}; // 一个空对象 // 一个新对象,拥有一个值为12的自定义属性'test' var bar = {test: 12};
var btn_4 = document.getElementById("btn_4");
btn_4.onclick = function(){
alert( bar.test );
}
两种语法是等价的,但是中括号操作符在下面两种情况下依然有效 - 动态设置属性 - 属性名不是一个有效的变量名(比如属性名中包含空格,或者属性名是 JS 的关键词)
var obj = {
bar: 1,
foo: 2,
baz: 3
};
obj.bar = undefined;
obj.foo = null;
delete obj.baz;
var btn_5 = document.getElementById("btn_5");
btn_5.onclick = function(){
for(var i in obj) {
if (obj.hasOwnProperty(i)) {
alert(i, '' + obj[i]);
}
}
}
上面的输出结果有 bar undefined 和 foo null - 只有 baz 被真正的删除了,所以从输出结果中消失。
对象的属性名可以使用字符串或者普通字符声明。但是由于 JavaScript 解析器的另一个错误设计, 上面的第二种声明方式在 ECMAScript 5 之前会抛出 SyntaxError 的错误。
这个错误的原因是 delete 是 JavaScript 语言的一个关键词;因此为了在更低版本的 JavaScript 引擎下也能正常运行, 必须使用字符串字面值声明方式。
[JavaScript秘密花园]对象其一:使用和属性
[JavaScript秘密花园]对象其二:原型
false.toString() // 'false' [1, 2, 3].toString(); // '1,2,3' function Foo(){} Foo.bar = 1; Foo.bar; // 1
输出 false.toString() :
输出 [1, 2, 3].toString(); :
输出 function Foo(){} 并赋值的结果:
function Foo(){}
Foo.bar = 1;
var btn_1 = document.getElementById("btn_1");
var btn_2 = document.getElementById("btn_2");
btn_1.onclick = function(){
alert(false.toString());
}
btn_2.onclick = function(){
alert([1, 2, 3].toString());
}
btn_3.onclick = function(){
alert( Foo.bar );
}
一个常见的误解是数字的字面值(literal)不是对象。这是因为 JavaScript 解析器的一个错误, 它试图将点操作符解析为浮点数字面值的一部分。
2.toString(); // 出错:SyntaxError
有很多变通方法可以让数字的字面值看起来像对象。
2..toString(); // 第二个点号可以正常解析 2 .toString(); // 注意点号前面的空格 (2).toString(); // 2先被计算
javascript中的toString()方法,主要用于Array、Boolean、Date、Error、Function、Number等对象。详细可以参考JavaScript函数补完:toString()
对象作为数据类型
JavaScript 的对象可以作为哈希表使用,主要用来保存命名的键与值的对应关系。使用对象的字面语法 - {} - 可以创建一个简单对象。这个新创建的对象从 Object.prototype 继承下面,没有任何自定义属性。
var foo = {}; // 一个空对象 // 一个新对象,拥有一个值为12的自定义属性'test' var bar = {test: 12};
输出 :
var foo = {}; // 一个空对象 // 一个新对象,拥有一个值为12的自定义属性'test' var bar = {test: 12};
var btn_4 = document.getElementById("btn_4");
btn_4.onclick = function(){
alert( bar.test );
}
访问属性
有两种方式来访问对象的属性,点操作符或者中括号操作符。var foo = {name: 'Kitten'} foo.name; // kitten foo['name']; // kitten var get = 'name'; foo[get]; // kitten foo.1234; // SyntaxError foo['1234']; // works
两种语法是等价的,但是中括号操作符在下面两种情况下依然有效 - 动态设置属性 - 属性名不是一个有效的变量名(比如属性名中包含空格,或者属性名是 JS 的关键词)
删除属性
删除属性的唯一方法是使用 delete 操作符;设置属性为 undefined 或者 null 并不能真正的删除属性, 而仅仅是移除了属性和值的关联。var obj = { bar: 1, foo: 2, baz: 3 }; obj.bar = undefined; obj.foo = null; delete obj.baz; for(var i in obj) { if (obj.hasOwnProperty(i)) { console.log(i, '' + obj[i]); } }
var obj = {
bar: 1,
foo: 2,
baz: 3
};
obj.bar = undefined;
obj.foo = null;
delete obj.baz;
var btn_5 = document.getElementById("btn_5");
btn_5.onclick = function(){
for(var i in obj) {
if (obj.hasOwnProperty(i)) {
alert(i, '' + obj[i]);
}
}
}
上面的输出结果有 bar undefined 和 foo null - 只有 baz 被真正的删除了,所以从输出结果中消失。
属性名的语法
var test = { 'case': 'I am a keyword so I must be notated as a string', delete: 'I am a keyword too so me' // 出错:SyntaxError };
对象的属性名可以使用字符串或者普通字符声明。但是由于 JavaScript 解析器的另一个错误设计, 上面的第二种声明方式在 ECMAScript 5 之前会抛出 SyntaxError 的错误。
这个错误的原因是 delete 是 JavaScript 语言的一个关键词;因此为了在更低版本的 JavaScript 引擎下也能正常运行, 必须使用字符串字面值声明方式。
延伸阅读
此文章所在专题列表如下:[JavaScript秘密花园]对象其一:使用和属性
[JavaScript秘密花园]对象其二:原型
相关文章推荐
- JavaScript 秘密花园——对象的使用和属性操作
- 非常全的javascript控制MediaPlayer的属性集合与realplayer对象使用
- javascript使用方括号([])和“.”引用对象的属性和方法
- javascript使用方括号([])引用对象的属性和方法
- JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target
- javascript使用方括号([])引用对象的属性和方法
- Javascript中的window对象基本属性和方法以及对alert,confirm,prompt的使用
- javascript对象的使用和属性操作示例详解
- javascript 中的 prototype和constructor属性的使用(constructor属性始终指向创建当前对象的构造函数,每个函数都有一个默认的属性prototype,而这个prototype的constructor默认指向这个函数)
- TerraExplorer 6.6 api for javaScript 中的Points无法获取该对象的属性和使用其所持有方法
- JavaScript使用forin遍历对象属性时注意
- Javascript学习笔记之 对象篇(一) : 对象的使用和属性
- javascript window对象的status、location、name、self、opener属性的使用
- javascript对象的使用和属性操作示例详解
- javascript创建对象以及使用for(.. in ..)遍历对象的属性!
- JavaScript基础 使用 for in 循环遍历 window对象的所有属性
- 细说JavaScript对象(1):对象的使用和属性
- JavaScript基础 使用 for in 循环遍历 window对象的所有属性
- JavaScript对象内联函数的使用,对象内部方法和属性的使用,以及事件冒泡的处理方式
- 【javascript】使用prototype属性格式化Date对象