zoukankan      html  css  js  c++  java
  • 关于javascript中的构造函数和普通函数探索 [转]

    这是第一篇关于javascript模块的文章,在javascript入门的目录下,主要是记录一些对网上精彩的js研读碰到的疑惑,并做一些实验和探索


    关于js中的对象和方法的定义博主感到非常的迷惑。针对这一点开始了一系列的探索。
     1     <script type="text/javascript">  
     2         function fun(){  
     3             alert("good");  
     4             var age = 1;  
     5             this.name = 'Mr S.G';  
     6             this.method = fun2;  
     7         }  
     8         function fun2(){  
     9             alert("this is the second method show");  
    10         }  
    11         function fun1(){  
    12             var obj = new fun();  
    13             alert(obj.name);  
    14             obj.method();  
    15             alert(obj.age);  
    16         }  
    17         window.onload =  fun1;  
    18     </script>  


    在fun1()方法中通过var obj = new fun()创建了一个对象。 fun() 是一个特殊的函数 构造函数,它和普通的函数有什么区别和联系我将在下边谈论。 注意到上边有两种形式定义变量。this.name  和 var age .其实通过this方式创建的变量叫做对象的成员变量,可以在外部通过对象引用。而 var age 是一个局部变量 (如果放到外层,是一个全局变量) 这个变量不能被对象在外部引用(如obj.age)否则是undefine,可以将它看成是一个对象的私有成员变量。
    接下来看看看构造函数的执行过程。首先执行var obj = new fun()这一步后,记录现场,然后跳到fun()的构造函数中,执行alert("good")跳出对话框。接下来就是创建成员变量了(如java 中在堆中创建内存空间,创建栈)。 好了fun()执行完了,回到fun1(),执行下去。注意一点,alert(obj.age)是undefine.

    我现在想知道哪些函数可以new(),哪些不可以new().
     1     <script type="text/javascript">  
     2         function fun2(){  
     3             alert("this is the second method show");  
     4           
     5         }  
     6         function fun1(){  
     7             var obj = new fun2();  
     8                     alert(obj);  
     9             alert('if display there no erro through the call');  
    10         }  
    11         window.onload =  fun1;  
    12     </script>  

    这里 function fun2()是一个函数,但是它是构造函数吗? 你可以将它当做一个构造函数。这里会发现fun1()中的alert()可以正常执行。这里可以总结为任何函数都可以new,在js中函数就是对象。但是 试想一下这里new有意义吗? fun2()中没有变量,或者都是var 定义的变量,那么在外部引用不了。new它干嘛呢? ,还不如让fun2()作为全局函数执行好了。 
    这里可以回答本章的要探索的问题了: 任何函数都是构造函数,如果通过new就可以得到一个对象。通过函数不同的上下文调用分下面几种:
    (1). 当在一个函数调用之前有new关键字,则上下文为新建的对象; //任何函数可以new 创建一个对象
    (2). 当一个函数使用call或者apply调用时,给定的第一个参数即为上下文;
    //构造方法中可以写成员方法。然后通过对象来调用
    (3). 否则,如果一个函数作为一个对象的属性(obj.func)或者obj['func'])来调用时,它就把该对象作为上下文来运行;
    //上边new fun2()没意义,直接 fun2()调用,这里在全局上下文运行
    (4)如果与上述几条都不符的话,则函数将在全局上下文中运行。

    不是说构造函数可以写成员方法吗? 那么普通方法也可以算是构造函数,那么我在普通方法中在写方法,方法的嵌套。行不行?
     1     <script type="text/javascript">  
     2         function fun2(){  
     3             var name = "Mr S.G";  
     4             var method = function(){  
     5                 alert("define a function");  
     6             }     
     7             alert(method);  
     8             method();  
     9         }  
    10         function fun1(){  
    11             var obj = new fun2();  
    12             alert(obj);   
    13             alert('if display there no erro through the call');  
    14         }  
    15         window.onload =  fun1;  
    16     </script>  

    额,为什么我称fun2()是一个普通的函数呢?因为它没有this.这个是按照自己的理解来命名的。 这里fun2()定义一个匿名函数,由method引用。method()进行调用。 这里行的通。

    下面我要变一下了。我要让fun2()的method能在fun1()调用,该怎么办?

     1     <script type="text/javascript">  
     2         function fun2(){  
     3             var name = "Mr S.G";  
     4             var method = function(){  
     5                 alert("define a function");  
     6             }     
     7             alert(method);  
     8             this.fun3 = method;  
     9         }  
    10         function fun1(){  
    11             var obj = new fun2();  
    12             obj.fun3();  
    13             alert(obj);   
    14             alert('if display there no erro through the call');  
    15         }  
    16         window.onload =  fun1;  
    17     </script>  

    这里通过 var obj = new fun2()就非常有意义了,我可以通过obj.fun3()进行引用了。
  • 相关阅读:
    Vue(三十三)国际化解决方案
    Vue(三十二)SSR服务端渲染Nuxt.js
    字符串与数组常用的属性和方法
    Vue(三十一)轮播组件
    Vue(三十)公共组件
    Vue(二十九)页面加载过慢问题
    Vue(二十八)el-cascader 动态加载
    Vue(二十七)当前GitHub上排名前十的热门Vue项目(转载)
    React(九)create-react-app创建项目 + 按需加载Ant Design
    React(八)样式及CSS模块化
  • 原文地址:https://www.cnblogs.com/xccjmpc/p/3382525.html
Copyright © 2011-2022 走看看