浅析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 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 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
解析数组非数字键名引号的必要性
2013/08/09 PHP
php生成excel文件的简单方法
2014/02/08 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
CI框架的安全性分析
2016/05/18 PHP
PHP最常用的正则表达式
2017/02/13 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
python+opencv实现动态物体追踪
2018/01/09 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
环境工程专业自荐信范文
2014/03/18 职场文书
租车协议书范本
2014/04/22 职场文书
合作协议书
2014/04/23 职场文书
讲座新闻稿
2015/07/18 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python