JavaScript中的数据类型作为javascript的核心,我们经常要用到,也是最基础的。  javascript中有非常复杂的数据类型:包括对象(Object)数据类型,还有五个基本数据类型(Number, String, Boolean, Undefined, Null)。注意,这些基础的数据类型都是“不可改变的”(下文中将要解释),而对象是“可改变的”。

什么是对象(Object)?

一个对象是由一个或者多个基本数据类型或者引用数据类型组成的一个集合。组成集合的每一项由“属性/方法:值”的方式来设定这个对象的属性和方法,每一个属性/方法必须是独一无二的字符串或者数字。

举一个简单的例子:

var myFirstObject = {firstName: "Zhou", favoriteAuthor:"Nicholas"};

上面我们定义了一个对象-myFirstObject,他拥有firstName和favoriteAuthor两个属性,如果我们要访问的他话可以通过myFirstObject.firstName或者myFirstObject.favoriteAuthor或者myFirstObject[“firstName”]的形式来访问属性。但是,如果我们要访问的属性/方法名是一个数字,那么我们必须采用第二种方式(方括号方式)访问!否则会出错。

var ageGroup = {30: "Children", 100:"Very Old"};
console.log(ageGroup.30) // This will throw an error
// This is how you will access the value of the property 30, to get value "Children"
console.log(ageGroup["30"]); // Children
所以,一般情况下我们最好不要采用数字作为属性/方法名。

引用数据类型和基本数据类型的区别

一个主要的区别在于:引用数据类型的值存储的是一个引用而非真正的数值!我们先来看一个基本数据类型的例子:

// The primitive data type String is stored as a value
var person = "Kobe";  
var anotherPerson = person; // anotherPerson = the value of person
person = "Bryant"; // value of person changed
 
console.log(anotherPerson); // Kobe
console.log(person); // Bryant

由于基本数据类型的赋值操作是通过传值的方式来赋值的。所以,他们存储的数据都是相互独立,互不干扰的,一个变量数字改变跟另一个变量没有半毛钱关系。下面我们再来对照看一个引用数据类型的例子:

var person = {name: "Kobe"};
var anotherPerson = person;
person.name = "Bryant";
 
console.log(anotherPerson.name); // Bryant
console.log(person.name); // Bryant

我们可以看到,一个变量的属性值改变之后,另外一个引用了该对象的对象相应的属性值也跟着改变了。所谓引用,就是一个对象把自己存放东西的地方告诉了另外一个对象,另外一个对象下次要找什么东西的时候就跑到这个地方去找,如果其中一个对象对东西进行了变动,另外一个对象也可以看到(这就是我们在最前面提到“对象是可以改变的”原因)。总之,他们拥有同一个资源。

对象数据属性的特性

每一个对象数据属性不仅仅只是“属性/方法:值”对,它还包含其他三个特性:

    1.   
Configurable:表示这个属性是否可以被delete操作符删除。
    2.       Enumerable: 是否可以被for..in语句枚举出来。
    3.       Writable: 是否可以被改变。

注意:ECMAScript 5才支持对以上属性的访问。

创建对象

有两种普通创建对象的方法:

1.对象字面量方式

这是最普通,也是最简单的创建对象的方式:

// This is an empty object initialized using the object literal notation
var myBooks = {};
// This is an object with 4 items, again using object literal
var mango = {
color: "yellow",
shape: "round",
sweetness: 8,
howSweetAmI: function () {
        console.log("Hmm Hmm Good");
    }
}
2.构造器(函数)方式
一个构造器就是一个初始化新的对象的一个函数。我们通过“new”关键字来调用这个构造函数。
function Person(name, age){
this.name = name;
this.age = age;
this.sayName = function(){
    console.log(this.name);
  };
}
var person1 = new Person("zhouquan", 21);
person1.sayName();  //zhouquan

更多创建对象的方式请看我的一篇文章《javascript创建对象的方式》

参考资料:

http://javascriptissexy.com/javascript-objects-in-detail/

JavaScript对象详解的更多相关文章

  1. JavaScript | 对象详解

    ————————————————————————————————————————————————————————— 对象有哪些(导图) 内建对象 数据封装对象 Object对象 Object.prot ...

  2. (转)javascript中event对象详解

    原文:http://jiajiale.iteye.com/blog/195906 javascript中event对象详解          博客分类: javaScript JavaScriptCS ...

  3. js对象详解(JavaScript对象深度剖析,深度理解js对象)

    js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...

  4. JavaScript进阶知识点——函数和对象详解

    JavaScript进阶知识点--函数和对象详解 我们在上期内容中学习了JavaScript的基本知识点,今天让我们更加深入地了解JavaScript JavaScript函数 JavaScript函 ...

  5. JavaScript事件详解-jQuery的事件实现(三)

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  6. JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  7. JavaScript正则表达式详解(一)正则表达式入门

    JavaScript正则表达式是很多JavaScript开发人员比较头疼的事情,也很多人不愿意学习,只是必要的时候上网查一下就可以啦~本文中详细的把JavaScript正则表达式的用法进行了列表,希望 ...

  8. JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解

    二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...

  9. JavaScript事件详解-zepto的事件实现

    zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...

随机推荐

  1. 用ORM的思想操作XML文档,一个对象就搞定不要太简单。滚蛋吧!XmlDocument、XmlNode、Xml***……

    大家有没有这样的感受,一涉及XML文档操作就得百度一遍.是不是非!常!烦!.各种类型,各种方法,更别提为了找到一个节点多费劲.本来想写个XML操作的工具方法,写了两行一想既然XML文档是有规律的,如果 ...

  2. [笔记]ng2的webpack配置

    欢迎吐槽 前言 angular.cn教程中用的是systemjs加载器,那用webpack应该怎么配置呢?本文 demo: https://github.com/LeventZheng/angular ...

  3. [LeetCode] Median of Two Sorted Arrays 两个有序数组的中位数

    There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the two ...

  4. js自定义验证码

    分享一个js自定义的验证码 window.onload = function () {     var code;     $('.changePassword').click(function () ...

  5. 调用altera IP核的仿真流程—上

    调用altera IP核的仿真流程—上 在学习本节内容之后,请详细阅读<基于modelsim-SE的简单仿真流程>,因为本节是基于<基于modelsim-SE的简单仿真流程>的 ...

  6. Firefox默认英文修改中文

    对于firefox,中文还是看着顺眼,为了自己的顺心.动起手来,自力更生,丰衣足食! 01.确定Linux的firefox版本 firefox -v 02.下载对应版本的中文语言包 http://ft ...

  7. Style样式

    最重要的两个元素 :setter  Trigger  Style中的Setter setter是用来设置属性值的 <Style TargetType="{x:Type TextBox} ...

  8. ios应用程序结构

    MVC开发模式 什么是mvc,相信有一定开发经验的程序员都应该知道. M —— 模型,为程序提供数据 V —— 视图,为用户提供界面 C —— 控制器,用来控制程序视图,即上面的V 在ios程序中,一 ...

  9. 使用haproxy的ACL封禁IP

    http://www.360doc.com/content/11/1226/13/834950_175075893.shtml 该方法,用户访问得到的是403页面 或者尝试用http-request拒 ...

  10. Ubuntu下运行Shell脚本

    将一个脚本保存为带有扩展名的文件,如test.sh, 在终端上输入: chmod +x test.sh 然后输入: test.sh 终端显示: test.sh 找不到命令(后来看了鸟个私房菜,发现这样 ...