JavaScript对象字面量和构造函数原理与用法详解

本文实例讲述了JavaScript对象字面量和构造函数。分享给大家供大家参考，具体如下：

对象中只有两种属性:（一种比较细的分法）

属性(数据属性)比如：名字，年龄，性别，出版社，地址等信息；
方法(封装代码的属性：函数 ，在这也是一种属性)。

在JS中对象的字面量和构造函数是非常的重点，其实在其他的语言中，是没有对象字面量的。

一.对象的字面量的语法:

{
属性名: 属性值,
属性名: 属性值,
方法名: 你们函数
}

这个大括号括起来的整个代码块就是叫做对象。

var p1 = { }

①访问对象的属性:

  1. . 语法

        对象.属性

  2. [ ] 语法

    对象["属性名"]

    对象[变量]     通过外面var一个变量，这个变量类型是字符串，然后在[]中直接使用变量名。

②修改属性的值:（当这个属性名在对象字面量中是存在的，那就是修改其值）
②修改属性的值:（当这个属性名在对象字面量中是存在的，那就是修改其值）
③新增属性的值:（当这个属性名在对象字面量中是没有的，那就是新增其属性名和属性值）

修改和新增都是一下语法：

对象.属性名 = 值

④删除对象的属性:

delete 对象.属性

二.使用构造函数来创建对象:

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

          }
    }

现在我们new一下：

var p1 = new Person ;

那么我们就叫p1是一个对象，一new出来就会在堆内存中分配一块内存空间。

那么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对象，计算机就会在堆内存（heap memory）中为P1选中一块内存。

然后，console.log(p1.a);，这句语句执行，这句可以这么理解①：你a在全局变量中并没有，只在构造函数中的局部变量中才有，在构造函数中的局部变量var a = 10;他会声明提前，但是他只是提前到函数的第一行执行。这也就可以说明局部变量，我们不能在外部使用。理解②就是函数作用域中的变量他是局部变量，在栈内存分配内存后，当函数执行到最后一行时，他就结束生命周期。

这个undefined是JS的一种安全机制，如果对象点一个没有生命的变量，那么就会默认成undefined，但如果是普通的变量，就会报错。报错信息是这个变量未被定义。

详见：JavaScript内存模型详解。

*注意：对象字面量的用法用 ： 和 ，

​ 构造函数的用法用 = 和 ；

那么类型和对象之间的关系是什么呢？

也就是比如p1和Person的关系是什么呢？见下表：

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

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

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

最新评论