Javascript Objects详解

 更新时间:2014年09月04日 10:39:15   投稿:hebedich  
在JavaScript中,对象(Objects)是数据(变量),属性和方法。 几乎“一切”的JavaScript视为对象。日期,数组,字符串,函数的…在JavaScript中你也可以创建你自己的对象。

创建对象

 •对象直接量

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入门初体验书写方式

    学了这么久,你真的了解javascript吗?很多不知道的小白总是把它和java联系在一起,在这里阿牛很负责任的告诉你们,两者没有任何关系,今天就来带你们一起揭开javascript的神秘面纱
    2022-03-03
  • JavaScript高级程序设计

    JavaScript高级程序设计

    JavaScript高级程序设计...
    2006-12-12
  • Javascript实例项目放大镜特效的实现流程

    Javascript实例项目放大镜特效的实现流程

    商城网站包括APP端中把鼠标光标移动到预览图上就会看到这部分商品图片放大了,这就是JavaScript实现的放大镜特效,今天我们也来实现一波
    2021-11-11
  • js中top/parent/frame概述及案例应用

    js中top/parent/frame概述及案例应用

    top:永远指分割窗口最高层次的浏览器窗口;parent:包含当前分割窗口的父窗口,本文将围绕js中top、parent、frame进行讲述及他们的应用案例
    2013-02-02
  • Javascript学习笔记1 数据类型

    Javascript学习笔记1 数据类型

    在Javascript中只有五种简单类型,分别为null,undefined,boolean,String和Number.一种复杂类型:object。
    2010-01-01
  • 简介JavaScript中Math.cos()余弦方法的使用

    简介JavaScript中Math.cos()余弦方法的使用

    这篇文章主要介绍了简介JavaScript中Math.cos()余弦方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06
  • 正则表达式(语法篇推荐)

    正则表达式(语法篇推荐)

    下面小编就为大家带来一篇正则表达式(语法篇推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • javascript实现的网页局布刷新效果

    javascript实现的网页局布刷新效果

    AJAX,近几年火热起来的一个词.什么是ajax本文就不介绍了,其实,AJAX也就是 javascript脚本的应用.全拼是:AsynchronousJavaScript+XML .现在我们就来看一个用javascript实现的局部刷新
    2008-12-12
  • 前端js文件合并的三种方式推荐

    前端js文件合并的三种方式推荐

    下面小编就为大家带来一篇前端js文件合并的三种方式推荐。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • input按钮的事件处理大全

    input按钮的事件处理大全

    input按钮的事件处理大全,收集的是网页中常用的一些事件处理,需要的朋友可以收藏下。
    2010-12-12

最新评论