方法是分配给对象属性的函数,当在对象的属性中定义函数时,它被称为该对象的方法而不被称为函数,本篇文章就来给大家介绍关于JavaScript中方法的使用。
属性是预先设置的特定信息(值),其中添加了名称(属性名称)。在其属性中,该函数被特别称为“方法”。
我们来看具体的示例
在下面的程序中,我们基于交通灯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中的方法如何使用的详细内容。更多信息请关注PHP中文网其他相关文章!