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

在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=; // 定义一个属性 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访问对象属性和方法及区别的更多相关文章

  1. JavaScript 访问对象属性和方法及区别

    这篇文章主要介绍了浅析JavaScript访问对象属性和方法及区别的相关资料,仅供参考 属性是一个变量,用来表示一个对象的特征,如颜色.大小.重量等:方法是一个函数,用来表示对象的操作,如奔跑.呼吸. ...

  2. 转: JavaScript 获取对象属性和方法

    一.获取对象属性和方法 Object.keys()for in 返回对象的可枚举属性和方法的名称数组. Object.getOwnPropertyNames() 返回的数组的所有属性(可枚举或不可枚举 ...

  3. summery 总结篇 访问对象属性的方法

    访问一个对象的属性有两种方法: (1),通过“.”来访问:object.propertyName; (2),通过[]来访问:object[propertyName]; 访问一个对象的方法只能通过“.” ...

  4. JavaScript 获取对象属性和方法

    ShineJaie 原创整理,转载请注明出处. 一.获取对象属性和方法 Object.keys() 返回对象的可枚举属性和方法的名称数组. Object.getOwnPropertyNames() 返 ...

  5. JS枚举对象属性的方法及其区别

    愉快的中秋节要过去了,国庆倒计时两个周!!! 闲话不多说,那今天我们来看一看JS中枚举对象属性的方法有哪些以及他们的区别 首先在JS里面枚举对象属性一共有三种方法 for in: 会遍历对象中所有的可 ...

  6. JavaScript访问对象属性

    在JavaScript中,可以使用“ . ”和“ [ ] ”访问对象的属性. 1.点表示法 使用“ . ”运算符来存取一个对象的属性时,属性名是用标识符表示的.而在JavaScript程序中,标识符必 ...

  7. javascript window对象属性和方法

    window对象 window对象表示一个浏览器窗口或一个框架.在客户端JavaScript中,window对象是全局对象,所有的表达式 都在当前的环境中计算.也就是说,要引用当前窗口根本不需要特殊的 ...

  8. javascript Location对象属性和方法

    Location对象 Location对象包含有关当前URL的信息 https://blog.csdn.net/u010953692/article/details/80901035#3 https( ...

  9. JavaScript原生对象属性和方法详解——Array对象

    http://www.feeldesignstudio.com/2013/09/native-javascript-object-properties-and-methods-array/ lengt ...

随机推荐

  1. 故障处理:磁盘扩容出错:e2fsck: Bad magic number in super-block while trying to open /dev/vdb1

    按照阿里云官网教程对云服务器进行磁盘扩容,使用fdisk重新分区,最后使用e2fsck和resize2fs来完成文件系统层面的扩容 在执行“e2fsck -f /dev/vdb1”命令时报错,如果你的 ...

  2. linux screen 命令详解(转载)

    转载于:http://www.cnblogs.com/mchina/archive/2013/01/30/2880680.html 一.背景 系统管理员经常需要SSH 或者telent 远程登录到Li ...

  3. WPF 中的 NameScope

    我们在 WPF 中使用绑定时可以使用 ElementName=Foo 这样的写法,并且还能够真的在运行时找到这个名称对应的对象,是因为 WPF 中提供了名称范围概念. 实现 INameScope 接口 ...

  4. CH1806 Matrix

    题意 描述 给定一个M行N列的01矩阵(只包含数字0或1的矩阵),再执行Q次询问,每次询问给出一个A行B列的01矩阵,求该矩阵是否在原矩阵中出现过. 输入格式 第一行四个整数M,N,A,B. 接下来一 ...

  5. 抽取JDBCTemplate

    抽取JDBCTemplate 为了解决DAO实现类中代码的重复问题,另外使得代码更通用,所以抽取一个公共的模板,使其更具有通用性. DAO实现类的代码 public class StudentDAOI ...

  6. 随笔:关于 FastAdmin ueditor 插件 中的 rand mt_rand mt_getrandmax 问题

    随笔:关于 FastAdmin ueditor 插件 中的 rand mt_rand mt_getrandmax 问题 问题来源 一位小伙伴在使用 Ueditor 插件时出错,因为用的是 php7.1 ...

  7. 洛谷2148(SDOI2009) E&D

    题目:https://www.luogu.org/problemnew/show/P2148 SG函数+找规律. 普通地用SG函数做. 每两堆是一个独立问题.因为虽然有可能一个人在同一组里连续操作2次 ...

  8. java对图片的处理

    原文地址:http://www.blogjava.net/PrettyBoyCyb/archive/2006/11/13/80922.html java 中的图片处理是很让人头疼的一件事情.目前 ja ...

  9. sdk下载地址

    http://www.androiddevtools.cn/ 容器,然后跟着下面的提示下载对应需要的包 放到对应的位置 即可

  10. Bootstrap-CL:导航栏

    ylbtech-Bootstrap-CL:导航栏 1.返回顶部 1. Bootstrap 导航栏 导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页 ...