浅析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 相关文章推荐
jquery和css3实现的炫酷时尚的菜单导航
Sep 01 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
js实现Tab选项卡切换效果
Jul 17 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 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学习 计数器实例代码
2008/06/15 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
python随机生成指定长度密码的方法
2015/04/04 Python
详解Django通用视图中的函数包装
2015/07/21 Python
详解Python字符串对象的实现
2015/12/24 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
python-str,list,set间的转换实例
2018/06/27 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
先进个人事迹材料
2014/01/25 职场文书
老同学聚会感言
2014/02/23 职场文书
奥利奥广告词
2014/03/20 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript