JavaScript早期（ES6之前）对象及其的属性和方法的访问介绍

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

软件开发技术爱好者

3268人浏览 · 2022-06-24 06:46:57

软件开发技术爱好者 · 2022-06-24 06:46:57 发布

JavaScript早期（ES6之前）对象及其的属性和方法的访问介绍

在面向对象编程方面，JavaScript和其他经典的面向对象编程语言（如Java）不同。早期javascript中（在ES6之前）只有对象，没有类的概念。ES6中提供了类（class）语法，事实上也只是一个语法糖而已 ——本质上仍然基于对象原型（prototype）并没有改变内部底层实现机制，只是在语法上更像面向对象编程。关于ES6中提供的类（class）可参见https://blog.csdn.net/cnds123/article/details/129982056

JS的对象(object)是相关数据和/或功能的集合。这些通常由几个变量和函数组成（当它们位于对象中时称为属性[properties]和方法[methods]）。见https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics对象基础(Object basics)节

可以

把属性（Property / properties）看作是描述对象的状态、性质、特征等数据

把方法看作是对象的动作、行为。方法实际上就是在对象中定义的函数。

JavaScript对象的属性和方法的访问

在JavaScript中，要获取对象中的某个值，可以使用对象名.属性名或者对象名["属性名"]的形式。
可以像访问对象中属性那样来调用对象中的方法——对象名.方法名() 或者对象名["方法名"]()的形式。

访问对象的属性

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

语法：

objectName.propertyName

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

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

语法：

objectName[propertyName]

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

访问对象的方法

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

objectName.methodName()

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

使用“ [ ] ”来访问对象方法。语法：

objectName["methodName"]()

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

JavaScript对象的创建

要讲解如何访问对象的属性和方法，需要有对象，因此在此和创建对象一起讲解。

【JavaScript对象可见

https://www.w3schools.cn/js/js_object_definition.asp

JavaScript 对象入门 - 学习 Web 开发 | MDN

使用对象 - JavaScript | MDN

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

★在ES6之前对象的创建

在ES6之前，JavaScript中不使用class创建对象，创建对象的几种常见方式（模式）如下：

☆利用字面量创建对象

obj = {}

obj表示对象名，花括号{} 里面包含了表达这个具体事物（对象）的成员——属性和方法，各成员之间用逗号分隔。

例、创建一个person对象

var person = {
    firstName: "John",
    lastName: "Doe",
    age: 50,
    eyeColor: "blue",
    addr: function(){
      return '上海市'; 
    }
};

console.log(person.firstName) //取属性值

person.firstName = 'yoyo' // 重新给属性赋值

console.log(person.firstName) // yoyo

person.tel = '123456' // 如果没有这个属性，赋值的时候就是给对象添加一个属性

console.log(person.tel) // 123456

console.log(person.addr) //调用方法，没有括号，此时返回的是函数对象。

console.log(person.addr()) //调用方法，有括号,得到return的返回结果：上海市

☆利用new Object 创建对象

obj = new Object();

obj表示对象名

例子

var obj = new Object(); //创建空对象
obj.user = 'yoyo'; //添加属性
obj.age = 22;  //添加属性
obj.fun = function() {
    return 'Hello' 
}

console.log(obj.user); //取属性值

console.log(obj.fun()); //调用方法,

☆利用工厂模式创建对象

将创建对象的代码封装在一个函数中——称为工厂函数，再利用工厂函数来创建对象。

function person (name,age,job){
    var person = new Object();
    person.name = name;
    person.age = age;
    person.job = job;
    person.addr = function(){
        return '上海市';
    }
    return person;
}

var person1 = person("Wang","22","Doctor"); //利用工厂函数来创建对象

console.log(person1.name); //取属性值

console.log(person1.addr()); //调用方法

☆利用构造函数创建对象

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋值初始值，其总与new运算符一起使用。（可以将对象中一些公共的属性和方法抽取出来，封装到该函数里）

function 构造函数名(){

this.属性 = 值;

this.方法= function(){

//函数体

}

obj= new 构造函数名();

obj表示对象名，构造函数不需要 return，建议构造函数名字首字母要大写，调用构造函数必须使用 new。

按照惯例，构造函数名称的首字母都是要大写的，非构造函数则以小写字母开头。构造函数本身也是函数，只不过可以用来创建对象。

示例、一个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()); // 使用“.”来访问对象方法

console.log(worker["say"]()); //使用“[ ]”来访问对象方法，[]内的双引号也可以改用单引号

打开一个浏览器，按F12键（可参见https://blog.csdn.net/cnds123/article/details/120822401），测试效果如下：

下面给出将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，用浏览器打开运行结果：