浅析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 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
JS实现标签页效果(配合css)
Apr 03 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
js上下视差滚动简单实现代码
Mar 07 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
react 生命周期实例分析
May 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
PHP获取文件行数的方法
2015/06/10 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
php curl发送请求实例方法
2019/08/01 PHP
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决
2015/11/09 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
对Django url的几种使用方式详解
2019/08/06 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
Python用Jira库来操作Jira
2020/12/28 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
个人简历中的自我评价怎么写
2014/01/26 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
课例研修方案
2014/05/31 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
Java对文件的读写操作方法
2022/04/29 Java/Android