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 表示 thisfirstName 属性。

IE。 this.firstName 表示 personfirstName 属性。


是什么?

在 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

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

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