浅析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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
JavaScript 事件记录使用说明
Oct 20 Javascript
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
JavaScript 比较时间大小的代码
Apr 24 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
jQuery插件之validation插件
Mar 29 jQuery
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 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处理json时中文问题的解决方法
2011/04/12 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
php中namespace及use用法分析
2016/12/06 PHP
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
Python性能提升之延迟初始化
2016/12/04 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
python 字符串格式化的示例
2020/09/21 Python
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
保护环境的标语
2014/06/09 职场文书
单位租房协议书范本
2014/12/04 职场文书
个人总结怎么写
2015/02/26 职场文书
2016年春节慰问信息
2015/03/25 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书