浅析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 面向对象的JavaScript类
May 04 Javascript
javascript是怎么继承的介绍
Jan 05 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
js实现多图和单图上传显示
Dec 18 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
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
php中常见的sql攻击正则表达式汇总
2014/11/06 PHP
php导入模块文件分享
2015/03/17 PHP
php判断访问IP的方法
2015/06/19 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
JS数组交集、并集、差集的示例代码
2017/08/23 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
Python深入06——python的内存管理详解
2016/12/07 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
Python collections模块的使用方法
2020/10/09 Python
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
汽车工程专业应届生求职信
2013/10/19 职场文书
仓库理货员岗位职责
2013/12/18 职场文书
年终总结会主持词
2014/03/25 职场文书
保护环境建议书400字
2014/05/13 职场文书
金融管理专业求职信
2014/07/10 职场文书
2014年采购工作总结
2014/11/20 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
Python集合的基础操作
2021/11/01 Python
Django框架模板用法详解
2022/06/10 Python