OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

JavaScript也有getter/setter方法:ES5 Object对象的5个不为人知的特性


分享到
分类 JS学习   关键字 JavaScript   发布 ourjs  1441691478297
注意 转载须保留原文链接,译文链接,作者译者等信息。  
这篇博客是关于ECMAScript5 Object的5个不为人知的特性。

1. ECMAScript 5有getter和setter属性方式


ECMAScript 5支持getters和setters。
你可以通过描述方法来实现。 


var obj = {
    get foo() {
        return Math.random();
    },
    set foo(value) {
        console.log('SET foo = '+value);
    },
};

你可以在console(F12)试一下:

> obj.foo
0.6029663002118468
> obj.foo
0.99780507478863
> obj.foo = 123;
SET foo = 123

2 以逗号结尾是合法的


从ES5开始,它就是合法的了,你可以在最后一个属性之后加一个逗号。这将有助于你添加一个新的属性(一些人将逗号前置来避免书写错误):

var translations = {
    yes: 'ja',
    no: 'nein',
    perhaps: 'vielleicht',
};


3. 对象的属性通常不需要使用引号


在ES5属性名的语法规范中规定,对象的属性可以是:

* 唯一标识符
* 字符串
* 数字

3.1 字符串作为key

var obj = {
    '#§$%': true,
    " \t\n": true,
};


3.2 唯一标识符作为key

var obj = {
    π: true,
    привет: true,
    café: true,
    $$$: true,
};

3.3 数字作为key

var obj = {
    1e2: true,
    1e-2: true,
    .234: true,
    0xFF: true,
};

这些数字key会会自动转换成字符串

> Object.keys(obj)
[ '100', '255', '0.01', '0.234' ]

与标识符不同。数字不能被点号引用

> obj.0xFF
SyntaxError: Unexpected token
> obj[0xFF]
true


4. 你可以使用保留字作为key


在 ECMAScript 3中你需要将保留字用引号休修饰这些属性。

> var obj = { 'new': 123 };
> obj['new']
123

在 ECMAScript 5没有必要了。

> var obj = { new: 123 };
> obj.new
123


5. 使用objects作为dictionary(键值对)有一些坑


ECMAScript5没有内置的字典数据结构(被称之为Map)。但其与Map对象还是有一些区别。

第一,你不能使用内置对象作为字典属性。比如hasOwnProperty这属性:

> var data = { hasOwnProperty: true };
> data.hasOwnProperty('someKey')
TypeError: boolean is not a function


其次,你必须小心继承的key。这就不是你想要的情况:

> var data = {}; // empty dictionary
> 'toString' in data
true
> data.toString
[Function: toString]

第三 __proto__作为key的话,会触发很多诡异的问题,因此你需要排除掉这种情况。


function escapeKey(key) {
    // Escape '__proto__', its escaped version etc.
    if (key.indexOf('__proto__') === 0) {
        return key+'%';
    } else {
        return key;
    }
}

function getValue(obj, key) {
    return obj[escapeKey(key)];
}

function setValue(obj, key, value) {
    obj[escapeKey(key)] = value;
}



5.1 正确的使用字典的方式

当一个字典对象的原型是null时,它可以很完美的工作。

> var dict = Object.create(null);
> dict.foo = 123;
> 'toString' in dict
false
> dict.toString
undefined
> 'foo' in dict
true


原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. JavaScript正在变成Web界的C++
  2. Node.js中的通用基础设计模式
  3. 请停止将JavaScript类型化(建议不要使用class实现类继承)
  4. QRCode:用纯JavaScript实现的微信二维码图片生成器
  5. 闪客时代开始被HTML5慢慢终结:Facebook首席安全官号召设定正式消灭Flash的期限
  6. ES6中的Map与JSON的相互转化(序列和持久化)
  7. 纽约时报使用Html5 WebRTC记录访问者IP地址
  8. 用jQuery和JavaScript深度复制JSON对象的方法
  9. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. ES6中的Map与JSON的相互转化(序列和持久化)
  2. 用jQuery和JavaScript深度复制JSON对象的方法
  3. Node.js中的通用基础设计模式
  4. WowJS:在滚动页面时添加动画效果的简单实现
  5. [PPT]JavaScript初级教程
  6. JavaScript中的哈希表(Hash Maps的最佳实践)
  7. 我是怎么从顾虑到热爱ReactJS的(与AngularJS经典MVC数据绑定的对比)
  8. JSON序列化(stringify)对象时排除某些属性的两种方法
  9. JavaScript变量作用域(Variable Scope)和闭包(closure)的基础知识
  10. 用jQuery为跳转链接锚点添加平滑滚动动画效果(如回到顶部按钮)

 关键字 - JavaScript
  1. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  2. 如何用CSS将select/option文本居中或居右对齐
  3. JavaScript中怪异的地方
  4. 在JavaScript中创建命名空间的几种写法
  5. JavaScript中的继承,构造函数以及new关键字的作用
  6. 纽约时报使用Html5 WebRTC记录访问者IP地址
  7. 正则中test、exec、match的简单区别,以及括号的用法
  8. NativeScript的工作原理:用JavaScript调用原生API实现跨平台
  9. 2015年的JavaScript:Angular之类的框架将被库取代
  10. 少年,不要滥用箭头函数啊:JS中lambda表达式的优缺点和使用场景

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号