浅析JavaScript访问对象属性和方法及区别


Posted in Javascript onNovember 16, 2015

属性是一个变量,用来表示一个对象的特征,如颜色、大小、重量等;方法是一个函数,用来表示对象的操作,如奔跑、呼吸、跳跃等。

在JavaScript中通常使用”."运算符来存取对象的属性的值。或者使用[]作为一个关联数组来存取对象的属性。

对象的属性和方法统称为对象的成员。

访问对象的属性

在JavaScript中,可以使用“ . ”和“ [ ] ”来访问对象的属性。

1. 使用“ . ”来访问对象属性

语法:

    objectName.propertyName

其中,objectName 为对象名称,propertyName为属性名称。

2. 使用“ [ ] ”来访问对象属性

语法:

    objectName[propertyName]

其中,objectName 为对象名称,propertyName为属性名称。

访问对象的方法

在JavaScript中,只能使用“ . ”来访问对象的方法。

语法:

    objectName.methodName()

其中,objectName 为对象名称,methodName() 为函数名称。

【例5-1】创建一个Person类:

function Person() {
  this.name=" 张三 "; // 定义一个属性 name
  this.sex=" 男 "; // 定义一个属性 sex
  this.age=22; // 定义一个属性 age
  this.say=function(){ // 定义一个方法 say()
    return "嗨!大家好,我的名字是 " + this.name + " ,性别是 " + this.sex + ",今年 " + this.age +"岁!";
  }
}
var zhangsan=new Person();
alert("姓名:"+zhangsan.name); // 使用“.”来访问对象属性
alert("性别:"+zhangsan.sex);
alert("年龄:"+zhangsan["age"]); // 使用“[ ]”来访问对象属性
alert(zhangsan.say);  // 使用“.”来访问对象方法

PS:浅析对象访问属性的"."和"[]"方法区别

在JavaScript中通常使用”."运算符来存取对象的属性的值。或者使用[]作为一个关联数组来存取对象的属性。但是这两种方式有什么区别了?

例如,读取object中的property属性值:

  object.property

  object['property']

以上两种方式都可以实现属性的存取。

1.语法方面的区别

点表示法的对象的属性名是标识符,而后者的属性名则是一个字符串。

2.灵活性方面的区别

在JavaScript编写程序中,可以为对象创建任意数目的属性。但使用”.“运算符来存取一个对象的属性时,属性名是用标识符表示的。而在JavaScript程序中,标识符必须被逐字地输入,它们不是一种数据类型,因此程序不能对其操作。也就是说,标识符是静态的,在程序中必须对其进行硬编码。

而使用数组[]表示法来存取一个对象的属性时,属性名是用字符串表示的。字符串是JavaScript的一种数据类型,因此可以在程序运行中操作并创建它们。

3.性能方面区别

数组[]表示法在存取属性值时会进行表达式运行。而点表示法是直接存取属性值,理论上执行效率会比数组表示法高。性能方面其实可以忽略。

某些场景必须用到数组表示法来动态存取属性值,这个是点表示法无法做到的。

总的来说,这两种方法区别上不大,都有对应的使用场景。点表示法一般作为静态对象使用时来存取属性。而数组表示法在动态存取属性时就非常有用。

Javascript 相关文章推荐
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 #Javascript
简单实现限制uploadify上传个数
Nov 16 #Javascript
跟我学习javascript的隐式强制转换
Nov 16 #Javascript
跟我学习javascript的浮点数精度
Nov 16 #Javascript
跟我学习javascript的严格模式
Nov 16 #Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 #Javascript
关于javascript中dataset的问题小结
Nov 16 #Javascript
You might like
php模板中出现空行解决方法
2011/03/08 PHP
php自动获取关键字的方法
2015/01/06 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
2018/05/21 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
Python删除windows垃圾文件的方法
2015/07/14 Python
Python优先队列实现方法示例
2017/09/21 Python
python实现flappy bird游戏
2018/12/24 Python
Django REST framework视图的用法
2019/01/16 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
工作自我评价分享
2013/12/01 职场文书
学习经验演讲稿
2014/05/10 职场文书
公司员工活动策划方案
2014/08/20 职场文书
Python OpenCV快速入门教程
2021/04/17 Python