JavaScript 对象

目录

    显示目录

现实生活中的对象、属性和方法

在现实生活中，汽车是一个物体。

汽车具有重量和颜色等属性，以及启动和停止等方法：

Object Properties Methods

car.name = Fiat

car.model = 500

car.weight = 850kg

car.color = white
car.start()

car.drive()

car.brake()

car.stop()

所有汽车都具有相同的属性，但属性值因汽车而异。

所有汽车都有相同的方法，但是方法是执行的 在不同时间。

JavaScript 对象

您已经了解到 JavaScript 变量是 数据值的容器。

此代码分配一个简单值（菲亚特） 一个名为 car 的变量：

let car = "Fiat";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p id="demo"></p>

<script>
// Create and display a variable:
let car = "Fiat";
document.getElementById("demo").innerHTML = car;
</script>

</body>
</html>

对象也是变量。但对象可以包含很多 价值观。

此代码将许多值（菲亚特、500、白色）分配给 变量 命名汽车：

const car = {type:"Fiat", model:"500", color:"white"};

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};

// Display some data from the object:
document.getElementById("demo").innerHTML = "The car type is " + car.type;
</script>

</body>
</html>

这些值被写成名称：值对（名称和值用a分隔） 冒号）。

使用 const 关键字声明对象是一种常见的做法。

在“JS Const”一章中了解有关将 const 与对象一起使用的更多信息。

对象定义

您可以使用对象字面量定义（并创建）一个 JavaScript 对象：

例子

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
// Create an object:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

空格和换行符并不重要。一个对象定义可以跨越多行：

例子

const person = {
    firstName: "John",
    lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

对象属性

JavaScript 对象中的名称：值对称为属性：

firstName

约翰

lastName

美国能源部

age

50

eyeColor

蓝色的

访问对象属性

您可以通过两种方式访问对象属性：

objectName.propertyName

或者

objectName["propertyName"]

示例1

person.lastName;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>There are two different ways to access an object property.</p>

<p>You can use person.property or person["property"].</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName : "Doe",
  id     :  5566
};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>

</body>
</html>

例2

person["lastName"];

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>There are two different ways to access an object property.</p>

<p>You can use person.property or person["property"].</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName : "Doe",
  id     :  5566
};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>

</body>
</html>

JavaScript 对象是命名值（称为属性）的容器。

对象方法

对象也可以有方法。

方法是可以对对象执行的操作。

方法作为函数存储在属性中 定义。

firstName

约翰

lastName

美国能源部

age

50

eyeColor

蓝色的

fullName

function() {return this.firstName + " " + this.lastName;}

方法是存储为属性的函数。

例子

const person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

在上面的示例中，this 指的是 person 对象。

IE。 this.firstName 表示 this 的 firstName 属性。

IE。 this.firstName 表示 person 的 firstName 属性。

这是什么？

在 JavaScript 中，this 关键字指的是一个对象。

哪个对象取决于this如何被调用（使用或调用）。

this 关键字根据其使用方式引用不同的对象：

  • 在对象方法中，this 引用对象。

  • 单独而言，this 指的是全局对象。

  • 在函数中，this 指的是全局对象。

  • 在函数中，在严格模式下，this 是未定义。

  • 在事件中，this 指的是接收事件的元素。

  • call()、apply() 和 bind 等方法() 可以将 this 引用到任何对象。

笔记

this 不是变量。这是一个关键字。您无法更改this 的值。

也可以看看：

JavaScript this 教程

this 关键字

在函数定义中，this 指的是函数的“所有者”。

在上面的示例中，this 是“拥有” fullName 函数。

换句话说，this.firstName 表示this 对象 的firstName 属性。

在 JavaScript this 教程中了解有关 this 的更多信息。

访问对象方法

您可以使用以下语法访问对象方法：

objectName.methodName()

例子

name = person.fullName();

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>An object method is a function definition, stored as a property value.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

如果您访问不带() 括号的方法，则它 将返回函数定义：

例子

name = person.fullName;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>If you access an object method without (), it will return the function definition:</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName;
</script>

</body>
</html>

不要将字符串、数字和布尔值声明为对象！

当使用关键字“new”声明 JavaScript 变量时，该变量为 创建为 一个东西：

x = new String();        // Declares x as a String object
y = new Number();        // Declares y as a Number object
z = new Boolean();       // Declares z as a Boolean object

避免使用 String、Number 和 Boolean 对象。它们使你的代码变得复杂并减慢速度 执行速度。

您将在本教程后面了解有关对象的更多信息。