温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JavaScript中属性的使用方法

发布时间:2020-04-01 11:31:22 来源:亿速云 阅读:109 作者:小新 栏目:web开发

本文小编主要给大家分享的是JavaScript中属性的使用方法,很多人都不太了解,今天小编为了让大家更加了解JavaScript,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。

方法是分配给对象属性的函数,当在对象的属性中定义函数时,它被称为该对象的方法而不被称为函数。

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。

JavaScript中属性的使用方法

使用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

JavaScript中属性的使用方法

最后就让我们来看看让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>

运行结果如下:

JavaScript中属性的使用方法

结果没有改变,因为函数change_light只是traffic_light的对象的方法。

关于JavaScript中属性的使用方法就分享到这里了,当然并不止以上和大家分析的办法,不过小编可以保证其准确性是绝对没问题的。希望以上内容可以对大家有一定的参考价值,可以学以致用。如果喜欢本篇文章,不妨把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI