准备公司javascript内部培训记录

女爷i 2022-08-12 00:25 182阅读 0赞

# 前言 #

由于大家的水平参差不齐，所以还是从最基础的内容说起，由浅入深，用一个一个实例来说明。

尽量不去只说概念，让大家很迷惑，会用一个一个的例子，来引出知识点

# 基本形式 #

function hello(){
        alert("hello world");
    }

任何语言最开始学习的时候都是从hello world开始的，javascript也不例外，我们就输出一个hello world。

通过这个例子，我们可以知道什么呢？

第一个是怎么写一个javascript的函数，前面必须要有function关键字，然后是要有函数名称，名称后面的括号中是用来声明形参的，只不过这个例子中没有，下面的中括号是一般函数都会有的，用于标识这是个函数体，其中的语句我们可以自己去查看API，接口文档来学习。这个例子我们对javascript有了初步的了解。

下面来看一个有参数的例子：

function hello(str){
    		alert(str);
    	}

括号中的str就是形参，形式参数。

javascript所在位置

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>Insert title here</title>
    	<script src="./jquery-1.11.1.js"></script>
    	<style type="text/css">
    		#cruser {
    			cursor:pointer;
    		}
    	</style>
    	<script type="text/javascript">
    		$(document).ready(function(){
    			$("#cruser").click(function(){
    				alert();
    			});
    		});
    	</script>
    </head>
    <body>
    	<div id="cruser">create user</div>
    </body>
    </html>

在这里需要docuemnt.ready才行。

3、$()可以是$(function)，即一个函数，它是$(document).ready()的一个速记方式。如常见的形式是这样的：  
$(document).ready(function()\{  
alert("Hello world!");  
\});  
可变形作：  
$(function()\{  
alert("Hello world!");  
\});

抛出问题：如何调用该函数？

hello();

这样就可以输出hello world了。

那么为什么一个函数名称无法运行函数，但是加上了一个括号就可以了呢，这就是括号的作用了。

# 括号的作用 #

1.函数名后面的括号作为形参使用。在这个hello world的例子中已经说过了，在函数名称后面的括号就是作为形参使用。

2.括号作为限定作用，比如if(true)这种语句，里面就限制了它必须是布尔型的值。类似的还有while之类的。

3.作为实参使用。比如在调用hello的时候，在hello()中可以传入名字，这样这里就是作为当做实参来使用。

4.就是作为调用函数和对象方法的调用运算符。

5.强制表达式运算，这个最典型的例子就是eval函数了，在此不讲了。主要还是讲第四个方法。

刚刚是比较基础的知识了，现在进入稍微复杂一些的问题

# 匿名函数 #

JQUERY组件的开头

抛出问题：(function($) \{......\})(jQuery);首先查看一个jquery的组件，发现开头基本都是的形式，如何理解呢？

要理解这个问题，需要弄清楚两个javascript的概念，一个是匿名函数，另一个是闭包。基本匿名函数和闭包是一起使用的。

如果要理解该问题，我们就要知道函数的几种形式。

1.第一种是我们刚刚演示过的例子，就不过多说了

2.第二种是使用Function构造函数，把参数列表和函数体都作为字符串，很不方便。这种方式简单的说一下，因为function都是Function类的实例，也就是对象，

var hello = new Function("alert('hello');");

3.第三种，非常关键的一种形式，函数的表达式形式

var hello = function()\{

alert("hello");

他们都可以生成跟第一种同样的效果，但是它跟第一种有什么区别呢，后面两种都可以成为匿名函数，匿名函数是什么呢，匿名函数就是没有函数名的函数，也成为lambda函数，这种形式和之前的函数声明形式在逻辑上等价，但是他们之间还是有一些区别，函数声明会在代码执行以前被加载到作用域中，而后者则在代码执行到那一行时才会有定义。最重要的区别则是函数声明会给函数指定一个名字，而函数表达式则是创建一个匿名函数，然后将这个匿名函数赋给一个变量。换句话说，上面第二个例子创建了一个带有三个参数的匿名函数，然后把这个匿名函数赋给了变量functionname；但是，并没有给匿名函数指定名字。

这些代码完全有效，但是问题是谁也不可能调用这个函数，因为没有指向这个函数的指针。不过，

因为他们调用的时候可以不使用名称来调用

(function()\{  
  alert(11);  
 \})();

这种方式就造成了没有函数名称，但是也可以调用函数。

理解了匿名函数其实就可以简单的理解jquery组件开头部分的形式了。

(function(str)\{  
  alert(str);  
 \})(11);

根据上面学习的内容，我们就可以理解：(function($) \{......\})(jQuery);这种形式了，这种方式的好处是

下面来说说闭包

# 作用域 #

1.全局作用域

（1）最外层函数和在最外层函数外面定义的变量拥有全局作用域，例如：

var authorName="山边小溪";
    
    function doSomething(){
    
        var blogName="梦想天空";
    
        function innerSay(){
    
            alert(blogName);
    
        }
    
        innerSay();
    
    }
    
    alert(authorName); //山边小溪
    
    alert(blogName); //脚本错误
    
    doSomething(); //梦想天空
    
    innerSay() //脚本错误

（2）所有末定义直接赋值的变量自动声明为拥有全局作用域，例如：

function doSomething(){
    
        var authorName="山边小溪";
    
        blogName="梦想天空";
    
        alert(authorName);
    
    }
    
    doSomething(); //山边小溪
    
    alert(blogName); //梦想天空
    
    alert(authorName); //脚本错误

（3）所有window对象的属性拥有全局作用域

一般情况下，window对象的内置属性都拥有全局作用域，例如window.name、window.location、window.top等等。

2.局部作用域（Local Scope）

和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域称为函数作用域，例如下列代码中的blogName和函数innerSay都只拥有局部作用域。

function doSomething(){
    
        var blogName="梦想天空";
    
        function innerSay(){
    
            alert(blogName);
    
        }
    
        innerSay();
    
    }
    
    alert(blogName); //脚本错误
    
    innerSay(); //脚本错误

# 作用域链    #

在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是\[\[Scope\]\]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。

function add(num1,num2) {
    
        var sum = num1 + num2;
    
        return sum;
    
    }

在函数add创建时，它的作用域链中会填入一个全局对象，该全局对象包含了所有全局变量，如下图所示（注意：图片只例举了全部变量中的一部分）：

![SouthEast][]

函数add的作用域将会在执行时用到。例如执行如下代码：

`var` `total = add(5,10);`

执行此函数时会创建一个称为“运行期上下文(execution context)”的内部对象，运行期上下文定义了函数执行时的环境。每个运行期上下文都有自己的作用域链，用于标识符解析，当运行期上下文被创建时，而它的作用域链初始化为当前运行函数的\[\[Scope\]\]所包含的对象。

这些值按照它们出现在函数中的顺序被复制到运行期上下文的作用域链中。它们共同组成了一个新的对象，叫“活动对象(activation object)”，该对象包含了函数的所有局部变量、命名参数、参数集合以及this，然后此对象会被推入作用域链的前端，当运行期上下文被销毁，活动对象也随之销毁。新的作用域链如下图所示：

![SouthEast 1][]

在函数执行过程中，没遇到一个变量，都会经历一次标识符解析过程以决定从哪里获取和存储数据。该过程从作用域链头部，也就是从活动对象开始搜索，查找同名的标识符，如果找到了就使用这个标识符对应的变量，如果没找到继续搜索作用域链中的下一个对象，如果搜索完所有对象都未找到，则认为该标识符未定义。函数执行过程中，每个标识符都要经历这样的搜索过程。

作用域链和代码优化

从作用域链的结构可以看出，在运行期上下文的作用域链中，标识符所在的位置越深，读写速度就会越慢。如上图所示，因为全局变量总是存在于运行期上下文作用域链的最末端，因此在标识符解析的时候，查找全局变量是最慢的。所以，在编写代码的时候应尽量少使用全局变量，尽可能使用局部变量。一个好的经验法则是：如果一个跨作用域的对象被引用了一次以上，则先把它存储到局部变量里再使用。例如下面的代码：

function changeColor(){
    
        document.getElementById("btnChange").οnclick=function(){
    
            document.getElementById("targetCanvas").style.backgroundColor="red";
    
        };
    
    }

这个函数引用了两次全局变量document，查找该变量必须遍历整个作用域链，直到最后在全局对象中才能找到。这段代码可以重写如下：

function changeColor(){
    
        var doc=document;
    
        doc.getElementById("btnChange").οnclick=function(){
    
            doc.getElementById("targetCanvas").style.backgroundColor="red";
    
        };
    
    }

这段代码比较简单，重写后不会显示出巨大的性能提升，但是如果程序中有大量的全局变量被从反复访问，那么重写后的代码性能会有显著改善。

改变作用域链

函数每次执行时对应的运行期上下文都是独一无二的，所以多次调用同一个函数就会导致创建多个运行期上下文，当函数执行完毕，执行上下文会被销毁。每一个运行期上下文都和一个作用域链关联。一般情况下，在运行期上下文运行的过程中，其作用域链只会被 with 语句和 catch 语句影响。

with语句是对象的快捷应用方式，用来避免书写重复代码。例如：

这里使用width语句来避免多次书写document，看上去更高效，实际上产生了性能问题。

当代码运行到with语句时，运行期上下文的作用域链临时被改变了。一个新的可变对象被创建，它包含了参数指定的对象的所有属性。这个对象将被推入作用域链的头部，这意味着函数的所有局部变量现在处于第二个作用域链对象中，因此访问代价更高了。如下图所示：

![SouthEast 2][]

因此在程序中应避免使用with语句，在这个例子中，只要简单的把document存储在一个局部变量中就可以提升性能。

另外一个会改变作用域链的是try-catch语句中的catch语句。当try代码块中发生错误时，执行过程会跳转到catch语句，然后把异常对象推入一个可变对象并置于作用域的头部。在catch代码块内部，函数的所有局部变量将会被放在第二个作用域链对象中。示例代码：

try{
    
        doSomething();
    
    }catch(ex){
    
        alert(ex.message); //作用域链在此处改变
    
    }

请注意，一旦catch语句执行完毕，作用域链机会返回到之前的状态。try-catch语句在代码调试和异常处理中非常有用，因此不建议完全避免。你可以通过优化代码来减少catch语句对性能的影响。一个很好的模式是将错误委托给一个函数处理，例如：

try{
    
        doSomething();
    
    }catch(ex){
    
        handleError(ex); //委托给处理器方法
    
    }

优化后的代码，handleError方法是catch子句中唯一执行的代码。该函数接收异常对象作为参数，这样你可以更加灵活和统一的处理错误。由于只执行一条语句，且没有局部变量的访问，作用域链的临时改变就不会影响代码性能了。

# 闭包 #

要了解闭包就要先了解javascript的变量作用域，还是举个实际的例子。

变量的作用域只有两种，一种是全局变量，一种是局部变量。

javascript的特殊之处就在于，在函数中可以直接读取全局变量。

var n=999;
    
    　　function f1(){
    　　　　alert(n);
    　　}
    
    　　f1(); // 999

在函数外部是无法读取函数内部的局部变量的

function f1(){
    　　　　var n=999;
    　　}
    
    　　alert(n); // error

这里有一个地方需要注意的是，如果在函数内部声明的变量没有var关键字的话，那么它就变成了全局变量了。所以我们在写js代码的时候，要规范。

function f1(){
    　　　　n=999;
    　　}
    
    　　f1();
    
    　　alert(n); // 999

那么怎么能在外部读取函数内部定义的变量呢？

那么我们改变一下，把这个函数中再增加一个函数

function f1(){
    
    　　　　n=999;
    
    　　　　function f2(){
    　　　　　　alert(n); // 999
    　　　　}
    
    　　}

这时f1内部的所有变量对f2都是可见的，但是反过来就不可以了。这就是javascript特有的“链式作用域”了。

看他们像不像一个链条，就像一排人在排队一样，他们只能看到前面的所有人，但是看不到后面的人。  
那么我们把f2作为函数的返回值不就可以了吗

function f1(){
    
    　　　　n=999;
    
    　　　　function f2(){
    　　　　　　alert(n);
    　　　　}
    
    　　　　return f2;
    
    　　}
    
    　　var result=f1();
    
    　　result(); // 999

那么说了这么半天，我们要讲的闭包在哪里呢，其实这个f2就是一个闭包。

闭包就是能读取其他函数内部变量的函数。也可以把闭包简单的理解为定义在一个函数内部的函数。

在本质上来说，闭包是连接函数内部和外部的桥梁。

闭包有两个作用，一种是可以访问函数内部的私有变量，另一个作用就是使变量一直保持在内存中。

javascript的gc机制，也就是garbage collection是怎么回事呢，如果没有人调用一个变量，那么回收机制就会把这个变量或者对象回收，但是现在全局变量一直在调用着f2，所以f1也不能回收，所以就一直保存在内存中了。

但是这也造成了一个问题，那么就是性能问题，还有可能造成内存泄露，所以不使用的变量要删除。

还有一点，因为闭包会修改函数的内部局部变量，属性，所以要谨慎使用。

现在再回来看组件，它返回了一个function，这个function也得到了执行，那么说明这个对象里面的局部变量全部得到了保存。

# 对象字面量 #

在编程语言中，字面量是一种表示值的记法。例如“Hello world”，表示一个字符串字面量

对象字面量是一个名值对的列表

创建对象字面量的方法：

![SouthEast 3][]

还可以

![SouthEast 4][]

不仅字符串可以作为字面量，布尔，对象，数组等都可以作为字面量，连函数都可以，他们用逗号分隔，看下面的例子：

![SouthEast 5][]

members后面是空数组

this

[http://www.ibm.com/developerworks/cn/web/1207\_wangqf\_jsthis/][http_www.ibm.com_developerworks_cn_web_1207_wangqf_jsthis]

[http://www.ruanyifeng.com/blog/2010/04/using\_this\_keyword\_in\_javascript.html][http_www.ruanyifeng.com_blog_2010_04_using_this_keyword_in_javascript.html]

[http://www.jb51.net/article/16863.htm][http_www.jb51.net_article_16863.htm]

强制表达式运算。

扩展其他也可以执行函数的方法，并详解call，apply

引出prototype

创建对象的方法，不同。和json的区别。

[Javascript静态变量与实例变量][Javascript]

[http://laketea.iteye.com/blog/1941906][Javascript]

[SouthEast]: /images/20220810/67e8c47b54374c8983820249e2bd0847.png
[SouthEast 1]: /images/20220810/a1502441ef7d4e9ab1292fde51c383f7.png
[SouthEast 2]: /images/20220810/a41087e9f00f4e73a68d18cec413187f.png
[SouthEast 3]: /images/20220810/4b3356f71b3a40d6893ede27afc7db67.png
[SouthEast 4]: /images/20220810/511102bb7e914bb6ac52f6475741d585.png
[SouthEast 5]: /images/20220810/e52ebf47050b4794a82926ff13725057.png
[http_www.ibm.com_developerworks_cn_web_1207_wangqf_jsthis]: http://www.ibm.com/developerworks/cn/web/1207_wangqf_jsthis/
[http_www.ruanyifeng.com_blog_2010_04_using_this_keyword_in_javascript.html]: http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html
[http_www.jb51.net_article_16863.htm]: http://www.jb51.net/article/16863.htm
[Javascript]: http://laketea.iteye.com/blog/1941906