浅析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 设计模式学习 Singleton
Jul 27 Javascript
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染
Nov 16 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
JavaScript中的Proxy对象
Nov 27 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的Yii框架入门使用教程
2016/02/15 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
ES6入门教程之let和const命令详解
2017/05/17 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
详解javascript void(0)
2020/07/13 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
python抓取文件夹的所有文件
2018/02/27 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
应届毕业生自我评价分享
2013/12/15 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
挂靠协议书范本
2014/04/22 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
2014年维修工作总结
2014/11/22 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
西柏坡导游词
2015/02/05 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript