浅析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的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
js数组操作学习总结
Nov 04 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
vue过渡和animate.css结合使用详解
Jun 14 Javascript
vue input实现点击按钮文字增删功能示例
Jan 29 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 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
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
nodejs基础应用
2017/02/03 NodeJs
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
使用Python写个小监控
2016/01/27 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
Python解析微信dat文件的方法
2020/11/30 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
管理部部长岗位职责
2013/12/05 职场文书
竞选班长演讲稿
2013/12/30 职场文书
化妆品促销方案
2014/02/24 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
住房租房协议书
2014/08/20 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS
Python学习之迭代器详解
2022/04/01 Python