js中的对象

js中的对象理解和使用起来都很简单,并且很频繁的使用。但是,总有细节,是我们可能会忽略的、或者是拿捏不定的
参考链接:http://javascript.ruanyifeng.com/grammar/object.html

1. 概述#

1.1对象的含义
所谓对象,就是一种无序的数据集合,由若干个“键值对”(key-value)构成。
对象的生成方法,通常有三种方法:

var o1 = {};
var o2 = new Object();
var o3 = Object.create(null);

1.2 对象的引用
如果不同的变量名指向同一个对象,那么它们都是这个对象的引用,也就是说指向同一个内存地址。修改其中一个变量,会影响到其他所有变量。

var o1 = {};
var o2 = o1;
o1.a = 1;
o2.a // 1

o2.b = 2;
o1.b // 2

此时,如果取消某一个变量对于原对象的引用,不会影响到另一个变量。

var o1 = {};
var o2 = o1;
o1 = 1;
o2 // {}

但是,这种引用只局限于<code>对象</code>,对于原始类型的数据则是<code>传值引用</code>,也就是说,都是值的拷贝。

var x = 1;
var y = x;
x = 2;
y // 1

1.3 表达式还是语句区别
对象采用大括号表示,这导致了一个问题:如果行首是一个大括号,它到底是表达式还是语句?

{ foo: 123 }

JavaScript引擎读到上面这行代码,会发现可能有两种含义。第一种可能是,这是一个表达式,表示一个包含foo属性的对象;第二种可能是,这是一个语句,表示一个代码区块,里面有一个标签foo,指向表达式123。

为了避免这种歧义,JavaScript规定,如果行首是<b>大括号</b>,一律解释为语句(<b>即代码块</b>)。如果要解释为表达式(<b>即对象</b>),必须在大括号前加上<b>圆括号</b>。
这种差异在eval语句中反映得最明显:

eval('{foo: 123}') // 123
eval('({foo: 123})') // {foo: 123}

2. 相关操作#

2.1 查看所有key

var o = { key1: 1, key2: 2};
Object.keys(o);// ['key1', 'key2']

2.2 删除属性
delet命令用于删除对象的属性,删除成功后返回true。

var o = {p: 1};
Object.keys(o) // ["p"]
delete o.p // true

o.p // undefined
Object.keys(o) // []

注意,删除一个不存在的属性,delete不报错,而且返回true。

  var o = {};
delete o.p // true

因此,不能根据delete命令的结果,认定某个属性是存在的。

var o = Object.defineProperty({}, 'p', { value: 123, configurable: false});
o.p // 123
delete o.p // false

<code>delete命令只能删除对象本身的属性!!!</code>

2.3 in运算符
in运算符用于检查对象是否包含某个属性(注意,检查的是键名,不是键值),如果包含就返回true,否则返回false。in运算符的一个问题是,它不能识别对象<i>继承</i>的属性。

var o = new Object();
o.hasOwnProperty('toString') // false
'toString' in o // true

使用for in遍历对象

var o = {a: 1, b: 2, c: 3};
for (var i in o) {
 console.log(o[i]);
}
//提取对象属性
var obj = { x: 1, y: 2};
var props = [];
var i = 0;
for (props[i++] in obj);
props // ['x', 'y']

2.4 with语句
(1)它的作用是操作同一个对象的多个属性时,提供一些书写的方便。

// 例一
with (o) {
 p1 = 1;
 p2 = 2;
}
// 等同于
o.p1 = 1;
o.p2 = 2;

// 例二
with (document.links[0]){
 console.log(href); 
 console.log(title);
 console.log(style);
}
// 等同于
console.log(document.links[0].href);
console.log(document.links[0].title);
console.log(document.links[0].style);

注意,with区块内部的变量,必须是当前对象已经存在的属性,否则会创造一个当前作用域的全局变量。这是因为with区块没有改变作用域,它的内部依然是当前作用域。

var o = {};
with (o) {
 x = "abc";
}
o.x // undefined
x // "abc"

(2)这是with语句的一个很大的弊病,就是绑定对象不明确。

with (o) { console.log(x);}

单纯从上面的代码块,根本无法判断x到底是全局变量,还是o对象的一个属性。这非常不利于代码的除错和模块化,编译器也无法对这段代码进行优化,只能留到运行时判断,这就拖慢了运行速度。因此,建议不要使用with
语句,可以考虑用一个<code>临时变量</code>代替with。

with(o1.o2.o3) { console.log(p1 + p2);}
// 可以写成
var temp = o1.o2.o3;console.log(temp.p1 + temp.p2);

(3)with语句少数有用场合之一,就是替换模板变量。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,569评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,499评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,271评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,087评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,474评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,670评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,911评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,636评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,397评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,607评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,093评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,418评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,074评论 3 237
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,092评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,865评论 0 196
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,726评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,627评论 2 270

推荐阅读更多精彩内容

  • 第一章: JS简介 从当初简单的语言,变成了现在能够处理复杂计算和交互,拥有闭包、匿名函数, 甚至元编程等...
    LaBaby_阅读 1,565评论 0 6
  • 《ijs》速成开发手册3.0 官方用户交流:iApp开发交流(1) 239547050iApp开发交流(2) 10...
    叶染柒丶阅读 4,750评论 0 7
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,296评论 18 399
  • 2016.7.3 猴年马月最后一天 愿你我都勇敢又执着 愿世界和平,雾霾不再来 好的一并期待,坏的一律包容 接受意...
    秝詴莔阅读 223评论 0 0
  • 当前win10系统中,在环境变量中新增了相关的变量,但是打开默认的cmd,还是没有这个变量。 如果想办法打开管理员...
    五大RobertWu伍洋阅读 1,356评论 0 0