zoukankan      html  css  js  c++  java
  • 研磨JavaScript系列(五):奇妙的对象

    在JavaScript中,只有object和function两种东西有对象化的能力。我们先来说说函数的对象化能力。

    任何一个函数都可以为其动态地添加或去除属性,这些属性可以是简单类型,可以是对象,也可使其他的函数。也就是说,函数具有对象的全部特征,完全可以把函数当对象来用。其实,函数就是对象,只不过比一般的对象多了一个括号"()"操作符,这个操作符用来执行函数的逻辑,即函数本身还可以被调用,一般对象不可以被调用。除此之外,完全相同。

    <script type="text/javascript">
        function sing(){
            alert(sing.author + "正唱着" + sing.song);
        }
    
        sing.author = "张信哲";
        sing.song = "爱如潮水";
        sing();    //输出张信哲正唱着爱如潮水
    
        sing.author = "林志炫";
        sing.song = "蒙娜丽莎的眼泪";
        sing();    //输出林志炫正唱着蒙娜丽莎的眼泪
    </script>

    在这段代码中,sing函数被定义后,又给sing函数动态的增加了author和song属性。将author和song属性设为不同的演唱者和歌曲,在调用sing()时,就能显示出不同的结果。这个示例让我们理解了JavaScript函数就是对象的本质,也感受到了JavaScript语言的优美。

    我们应该是理解了function类型的东西都是和object类型一样的东西,这种东西被我们称为对象。我们的确可以这样去看待这些对象,因为它们既有属性,也有方法。

    我们看下面的代码,可能会让我们产生新的疑惑。

     1 <script type="text/javascript">
     2     var anObject = {};
     3     anObject.aProperty = "Property of object";  //对象的一个属性
     4     anObject.aMethod = function(){ alert("Method of object"); };  //对象的一个方法
     5 
     6     alert(anObject["aProperty"]);   //可以将对象当数值以属性名作为下标来访问属性
     7     alert(anObject["aMethod"]);     //可以将对象当数组以方法名作为下标来访问方法
     8 
     9     //遍历对象所有属性和方法进行迭代处理
    10     for (var s in anObject){
    11         alert(s + " is a " + typeof(anObject[s]));
    12     }
    13 </script>

    对于function类型的对象也一样

     1 <script type="text/javascript">
     2     var aFunction = function(){};  //一个函数
     3     aFunction.aProperty = "Property of object";  //函数的一个属性
     4     aFunction.aMethod = function(){ alert("Method of object"); };  //函数的一个方法
     5 
     6     alert(aFunction["aProperty"]);   //可以将函数当数组以属性名作为下标来访问属性
     7     alert(aFunction["aMethod"]);     //可以将函数当数组以方法名作为下标来访问方法
     8 
     9     //遍历函数所有属性和方法进行迭代处理
    10     for (var s in aFunction){
    11         alert(s + " is a " + typeof(aFunction[s]));
    12     }
    13 </script>

    是的,对象和函数可以入数组一样,用属性名或方法名作为下标来访问并处理。

    文章声明:本文部分内容参考自《悟透JavaScript》,这是一本学习JavaScript非常好的书。

  • 相关阅读:
    鼠标跟随效果 vue或者js通用
    element 多个文件上传多次http请求解决方法
    快速判断数组中值是否重复
    vue-resource+element upload上传(遇到formData总是变为object格式)
    element UI 下拉菜单滚动监听(vue指令)
    echarts环形图自动定位radius
    echarts地图散点高亮弹框制作
    js实现table表格相同内容按需合并
    element ui表格相同内容自动合并
    hadoop yarn
  • 原文地址:https://www.cnblogs.com/HLiang/p/wonderful_object.html
Copyright © 2011-2022 走看看