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


Posted in Javascript onApril 18, 2020

本文实例讲述了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>

结果是:

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

首先,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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
javascript window对象属性整理
Oct 24 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
理解javascript回调函数
Dec 28 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 Javascript
浅谈JavaScript 中有关时间对象的方法
Aug 15 Javascript
Vue.js表单控件实践
Oct 27 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
JS遍历树层级关系实现原理解析
Aug 31 Javascript
javascript 内存模型实例详解
Apr 18 #Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 #Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 #Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 #Javascript
es6函数name属性功能与用法实例分析
Apr 18 #Javascript
es6数组includes()用法实例分析
Apr 18 #Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 #Javascript
You might like
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
PHP传参之传值与传址的区别
2015/04/24 PHP
php判断表是否存在的方法
2015/06/18 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
js处理表格对table进行修饰
2014/05/26 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
python获取url的返回信息方法
2018/12/17 Python
python简单区块链模拟详解
2019/07/03 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
python super函数使用方法详解
2020/02/14 Python
python实现无边框进度条的实例代码
2020/12/30 Python
Hotels.com越南:酒店预订
2019/10/29 全球购物
外企求职信范文分享
2013/12/31 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
基石观后感
2015/06/12 职场文书
Python Parser的用法
2021/05/12 Python
Python中threading库实现线程锁与释放锁
2021/05/17 Python
Python Django模型详解
2021/10/05 Python
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript