开心菜鸟系列----函数作用域(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>

转载于:https://www.cnblogs.com/kaixincainiao/p/3415169.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值