浅析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 相关文章推荐
ajax java 实现自动完成功能
Dec 19 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
微信小程序事件流原理解析
Nov 27 Javascript
JS实现简单九宫格抽奖
Jun 28 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
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
python实现简易内存监控
2018/06/21 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
电信专业应届生自荐信
2013/09/28 职场文书
房地产推广策划方案
2014/05/19 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
大学运动会通讯稿
2015/07/18 职场文书
关于环保的广播稿
2015/12/17 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android