浅析JavaScript访问对象属性和方法及区别

 更新时间:2015年11月16日 10:19:39   投稿:mrr  
这篇文章主要介绍了浅析JavaScript访问对象属性和方法及区别的相关资料,需要的朋友可以参考下

属性是一个变量,用来表示一个对象的特征,如颜色、大小、重量等;方法是一个函数,用来表示对象的操作,如奔跑、呼吸、跳跃等。

在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.性能方面区别

数组[]表示法在存取属性值时会进行表达式运行。而点表示法是直接存取属性值,理论上执行效率会比数组表示法高。性能方面其实可以忽略。

某些场景必须用到数组表示法来动态存取属性值,这个是点表示法无法做到的。

总的来说,这两种方法区别上不大,都有对应的使用场景。点表示法一般作为静态对象使用时来存取属性。而数组表示法在动态存取属性时就非常有用。

相关文章

  • uniapp使用uni-imei插件获取手机的设备号

    uniapp使用uni-imei插件获取手机的设备号

    uniapp框架是一款开发跨平台应用的工具,它支持iOS、Android以及Web等多个平台,在这些平台中,uniapp可以访问某些设备的硬件信息,这篇文章主要给大家介绍了关于uniapp使用uni-imei插件获取手机设备号的相关资料,需要的朋友可以参考下
    2024-01-01
  • 谷歌浏览器不支持showModalDialog模态对话框的解决方法

    谷歌浏览器不支持showModalDialog模态对话框的解决方法

    谷歌浏览器不支持showModalDialog模态对话框和无法返回returnValue,这个问题,想必很多朋友都有遇到过吧,解决方法很简单,下面的思路,大家可以看看
    2014-09-09
  • 微信小程序多表联合查询的实现详解

    微信小程序多表联合查询的实现详解

    小程序设计中,通常会根据业务来做多表的拆分,多表拆分一般是根据业务的特点进行拆分。比如我们在文章关注的业务中,会将文章和关注信息拆分成一对多的表关系。初学者可能对一对一、一对多、多对多的设计概念不是特别清楚
    2022-08-08
  • CocosCreator通用框架设计之资源管理

    CocosCreator通用框架设计之资源管理

    这篇文章主要介绍了CocosCreator通用框架设计之资源管理,对性能优化感兴趣的同学,一定要看一下
    2021-04-04
  • Dom 学习总结以及实例的使用介绍

    Dom 学习总结以及实例的使用介绍

    本篇文章小编为大家介绍,Dom 学习总结以及实例的使用。需要的朋友参考下
    2013-04-04
  • js Proxy的原理详解

    js Proxy的原理详解

    Proxy用于修改某些操作的默认行为,在目标对象前架设一个“拦截”层,外界对该对象的访问都必须先通过这一层拦截,因此提供了一种机制可以对外界的访问进行过滤和改写。本文就讲讲Proxy的使用
    2021-05-05
  • typescript+react实现移动端和PC端简单拖拽效果

    typescript+react实现移动端和PC端简单拖拽效果

    这篇文章主要为大家详细介绍了typescript+react实现移动端和PC端简单拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JavaScript知识点总结(十一)之js中的Object类详解

    JavaScript知识点总结(十一)之js中的Object类详解

    这篇文章主要介绍了JavaScript知识点总结(十一)之js中的Object类详解的相关资料,需要的朋友可以参考下
    2016-05-05
  • 详解ES9的新特性之异步遍历Async iteration

    详解ES9的新特性之异步遍历Async iteration

    在ES6中,引入了同步iteration的概念,随着ES8中的Async操作符的引用,是不是可以在一异步操作中进行遍历操作呢?今天要给大家讲一讲ES9中的异步遍历的新特性Async iteration。
    2021-06-06
  • seajs1.3.0源码解析之module依赖有序加载

    seajs1.3.0源码解析之module依赖有序加载

    这里是seajs loader的核心部分,有些IE兼容的部分还不是很明白,主要是理解各个模块如何依赖有序加载,以及CMD规范
    2012-11-11

最新评论