时间：2021-07-01 10:21:17 帮助过：28人阅读
属性是预先设置的特定信息（值），其中添加了名称（属性名称）。在其属性中，该函数被特别称为“方法”。
我们来看具体的示例
在下面的程序中，我们基于交通灯blue，yellow，red创建一个对象，并将其放在一个名为traffic_light的变量中。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>JavaScript</title>
</head>
<body>
<script>
var traffic_light = {
blue: "go",
yellow: "slow down",
red: "stop"
}
</script>
</body>
</html>我们在这里添加了一个名为current的属性。在current中包含交通信号灯的颜色。
<script>
var traffic_light = {
blue: "go",
yellow: "slow down",
red: "stop", current: " "
}
</script>改变交通灯颜色的函数定义为change_light。然后，通过调用名为change_light的方法（函数）来更改此current的值。
我们首先定义函数change_light
继续在上面的程序中使用function，让我们暂时定义函数为change_light。
让我们考虑下一个信号调用change_light以确定要调用的下一个属性的行为，具体取决于当时当前的内容。
使用switch语句将change_light设置为四种模式。
如果current中包含的属性为blue，则下一个属性将更改为yellow。
如果current中包含的属性为yellow，下一个属性将更改为red。
如果current中包含的属性为red，下一个属性将更改为blue。
默认是blue。
<script>
var traffic_light = {
blue: "go",
yellow: "slow down",
red: "stop",
current: " "
}
function change_light(){
switch(traffic_light.current){
case traffic_light.blue:
traffic_light.current = traffic_light.yellow;
break;
case traffic_light.yellow:
traffic_light.current = traffic_light.red;
break;
case traffic_light.red:
traffic_light.current = traffic_light.blue;
break;
default:
traffic_light.current = traffic_light.blue;
break
}
}
</script>接下来，通过在console.log中调用current来查看结果
<script>
var traffic_light = {
blue: "go",
yellow: "slow down",
red: "stop",
current: " "
}
function change_light(){
switch(traffic_light.current){
case traffic_light.blue:
traffic_light.current = traffic_light.yellow;
break;
case traffic_light.yellow:
traffic_light.current = traffic_light.red;
break;
case traffic_light.red:
traffic_light.current = traffic_light.blue;
break;
default:
traffic_light.current = traffic_light.blue;
break
}
} change_light();
console.log(traffic_light.current);
</script>因为默认的属性设置为blue，所以输出blue的值为go。
使用console.log重复三次调用......
<script>
var traffic_light = {
blue: "go",
yellow: "slow down",
red: "stop",
current: " "
}
function change_light(){
switch(traffic_light.current){
case traffic_light.blue:
traffic_light.current = traffic_light.yellow;
break;
case traffic_light.yellow:
traffic_light.current = traffic_light.red;
break;
case traffic_light.red:
traffic_light.current = traffic_light.blue;
break;
default:
traffic_light.current = traffic_light.blue;
break
}
}
change_light();
console.log(traffic_light.current);
change_light();
console.log(traffic_light.current);
change_light();
console.log(traffic_light.current);
change_light();
console.log(traffic_light.current);
</script>current的变化从blue->yellow->red->blue
值的输出为go->slow down->stop->go
最后就让我们来看看让change_light作为traffic_light的方法的使用
要做的是在current：“”之后设置属性名称change_light，并使用以下函数对其进行分隔（比如用“：”分隔它们）。（此时，连续的函数名称change_light是重复的，所以可以删除它）
<script>
var traffic_light = {
blue: "go",
yellow: "slow down",
red: "stop",
current: " ",
change_light:function(){
switch(traffic_light.current){
case traffic_light.blue:
traffic_light.current = traffic_light.yellow;
break;
case traffic_light.yellow:
traffic_light.current = traffic_light.red;
break;
case traffic_light.red:
traffic_light.current = traffic_light.blue;
break;
default:
traffic_light.current = traffic_light.blue;
break
}
}
}
</script>现在，teaffic_light对象将有一个名为change_light的方法。
我们以同样的方式在consoe.log中调用它。这次重复执行四次。
在调用对象中的每个属性时，可以通过将“.”放入变量名称后跟属性名称来调用属性值。因此，当你想要在变量traffic_light中包含的对象中调用方法（属性）时，它变为如下所示。
<script>
var traffic_light = {
blue: "go",
yellow: "slow down",
red: "stop",
current: " ",
change_light:function() {
switch(traffic_light.current){
case traffic_light.blue:
traffic_light.current = traffic_light.yellow;
break;
case traffic_light.yellow:
traffic_light.current = traffic_light.red;
break;
case traffic_light.red:
traffic_light.current = traffic_light.blue;
break;
default:
traffic_light.current = traffic_light.blue;
break
}
}
}
traffic_light.change_light();
console.log(traffic_light.current);
traffic_light.change_light();
console.log(traffic_light.current);
traffic_light.change_light();
console.log(traffic_light.current);
traffic_light.change_light();
console.log(traffic_light.current);
</script>运行结果如下：
结果没有改变，因为函数change_light只是traffic_light的对象的方法。
以上就是JavaScript中的方法如何使用的详细内容，更多请关注Gxl网其它相关文章！