浅析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 设计模式 安全沙箱模式
Sep 24 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
vue实现简单的日历效果
Sep 24 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
跟我学习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
10条PHP编程习惯助你找工作
2008/09/29 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
浅谈js的异步执行
2016/10/18 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
python使用pymysql实现操作mysql
2016/09/13 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
is_file和file_exists效率比较
2021/03/14 PHP
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
销售员个人求职的自我评价
2014/02/10 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
青春励志演讲稿
2014/04/29 职场文书
体育教师求职信
2014/05/24 职场文书
信息工作经验交流材料
2014/05/28 职场文书
诚实守信演讲稿
2014/09/01 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis