Javascript Objects详解


Posted in Javascript onSeptember 04, 2014

创建对象

 •对象直接量

var o = {
 foo : "bar"
 }

•构造函数

var o = new Object();

•原型继承

var p = Object.create(o);

类继承

Javascript对象拥有自有属性和继承属性。

 •在查询对象o的属性x时,先查找o中的属性x,如果没找到,则查找o的原型对象中的x属性,直到查找到x或者一个原型是null的对象为止

 •在给对象o的x属性赋值时,如果o中已经有一个自有属性x,则改变x的值,若o中不存在属性x,则为o创建一个x属性并赋值

 •也就是说,只有在查询时原型链才会起作用。

var O = {
 x : 1
 };
function P() {
 this.y = 2;
 }
P.prototype = O;
var t = new P();
 console.log(t);
 console.log('x' in t);//true
 console.log(t.hasOwnProperty('x'));//false

可以使用in 或者 hasOwnProperty 来判断对象中是否存在属性。

对象属性

 •遍历对象属性
 
可以使用 for..in 来遍历对象的属性

使用for..in时会遍历到原型链上的属性。遍历顺序是以广度优先遍历

所以使用hasOwnProperty便可以判断是否是对象自有的属性。

 •对象属性的特性
 
使用Object.getOwnPropertyDescriptor()获取对象特定属性的描述符

可写性(writable) 表示对象属性是否可写

例如

var o = {
  foo : 'bar'
}
Object.defineProperty(o, "foo", { writable : false });
o.foo = 'world';
console.log(o.foo);//仍然输出bar

 可枚举性(enumerable) 表示对象属性是否可枚举

例如
 Array中的length等属性的 enumerable是false,所以,

for (p in Array) {
  console.log(p);
}

 什么也不输出

可配置性(configurable) 表示可否修改属性的可配置性和可枚举性

可以用Object.defineProperties来定义这些配置属性。
Object.defineProperty(o, "foo", { writable : false });

 Get 表示获取对象属性的方法
Set 表示设置对象属性的方法

示例

var book = {
  _year: 2004,
  edition: 1
};
Object.defineProperty(book, "year", {
  get: function () {
    console.log('get year');
    return this._year;
  },
  set: function (newValue) {
    console.log('set year');
    if (newValue > 2004) {
      this._year = newValue;
      this.edition += newValue - 2004;
    }
  }
});
book.year = 2005;//控制台输出‘set year'
console.log(book.year);//控制台输出‘get year'和year的值

 对象方法

toString 将对象转换成字符串,默认的转换会是[object Object]之类的东西,所以需要转成json格式的话可以用JSON.stringify

valueOf 需要将对象转换成其他类型的时候要用到。同样的,默认转换没什么值得说的。
 
可执行对象

通过如下方法可以创建一个可执行对象

function bar(o) {
  var f = function() { return "Hello World!"; }
  o.__proto__ = f.__proto__;
  f.__proto__ = o;
  return f;
}
var o = { x: 5 };
var foo = bar(o);
console.log(foo());
console.log(foo.x);
console.log(typeof foo);//function

 既可以当作对象来使用(有原型链),也可以当作函数来直接调用

Javascript 相关文章推荐
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
js简易namespace管理器 实例代码
Jun 21 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
加随机数引入脚本不让浏览器读取缓存
Sep 04 #Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 #Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 #Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 #Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 #Javascript
告诉你什么是javascript的回调函数
Sep 04 #Javascript
jquery学习总结(超级详细)
Sep 04 #Javascript
You might like
PHP HTML代码串 截取实现代码
2009/06/29 PHP
PHP多态代码实例
2015/06/26 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
jQuery 入门讲解1
2009/04/15 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
彩色的翅膀教学反思
2014/04/25 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
公证书
2019/04/17 职场文书
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers