zoukankan      html  css  js  c++  java
  • 开心菜鸟系列----函数作用域(javascript入门篇)

      1 <!DOCTYPE html>
      2 <html>
      3 <script src="./jquery-1.7.2.js"></script>
      4 <head>
      5     <title></title>
      6 </head>
      7 <body>
      8 <input type="text" name="type" id="type" value="songxuxua"/>
      9 <span id="hah"></span>
     10 <a href="javascript:void(0);" >ssssssssssss</a>
     11 </body>
     12 <script>
     13     /**
     14      * @type 开心菜鸟系列----作用域(javascript入门篇)
     15      * @introduce {string}
     16      * @author {string} 开心菜鸟
     17      */
     18 
     19     /**
     20      * 书接上文啊,上一节我们谈了全局变量,
     21      * 但是我看了,看的人很少啊,可能太简单了,没办法水平就这么高,毕竟不是专业做js的.
     22      * 本来吧,想这周内接着写的,但是由于我离职了,要做交接工作啊,虽然在公司里是酱油级别的人物,
     23      * 但是我这个人,做事比较认真,bug能不改就不改,改了,就要改好,即使最后时刻,下午写了三篇doc文档,
     24      * 结束了我8个月的phper过渡期.
     25      * 闲话少说了,在这里说这些,其实就是想少开个贴子,呵呵
     26      */
     27     //还要说一下全局变量,有一点拉下了,最近又碰到了,分享给大家,
     28     //猜猜我是谁,
     29     //错误用法@2,我们在ie8以下,看看屌丝的代码,2013/11.8日 晚发现的这个,由于我平时保持规范,遇不到.
     30     console.info(type);
     31     console.info(hah);
     32     //这个东西真有意思啊,第一次遇到,也是在写博客的时候,自己测试遇到的,
     33     //他把dom的id全都生成全局变量了,但是在ie7以下啊,他只是一个object,并不是一个元素对象,试试喽
     34     function test()
     35     {
     36         //错误用法@1
     37         var name = abc = 'songxiuxuan';
     38         data = 'songxiuxun';
     39     }
     40     test();  //注释和不注释啊
     41     //大家猜猜这是什么啊.
     42     console.info(abc) //这是什么啊土豪
     43     //解释一下,ie对一些js的语法要求比较严格,由于我不是专业写js的,所以就不列举了,只是列举出我们实例碰到的.
     44     //age是一个全局变量,但是ie认为你age并没有声明啊,我赋于一个没有声明的变量,他就会报错.
     45     //这里有一个知识点,上一章并没有提到的,当声明变量的时候,
     46     // 如果没有用var去声明的话,那么我们就认为他是window.变量的一个属性,而ie8以下对声明变量解析和其它浏览器器不同的.
     47     // 这样会污染全局变量的.
     48 
     49     //弥补了全局变量写的不足,下面我们开始,今天的主题,作用域,在js中是虾米鸟东东.
     50     //我想说的是,我写的东西没有理论,只有例子,因为理论没用啊.
     51     //其实作用域,这个东西在js中非常重要,只是你平时不注意而已
     52     //在产生作用域之前,我们先理一下,先要进入上下文,然后执行上下文,之后就会产生了作用域,至于这个是全局的还是局部的,
     53     //要看具体的代码喽,其实就是caller调用了calle,把控制权交给了calle,caller等待,在交给calle的时候就产生了作用域,叫函数作用域.
     54     //今天我们主要讲函数作用域,可能会带着点闭包,
     55     //首先作用域是静态的?
     56     function statciScope()
     57     {
     58         //也声明一个局部变量
     59         var weiwu = 'hahahh';
     60         console.info(weiwu);
     61     }
     62     function callerStatic()
     63     {
     64         var weiwu = 'songxiuxuan'//声明一个局部变量
     65         statciScope();
     66     }
     67     callerStatic(); //hahaha
     68     //继续,
     69     //传说this是变动的,当然,今天我们不谈.
     70     function thisSocpe()
     71     {
     72         this.socpe = 'this is this';
     73         console.info(this.socpe);
     74     }
     75     function callerThis()
     76     {
     77         this.socpe = 'caller'
     78         new thisSocpe();
     79     }
     80     //ok连传说中的this都没有指向调用他的,我们证明了作用域是静态的.
     81     new (callerThis)
     82     //深入作用域
     83     function goToScope(a,b,c)
     84     {
     85         var parentVar = 'this is parent';
     86         return function () {
     87             console.info(a,b,c,parentVar);  //看一看输出了什么啊
     88         }
     89     }
     90     //证明了,作用域是从caller调用了calle进入上下文到执行函数上下文,到底发生了什么啊
     91     //当进行上下文时,就会函数的创建了一个scope的属性,也就是函数创建阶段
     92     //当caller去调用calle,就执行了这个函数,也就是执行这个上下文,而函数的形参是第一个存入到scope作用域中,
     93     //然后会把函数内的局部变量也放入到作用域中,
     94     //当这个函数发生闭包,这个作用域在函数内部就相当于全局的,也就是说他也有一个属性,指向这个函数,而里面的函数又有一层作用域,
     95     //但是由于闭包函数的上一层作用域对他来说是静止的.会出现下一层改变上一层作用域的属性,会一直保存
     96     //其实大家可能想不明白,我就说直接一点吧,window是什么啊,是在浏览器下javascript的里大的一层作用域 ,
     97     //而nodejs里最大的变量作用是global,这个只是js底层给我们封装好的一个变量,我们是在一个全局的空间里写东西,
     98     //那么就会产生层级之前关系,层级关系的链接就是作用域相连接,这样,每新产生一个作用域,我们完全可以把它想像成新开辟一个window的全局对象
     99     //只不过这个全局对象,是指对于他的子层来讲.
    100     //因为有了这个作用域,我们就可以在子层调用上层的变量.我们下次进行调用子层的时候,上次修改了上层的作用域属性,还存在,
    101     //以前我一直不理解,但是js就是这样,只要一个页面不刷新,一个变量增加会保存的,这个和函数作用域是一样的.
    102 
    103     goToScope(20,30,40)();
    104 
    105     //还有一点需要补充,就是我们要调用一个变量时,我们会从作用,向上去查找,直到找到这个变量,
    106     //如果在函数作用域找不到这个变更,我们就会在原型链上去寻找
    107 
    108     function Abc()
    109     {
    110            // this.name = 'songxiuxuan';//打开我
    111         this.getName = function () {
    112         }
    113     }
    114     //Abc.prototype.name = 'wo jiao kaixin feida de kaixin';//打开我
    115     Abc.prototype.setName = function () {
    116         console.info('aaa');
    117     }
    118     function Child()
    119     {
    120 //        this.name = 'heiheihei';  //打开我
    121         this.getHeihei = function () {
    122                 console.info(this.name);
    123         }
    124     }
    125     Child.prototype.heihei = function () {
    126         return function () {
    127             console.info(this.name)
    128         }
    129     }
    130     Child.prototype = new Abc();
    131     c =  new Child();
    132     //把name的挨个打个,试试一下,呵呵 结束了.
    133     c.getHeihei();
    134 
    135 
    136 
    137 
    138 
    139 
    140 
    141 
    142 
    143 
    144 
    145 
    146 
    147 
    148 </script>
    149 </html>
  • 相关阅读:
    Python基础——内置函数
    HHKB Mac快捷键使用
    解决EditText在ListView Item中,第一次点击无法获取焦点问题
    Android 设置Spinner默认显示文字
    IOS-静态Cell
    android-创建流式布局,并修改最后一行的最后一个view
    最简单的设置ExitText只能输入数字和字母的方法
    Android studio私人常用快捷键(持续更新)
    IOS-NSNotification(通知)
    Android书单(持续更新)
  • 原文地址:https://www.cnblogs.com/kaixincainiao/p/3415169.html
Copyright © 2011-2022 走看看