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的关系是什么呢？见下表：

类型 对象
抽象 具体
其他语言中类的作用
在JS中是构造函数的形式（构造函数=类）
命名用大坨法（首字母大写）

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

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

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

赞 (0)

相关推荐

  • 浅谈js之字面量、对象字面量的访问、关键字in的用法

    一:字面量含义 字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量. 字面量分为字符串字面量(string literal ).数组字面量(array literal)和 对象字面量(object literal),另外还有函数字面量(function literal). 示例: var test="hello world!"; "hello world!"就是字符串字面量,test是变量名. 二:对象字面量 对象字面量有两种访问方式

  • 深入理解javascript构造函数和原型对象

    深入理解javascript构造函数和原型对象

    常用的几种对象创建模式 使用new关键字创建 最基础的对象创建方式,无非就是和其他多数语言一样说的一样:没对象,你new一个呀! var gf = new Object(); gf.name = "tangwei"; gf.bar = "c++"; gf.sayWhat = function() { console.log(this.name + "said:love you forever"); } 使用字面量创建 这样似乎妥妥的了,但是宅寂的

  • JavaScript构造函数详解

    JavaScript构造函数详解

    构造函数就是初始化一个实例对象,对象的prototype属性是继承一个实例对象. 构造函数注意事项: 1.默认函数首字母大写 2.构造函数并没有显示返回任何东西.new 操作符会自动创建给定的类型并返回他们,当调用构造函数时,new会自动创建this对象,且类型就是构造函数类型. 3.也可以在构造函数中显示调用return.如果返回的值是一个对象,它会代替新创建的对象实例返回.如果返回的值是一个原始类型,它会被忽略,新创建的实例会被返回. function Person( name){ this

  • JavaScript中的普通函数与构造函数比较

    问题 什么是构造函数? 构造函数与普通函数区别是什么? 用new关键字的时候到底做了什么? 构造函数有返回值怎么办? 构造函数能当普通函数调用吗? 以下是我的一些理解,理解错误的地方恳请大家帮忙指正,谢谢! this this永远指向当前正在被执行的函数或方法的owner.例如: function test(){ console.log(this); } test(); //Window {top: Window, window: Window, location: Location, exte

  • PHP中使用json数据格式定义字面量对象的方法

    PHPer都知道PHP是不支持字面量了,至少目前版本都不支持.比如,在JS中可以这样定义object 复制代码 代码如下: var o = { 'name' : 'qttc' , 'url' : 'www.jb51.net' }; alert(o.name); Python中定义字典,也可以这样定义: 复制代码 代码如下: o = { 'name' : 'qttc' , 'url' : 'www.jb51.net' } print o['name'] 但在PHP中这么定义object: 复制代码

  • js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)

    在上篇文章给大家介绍了javascript面向对象基础,本篇文章继续深入学习javascript面向对象,JS的语法非常灵活,简单的对象创建就有好几种不同的方法.这些过于灵活的地方有时候确实很让人迷惑,那么今天我们就来梳理一下JS中常用的创建对象的几种方法吧. 前言 虽然使用 Object构造函数 或者使用 对象字面量 可以很方便的用来创建一个对象,但这种方式有一个明显的缺点:使用一个接口创建多个对象会产生很多冗余的代码.因此为了解决这个问题,人们开始使用以下几种方式来常见对象. 工厂模式 该模

  • Javascript对象字面量的理解

    对象字面量的输出方式以及定义好处 1.对象字面量的输出方式有两种:传统的'.',以及数组方式,只不过用数组方式输出时,方括号里面要用引号括起来,如 var box = { name:'abc'; age:28 }; alert(box['name']); 给对象定义方法, A:如果用传统定义对象的方式,就需要先定义方法,然后再把这个方法名赋值给对象的一个属性,如果要调用这个方法不加括号,就是返回方法代码:如果要调用这个方法该对象属性后面加上括号,就得到方法的返回值 function objrun

  • JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

    什么是面向对象?面向对象是一种思想!(废话). 面向对象可以把程序中的关键模块都视为对象,而模块拥有属性及方法.这样我们如果把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.接下来将为大家讲解在JS中面向对象的实现.   工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象.其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可. function createBlo

  • JS特殊函数(Function()构造函数、函数直接量)区别介绍

    函数定义 函数是由这样的方式进行声明的:关键字 function.函数名.一组参数,以及置于括号中的待执行代码. 函数的构造语法有这三种: Js代码 复制代码 代码如下: 1.function functionName(arg0, arg1, ... argN) { statements }//function语句 2.var function_name = new Function(arg1, arg2, ..., argN, function_body);//Function()构造函数 3

  • JS中的构造函数详细解析

    在JavaScript中,任何合法的函数都可以作为对象的构造函数,这既包括系统内置函数,也包括用户自己定义的函数.一旦函数被作为构造函数执行,它内部的this属性将引用函数本身. 通常来说,构造函数没有返回值,它们只是初始化由this指针传递进来的对象,并且什么也不返回.如果一个函数有返回值,被返回的对象就成了new表达式的值.从形式上看,一个函数被作为构造函数还是普通函数执行的唯一区别,是否用new运算符. 上面的描述事实上有着更为精确的含义,这要把函数如果有返回值的情况分为函数的返回值是引用

  • JavaScript 对象字面量讲解

    JavaScript 对象字面量讲解

    在编程语言中,字面量是一种表示值的记法.例如,"Hello, World!" 在许多语言中都表示一个字符串字面量(string literal ),JavaScript也不例外.以下也是JavaScript字面量的例子,如5.true.false和null,它们分别表示一个整数.两个布尔值和一个空对象. JavaScript还支持对象和数组字面量,允许使用一种简洁而可读的记法来创建数组和对象.考虑以下语句,其中创建了一个包含两个属性的对象(firstName和lastName): 还可

  • JavaScript中用字面量创建对象介绍

    JavaScript中可以用字面量来直接创建一个新对象: 复制代码 代码如下: var obj = {a:27, "b":99}; 如上所述,在用字面量来创建对象的时候,对象中的property定义可以用单引号或双引号来包括,也可以忽略引号.不过,当property中出现空格.斜杠等特殊字符,或者使用的property与JS关键词冲突时,则必须使用引号. 在用字面量来创建对象的时候,property可以是空字符串,property中也可以出现空格: 复制代码 代码如下: //empty

随机推荐