浅析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 函数式编程的原理
Oct 16 Javascript
给js文件传参数(详解)
Jul 13 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
weex slider实现滑动底部导航功能
Aug 28 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
原生JS生成指定位数的验证码
Oct 28 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/05/01 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
php-fpm配置详解
2014/02/12 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
javascrpt密码强度校验函数详解
2020/03/18 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
Python实现汇率转换操作
2020/05/03 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
学前教育学生自荐信范文
2013/12/31 职场文书
初三化学教学反思
2014/01/23 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
大学生村官考核材料
2014/05/23 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
Python实现抖音热搜定时爬取功能
2022/03/16 Python