在现实生活中,汽车是一个物体。
汽车具有重量和颜色等属性,以及启动和停止等方法:
Object | Properties | Methods |
---|---|---|
![]() |
car.name = Fiat car.model = 500 car.weight = 850kg car.color = white |
car.start() car.drive() car.brake() car.stop() |
所有汽车都具有相同的属性,但属性值因汽车而异。
所有汽车都有相同的方法,但是方法是执行的 在不同时间。
您已经了解到 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 对象中的名称:值对称为属性:
约翰
美国能源部
50
蓝色的
您可以通过两种方式访问对象属性:
objectName.propertyName
或者
objectName["propertyName"]
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>
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 对象是命名值(称为属性)的容器。
对象也可以有方法。
方法是可以对对象执行的操作。
方法作为函数存储在属性中 定义。
约翰
美国能源部
50
蓝色的
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
是“拥有” 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
对象。它们使你的代码变得复杂并减慢速度 执行速度。
您将在本教程后面了解有关对象的更多信息。