浅析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获取url参数的使用扩展实例
Dec 29 Javascript
js控制div及网页相关属性的代码
Dec 19 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 Javascript
javascript this指向相关问题及改变方法
Nov 19 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
一个简洁的多级别论坛
2006/10/09 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
原生js二级联动效果
2017/06/20 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
Python将多份excel表格整理成一份表格
2018/01/03 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
Python底层封装实现方法详解
2020/01/22 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
如何选择使用结构还是类
2014/05/30 面试题
求职简历的自我评价怎样写好
2013/10/07 职场文书
技校生自我鉴定
2013/12/08 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
合伙协议书范本
2014/04/21 职场文书
市场营销工作计划书
2014/05/06 职场文书
公司委托书范本5篇
2014/09/20 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
React如何使用axios请求数据并把数据渲染到组件
2022/08/05 Javascript