JavaScript访问对象属性和方法介绍

什么是类（Class）？

类：用户定义的对象原型（prototype），该原型定义了一组可描述该类任何对象的属性。说简单一点，类是一个模板，我们可以使用该模板生成不同的具体的对象（Object），来完成我们想要的操作。

什么是实例实例（instance）？

实例：某一个类的单个对象（Object），例如我们定义了一个 Person 类，而具体的人，比如小明，小黄就是 Person 类的实例

什么是属性（Property）？

属性：描述该类具有的特征，比如人类具备的属性，身份证，姓名，性别，身高，体重等等都是属性

什么是方法（Method）？

方法：是该类对象的行为，例如这个男孩会打篮球，那个女孩会唱歌等等都是属于方法，常常通过方法改变一些类中的属性值

可以

把属性看作是对象的性质、特征

把方法看作是对象的动作、行为

【JavaScript对象模型的细节对象模型的细节 - JavaScript | MDN】

在JavaScript中通常使用”."运算符来存取对象的属性的值。或者使用[]作为一个关联数组来存取对象的属性；只能使用“ . ”来访问对象的方法。

访问对象的属性

1. 使用“ . ”来访问对象属性

语法：

objectName.propertyName

其中，objectName 为对象名称，propertyName为属性名称。

2. 使用“ [ ] ”来访问对象属性

语法：

objectName[propertyName]

其中，objectName 为对象名称，propertyName为属性名称。

访问对象的方法

在JavaScript中，只能使用“ . ”来访问对象的方法。

语法：

objectName.methodName()

其中，objectName 为对象名称，methodName() 为函数名称。

示例、一个Person类：


function Person() {
  this.name="张某"; // 定义一个属性 name
  this.sex="男"; // 定义一个属性 sex
  this.age=22; // 定义一个属性 age
  this.say=function(){ // 定义一个方法 say()
    return "嗨！大家好";
  }
}

var worker=new Person();

console.log("性别："+worker.sex); 使用“.”来访问对象属性

console.log("年龄："+worker["age"]); // 使用“[ ]”来访问对象属性

console.log(worker.say()); // 使用“.”来访问对象方法

打开一个浏览器，按F12键（参见浏览器的开发者工具使用介绍_软件开发技术爱好者的博客-CSDN博客_浏览器开发者工具怎么用），测试效果如下：

下面给出将Person类加入网页使用的例子


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
</head>
<body>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
 
<script>
function Person() {
  this.name="张某"; // 定义一个属性 name
  this.sex="男"; // 定义一个属性 sex
  this.age=22; // 定义一个属性 age
  this.say=function(){ // 定义一个方法 say()
    return "嗨！大家好";
  }
}
var worker=new Person();
document.getElementById("demo1").innerHTML =worker.sex
document.getElementById("demo2").innerHTML =worker.age
document.getElementById("demo3").innerHTML =worker.say()
 
</script>
 
</body>
</html>

保存文件名：网页中使用Person类的例子.html，用浏览器打开运行结果：

相关阅读:
【头歌-Python】8.3 政府工作报告数据提取(project)-第4关
“链圈”十年反思
基于python+django+vue学生作业管理系统
TI Sitara系列 AM64x开发板——TSN通信测试手册（下）
SpringBoot 时 jar 报错没有主清单属性
知识经济时代的基石：知识协同
网络安全-Diffie Hellman密钥协商
mac电脑卸载LVSecurityAgent
【问题解决】Debian更新源提示InRelease已过期
JDBC学习笔记

原文地址：https://blog.csdn.net/cnds123/article/details/125406135