浅析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 相关文章推荐
7个Javascript地图脚本整理
Oct 20 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
详解Vue中使用Echarts的两种方式
Jul 03 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
原生JS实现记忆翻牌游戏
Jul 31 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 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
Search Engine Friendly的URL设计
2006/10/09 PHP
非常不错的MySQL优化的8条经验
2008/03/24 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
php汉字转拼音的示例
2014/02/27 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
Python监控主机是否存活并以邮件报警
2015/09/22 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
python中的for循环
2018/09/28 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
python yield关键词案例测试
2019/10/15 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
NBA欧洲商店(西班牙):NBA Europe Store ES
2019/04/16 全球购物
数字漫画:comiXology
2020/06/13 全球购物
应届毕业生就业自荐信
2013/10/26 职场文书
实习单位评语
2014/04/26 职场文书
工作失职检讨书范文
2015/05/05 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
爱国电影观后感
2015/06/19 职场文书
安全生产奖惩制度
2015/08/06 职场文书
教师节随笔
2015/08/15 职场文书
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript