JavaScript对象字面量与构造函数详解

本文详细介绍JavaScript中对象字面量和构造函数的使用方法。

对象内部主要包含两类属性：

数据属性，例如名字、年龄、性别、出版社、地址等具体信息； 方法，即封装了代码逻辑的函数，在对象中同样被视为一种属性。

在JavaScript开发中，对象字面量和构造函数是核心概念。值得注意的是，其他许多编程语言中并不直接支持对象字面量这一语法特性。

一、对象字面量的语法规范

{ 属性名: 属性值, 属性名: 属性值, 方法名: 对应的函数定义 }

由大括号包裹的整个代码块即构成一个对象实例。

var p1 = { }

① 访问对象属性的方式：

2. 使用方括号（[]）语法

对象.属性名

2. [ ] 语法

对象["属性名"]

对象[变量]：通过外部定义一个类型为字符串的变量，并在方括号内直接使用该变量名来访问属性。

② 修改属性值：若该属性名在对象字面量中已存在，则执行此操作将修改其原有值； ② 修改属性值：若该属性名在对象字面量中已存在，则执行此操作将修改其原有值； ③ 新增属性：若该属性名在对象字面量中不存在，则此操作将同时新增属性名及其对应的属性值。

修改和新增属性均可采用以下语法：

对象.属性名 = 新值

④ 删除对象属性：

delete 对象.属性名

二、使用构造函数创建对象

  function Person(name, sex){
    var a = 10;
    this.name = name;
    this.sex = sex;
    this.speak = function(){

          }
    }

接下来我们new演示一下：

var p1 = new Person ;

此时，我们将p1称为一个对象。使用new关键字实例化时，系统会在堆内存（heap memory）中为其分配一块独立的内存空间。

p1的数据类型即为Person。

如果使用 p1 instanceof Person 进行检测，结果将返回true，而 instanceof 运算符正是用于测试对象类型的工具。

在代码块中，var a = 10 ; 定义了一个变量。该变量存储于栈内存中，但其生命周期仅限于构造函数执行期间。一旦构造函数执行完毕，该局部变量a即被销毁，其存在时间从new实例化开始，至构造函数最后一行代码执行结束为止。

然而，name、sex、speak等属性只要p1对象存在，这些属性就始终有效。

现在，我们进一步通过代码实例来体会局部变量a的生命周期，并结合内存模型进行理解：

<script>
  function Person(name, sex) {
    var a = 10;
    this.name = name;
    this.sex = sex;
    this.outputa = function () {
      console.log(a);
    }
    this.speak = function () {

    }
  }

  var p1 = new Person();
  console.log(p1.a);
  p1.outputa();
</script>

运行结果为：

首先，执行var p1 = new Person();，通过new关键字创建p1对象，计算机将在堆内存中为p1分配一块内存区域。

接着，执行console.log(p1.a);。对此语句的理解有两种视角：① p1在全局变量中并不存在a属性，该属性仅存在于构造函数的局部作用域中。构造函数中的局部变量var a = 10;虽然存在声明提升，但仅提升到函数体的第一行执行位置。这解释了为何无法在外部直接访问该局部变量。理解②指出，函数作用域内的变量属于局部变量，在栈内存中分配空间后，当函数执行至最后一行时，其生命周期即告终结。

此处返回的undefined是JavaScript的一种安全机制。当通过对象访问一个不存在的属性时，默认返回undefined；而如果是直接访问未定义的普通变量，则会抛出错误，提示该变量未被定义。

详细内容可参考：JavaScript内存模型详解。

*注意：对象字面量的用法中，赋值操作使用 ： 和 ，

构造函数的用法中，赋值操作使用 = 和 ；

那么，类型与对象之间的关系究竟如何？

即p1与Person之间的关系是什么？详见下表：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。