JavaScript中的Object对象学习教程


Posted in Javascript onMay 20, 2016

参数:
(1)obj
必需。Object 对象分配到的变量名称。 
(2)值
可选。任一 JavaScript 基元数据类型(数字、布尔值或字符串)。  如果值是一个对象,则返回的对象是未修改的。  如果值是 null、“未定义”或“未提供”,则创建无内容的对象。 

Object对象的方法

Object作为构造函数使用时,可以接受一个参数。如果该参数是一个对象,则直接返回这个对象;如果是一个原始类型的值,则返回该值对应的包装对象。利用这一点,可以写一个判断变量是否为对象的函数。

function isObject(value) {
 return value === Object(value);
}

要在Object对象上面部署一个方法,有两种做法。

部署在Object对象本身
部署在Object.prototype对象
Object.keys方法和Object.getOwnPropertyNames方法很相似,一般用来遍历对象的属性。它们的参数都是一个对象,都返回一个数组,该数组的成员都是对象自身的(而不是继承的)所有属性名。两者区别在于,前者只返回可枚举的属性,后者还返回不可枚举的属性名。由于数组存在不可枚举属性length,因此一般使用Object.keys遍历数组。

JavaScript没有提供计算对象属性个数的方法,可通过 Object.keys(o).length 和 Object.getOwnPropertyNames(o).length 获取。

Object.observe方法用于观察对象属性的变化。

原型链相关方法:

Object.create():生成一个新对象,并该对象的原型。
Object.getPrototypeOf():获取对象的Prototype对象。
Object实例对象的方法

Object.prototype.valueOf():valueOf方法的作用是返回一个对象的值,默认情况下返回对象本身。该方法的主要用途是,JavaScript自动类型转换时会默认调用这个方法。

Object.prototype.toString():toString方法的作用是返回一个对象的字符串形式。当对象用于字符串加法时,会自动调用toString方法。

使用call方法,可以在任意值上调用Object.prototype.toString方法,从而判断这个值的类型。不同数据类型的toString方法返回值如下:

数值:返回[object Number]
字符串:返回[object String]
布尔值:返回[object Boolean]
undefined:返回[object Undefined]
null:返回[object Null]
对象:返回”[object “ + 构造函数的名称 + “]”

Object.prototype.toString.call(2) // "[object Number]"
Object.prototype.toString.call('') // "[object String]"

利用这个特性,可写出一个比typeof运算符更准确的类型判断函数。

var type = function (o){
 var s = Object.prototype.toString.call(o);
 return s.match(/\[object (.*?)\]/)[1].toLowerCase();
};

type({}); // "object"
type([]); // "array"
type(5); // "number"

在上面这个type函数的基础上,还可以加上专门判断某种类型数据的方法。

['Null', 'Undefined', 'Object', 'Array', 'String', 'Number',
'Boolean', 'Function', 'RegExp', 'Element', 'NaN', 'Infinite'
].forEach(function (t) {
 type['is' + t] = function (o) {
  return type(o) === t.toLowerCase();
 };
});

type.isObject({}); // true
type.isNumber(NaN); // false
type.isElement(document.createElement('div')); // true

对象的属性模型

在JavaScript内部,每个属性都有一个对应的attributes对象,保存该属性的一些元信息。使用Object.getOwnPropertyDescriptor方法,可读取o对象的p属性的attributes对象。attributes对象包含如下元信息:

value:表示该属性的值,默认为undefined(只要writable和configurable有一个为true,就可以改动)。
writable:表示该属性的值(value)是否可以改变,默认为true。
enumerable: 表示该属性是否可枚举,默认为true,也就是该属性会出现在for…in和Object.keys()等操作中。一般来说,系统原生的属性(即非用户自定义的属性)都是不可枚举的。
表示“可配置性”,默认为true。如果设为false,表示无法删除该属性,也不得改变attributes对象(value属性除外,如果writable为true,仍可改变value),也就是configurable属性控制了attributes对象的可写性。
表示该属性的取值函数(getter),默认为undefined。
表示该属性的存值函数(setter),默认为undefined。

var o = { p: 'a' };
Object.getOwnPropertyDescriptor(o, 'p');
// Object {
//  value: "a",
//  writable: true,
//  enumerable: true,
//  configurable: true
// }

Object.defineProperty方法允许通过定义attributes对象,来定义或修改一个属性,然后返回修改后的对象。格式如下:

Object.defineProperty(object, propertyName, attributesObject)
Object.defineProperty方法接受三个参数,第一个是属性所在的对象,第二个是属性名(它应该是一个字符串),第三个是属性的描述对象。通过此方法定义属性,属性对象的writable、configurable、enumerable三个属性的默认值都为false。

Object.defineProperty(o, "p", {
 value: "bar"
});
Object.getOwnPropertyDescriptor(o, 'p');
// Object {
//  value: "bar",
//  writable: false,
//  enumerable: false,
//  configurable: false
// }

如果一次性定义或修改多个属性,可以使用Object.defineProperties方法。需要注意的是,一旦定义了取值函数get(或存值函数set),就不能将writable设为true,或者同时定义value属性,否则会报错。

var o = Object.defineProperties({}, {
 p1: {value: 123, enumerable: true},
 p2: {value: "abc", enumerable: true},
 p3: {
  get: function () {
   return this.p1 + this.p2
  },
  enumerable: true,
  configurable: true
 }
});

enumerable可以用来设置“秘密”属性,如果一个属性的enumerable为false,则 for..in 循环、Object.keys 方法和 JSON.stringify 方法都不会取到该属性,但可以通过 o.xx 直接获取它的值。

for…in循环和Object.keys方法的区别在于,前者包括对象继承自原型对象的属性,而后者只包括对象本身的属性。如果需要获取对象自身的所有属性,不管enumerable的值,可以使用Object.getOwnPropertyNames方法。

可配置性决定了一个变量是否可以被删除(delete)。当使用var命令声明变量时,变量的configurable为false,而不使用var命令声明变量时(或者使用属性赋值的方式声明变量),变量的可配置性为true。这说明,delete只能删除对象的属性。

var a1 = 1; // configurable: false
a2 = 1; // configurable: true(等价于this.a2 = 1)

除了直接定义以外,属性还可以用存取函数(accessor)定义。其中,存值函数称为setter,使用set命令;取值函数称为getter,使用get命令。利用存取函数,可以实现数据对象与DOM对象的双向绑定。

Object.defineProperty(user, 'name', {
 get: function () {
  return document.getElementById("foo").value
 },
 set: function (newValue) {
  document.getElementById("foo").value = newValue;
 },
 configurable: true
});

控制对象状态

JavaScript提供了三种方法,精确控制一个对象的读写状态,防止对象被改变。最弱一层的保护是preventExtensions,其次是seal,最强的freeze。

Object.preventExtensions方法可以使得一个对象无法再添加新的属性,但可以用delete命令删除它的现有属性。Object.isExtensible方法可以用来检查是否可以为一个对象添加属性。

Object.seal方法使得一个对象既无法添加新属性,也无法删除旧属性。Object.seal还把现有属性的attributes对象的configurable属性设为false,使得attributes对象不再能改变。Object.isSealed方法用于检查一个对象是否使用了Object.seal方法。

Object.freeze方法可以使得一个对象无法添加新属性、无法删除旧属性、也无法改变属性的值,使得这个对象实际上变成了常量。Object.isFrozen方法用于检查一个对象是否使用了Object.freeze()方法。

使用上面这些方法锁定对象的可写性,但是依然可以通过改变该对象的原型对象,来为它增加属性。

var o = new Object();
Object.preventExtensions(o);
var proto = Object.getPrototypeOf(o);
proto.t = "hello";
o.t
// hello

一种解决方案是,把原型也冻结住。

var o = Object.seal(
 Object.create(Object.freeze({x:1}),
   {y: {value: 2, writable: true}})
);
Object.getPrototypeOf(o).t = "hello";
o.t // undefined

PS:
Object 对象包含在所有其他 JavaScript 对象中;它的所有方法和属性均可用于所有其他对象。  方法可在用户定义的对象中进行重新定义,并由 JavaScript 在适当时间调用。   toString方法是频繁重新定义的 Object 方法的一个示例。 
在此语言参考中,每个 Object 方法的说明均包括内部 JavaScript 对象的默认和对象特定的实现信息。
IE兼容方面,微软MSDN文档的话是”已在 Internet Explorer 6 之前的 Internet Explorer 中引入 Object Object“,所以不用担心~

Javascript 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
javascript实现的基于金山词霸网络翻译的代码
Jan 15 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 #Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 #Javascript
深入理解setTimeout函数和setInterval函数
May 20 #Javascript
JavaScript基础教程——入门必看篇
May 20 #Javascript
jQuery选择器及jquery案例详解(必看)
May 20 #Javascript
Jquery $when done then的用法详解
May 20 #Javascript
jQuery添加和删除输入文本框标签代码
May 20 #Javascript
You might like
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
简单的cookie计数器实现源码
2013/06/07 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
Python Pillow Image Invert
2019/01/22 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
师德师风承诺书
2014/05/23 职场文书
母亲节演讲稿
2014/05/27 职场文书
节水标语大全
2014/06/11 职场文书
离婚协议书范文
2015/01/26 职场文书