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. Debian/Ubuntu 安装bcm43142无线网卡驱动

    Drivers for Broadcom BCM43142 wireless card of Ubuntu/Debian 64-bit Linux 1.Check the wireless card ...

  2. Linux方面收藏的一点儿资料

    初来乍到,也算是第一次写技术类相关的博客,就分享几篇收藏的Linux相关的资料吧,希望可以给需要的人一点帮助. 1.<高级Bash脚本编程指南>:该网站详细讲解了Bash Shell编程的 ...

  3. (转) 如何命令查找linux系统版本!

    一.查看内核版本命令: 1) [root@SOR_SYS ~]# cat /proc/versionLinux version 2.6.18-238.el5 (mockbuild@x86-012.bu ...

  4. Oracle查询死锁&杀死会话

    select object_name,machine,s.sid,s.serial#  from v$locked_object l,dba_objects o ,v$session s where ...

  5. 黑马程序员_Java_String

    String类 一.概述 字符串是一个特殊的对象. 字符串一旦初始化就不可以被改变. String s1 = "abc";//s1是一个类类型变量,"abc"是 ...

  6. python高级编程:有用的设计模式1

    # -*- coding: utf-8 -*-__author__ = 'Administrator'#python高级编程:有用的设计模式#设计械是可复用的,某种程序上它对软件设计中觉问题提供的语言 ...

  7. hadoop集群监控工具ambari安装

    Apache Ambari是对Hadoop进行监控.管理和生命周期管理的基于网页的开源项目.它也是一个为Hortonworks数据平台选择管理组建的项目.Ambari支持管理的服务有: Apache ...

  8. DotNet程序汉化过程--SnippetCompiler奇葩的字符串

    开篇前言 汉化的过程总会遇到各种各样的问题,让人抓狂,这一篇我就来讲解一下一个特殊的单词的汉化以及我的“艰辛历程”. 起因介绍 在SnippetCompiler有这么一个奇葩的字符串“查找>&g ...

  9. eclipse项目转android studio详解

    第一步:项目导入 向AS中导入项目的方法有两种(其实是一种). 方法一:是在eclipse中先导出为gradle(如图1),然后打开AS,找到项目中的gradle文件,直接导入. 方法二:直接在AS中 ...

  10. 中控考勤机-C#操作

    引用:Interop.zkemkeeper.dll 实例化: public zkemkeeper.CZKEM axCZKEM1 = new zkemkeeper.CZKEM(); 首先从数据库中获取考 ...