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>

开心菜鸟系列----函数作用域(javascript入门篇)的更多相关文章

  1. 开心菜鸟系列----变量的解读(javascript入门篇)

                       console.info(         console.info(window['weiwu'])          console.info(window. ...

  2. JavaScript入门篇 编程练习

    编程挑战 一.定义"改变颜色"的函数 提示: obj.style.color obj.style.backgroundColor 二.定义"改变宽高"的函数 提 ...

  3. 慕课网JavaScript入门篇课程笔记

    1.js注释很重要 单行注释,在注释内容前加符号 “//”. <script type="text/javascript"> document.write(" ...

  4. JavaScript入门篇

    记录一下在慕课网学习JavaScript的过程. 以下内容均来自慕课网. 传送:https://www.imooc.com/code/401 为什么学习JavaScript 1. 所有主流浏览器都支持 ...

  5. Dubbo3 源码系列 Dubbo“纠葛”(入门篇)

    日期 更新说明 2022年5月28日 spring xml部分解读 2022年6月3日 spring annotation部分解读 人生不相见, 动如参与商. 今夕复何夕, 共此灯烛光. 少壮能几时, ...

  6. JavaScript入门篇QA总结

    Q1:JS可以放在哪个位置?A1:1.放在<head>标签中,用<script type="text/javascript"></script> ...

  7. JavaScript入门篇 第二天(消息对话框+网页弹出)

    提问(prompt 消息对话框) prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息.弹出消息对话框(包含一个确定按钮.取消按钮与一个文本输入框). 语法: prompt(str1, s ...

  8. JavaScript入门篇 第一天

    使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要成对出现,并把JavaScript代码写在<script>< ...

  9. 二、JavaScript语言--JS基础--JavaScript入门篇

    1.如何插入JS 使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要成对出现,并把JavaScript代码写在<scri ...

随机推荐

  1. (转)Oracle Data Guard配置

    data guard配置的条件1.在主库和从库的所有机器上必须安装同一个版本的Oracle企业版.2.主库必须运行在归档模式下.3.主库和从库的操作系统必须一样(允许版本不同),从库可以使用与主库不同 ...

  2. Android从相册中获取图片以及路径

    首先是相册图片的获取: private final String IMAGE_TYPE = "image/*"; private final int IMAGE_CODE = 0; ...

  3. 深入理解7816(5)-----关于文件DF/EF/MF/FID/AID/SFI

    刚开始接触CPU卡的时候,对于各种文件.应用的定义容易模糊不清,通常不能准确地界定什么是文件?什么是应用?DF和EF的区别真的就像计算机里的目录和文档那样吗?FID.AID.SFI这些概念都在什么时候 ...

  4. authbind start tomcat services as user with less that 1024 ports. linux常规用户使用tomcat的80端口

    Start tomcat services using authbind this will allow user to start ports less than 1024 we do not ne ...

  5. JAVA语言学校的危险性

    Java语言学校的危险性(译文) 作者: 阮一峰 日期: 2008年12月 7日 下面的文章是More Joel on Software一书的第8篇. 我觉得翻译难度很大,整整两个工作日,每天8小时以 ...

  6. 用友U8.70安装说明

    用友U8.70安装说明 U8.70安装说明一.安装前注意事项:1.       在安装U870之前,我们推荐您确保当前计算机操作系统是“干净”的,即计算机在安装过操作系统和更新过必要的系统补丁后没有安 ...

  7. 基于Bootstrap 3.x的免费高级管理控制面板主题:AdminLTE

    AdminLTE 是一个基于Bootstrap 3.x的免费高级管理控制面板主题.AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3框架.高度可定制的,易于使用.适合从小型移动设 ...

  8. poj 2184 Cow Exhibition(dp之01背包变形)

    Description "Fat and docile, big and dumb, they look so stupid, they aren't much fun..." - ...

  9. poj 2376 Cleaning Shifts(贪心)

    Description Farmer John <= N <= ,) cows to <= T <= ,,), the first being shift and the la ...

  10. Oracle—RMAN备份(一)

    一.RMAN备份相关概念 1.RMAN备份中表空间不需要处于backup模式下,它备份数据文件,归档日志文件,控制文件,spfile和备份集片,但不备份联机重做日志文件,临时文件和口令文件. 2.备份 ...