标签：函数
17javascript看到的一篇关于JS函数的介绍，下面用自己的话来介绍一下JS函数是什么。在W3C中函数的定义是这么说的：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
诚然，从这种抽象的定义中我们得不到什么有价值的东西。下面，举例来列举出函数的几种定义方式：
复制代码
function add(num1, num2) {
return num1 + num2;
}
var add = function (num1, num2) {
return num1 + num2;
}//这是比较常见的两种
//下面两种比较少见
var add=new Function("num1","num2","return num1+num2");
var add=Function("num1","num2","return num1+num2");
复制代码
上面四种写法均是创建一个函数正确的语法。但是，常见的一般是前两种。因为相比于前两种，后两种存在着一些缺陷。
1. 后两种比较繁琐 不直观。这点从上面的例子中可以看出。
2. 后两种存在着一些致命的缺陷。这种函数的创建方式，不能维持一个属于函数的作用域链，在任何时候下(new)Function的创建的函数，都相当于在全局作用域下创建的函 数。以下例子就可以证明这一点。
复制代码
var x = 1;
var add = (function () {
var x = 100;
return function (num) {
return num + x;
}
}());
console.log(add(0));//100
复制代码
var x = 1;
var add = (function () {
var x = 100;
return new Function(‘num1‘, ‘return num1+x‘);
}());
console.log(add(0));//1
也就是说，后两种方式创建的函数，不能组成完整的函数作用域链（后面会讲到），也就不可能有所谓的闭包之说。
3. 后两种的运行效率太低。
首先，JS对字符串的解析算不上效率很高，而（new）Function均存在着大量的字符串。
其次，JS的解释器，对于用function(){}，这种形式的函数，都有一定形式的优化。比如下面这样
复制代码
var array = [
];
for (var i = 0; i < 1000; i++) {
array[i] = function () {
return ‘undefined‘;
}
}//第一种
var array = [
];
for (var i = 0; i < 1000; i++) {
array[i] = new Function("return undefined");
}//第二种，
复制代码
JavaScript教程 (http://www.17javascript.com/) 这两种方式在运行效率上存在着很大的差距。对于，第一种只需要执行一次function(){}，其他的999次都是赋值，而后一种要执行一千遍的函数创建并赋值。
正是因为三面的三种原因，才使得function(){}这种方式比较流行。
另外，你可能也见过下面的这种，但是这种形式只是一种变体。
var add = new function () {
return 1 + 2;
};
console.log(typeof add);//object
var result = add.constructor();/*调用时必须采用这种调用方式*/
console.log(result);//3
这种形式，new function（）创建的实质上是利用一个匿名函数创建一个对象。这个对象的一个constructor属性正好指向其构造函数，也就是这个匿名函数。所以实际上这 是一种丑陋的写法。
到这里，我们也就只是叙述了一下，定义函数的几种方式。通过比较，我们知道前两种比较实用，但是即使这样，第一种和第二中的定义方式也存在着巨大的不同。下一小节，我们接着讲这两种方式存在的差异。
2.函数声明和函数表达式
函数声明:
function 函数名称 (参数：可选){ 函数体 }
函数表达式：
function 函数名称（可选）(参数：可选){ 函数体 }
所以，可以看出，如果不声明函数名称，它肯定是表达式，可如果声明了函数名称的话，如何判断是函数声明还是函数表达式呢？ECMAScript是通 过上下文来区分的，如果function foo(){}是作为赋值表达式的一部分的话，那它就是一个函数表达式，如果function foo(){}被包含在一个函数体内，或者位于程序的最顶部的话，那它就是一个函数声明。
所以，我们可以看出，在第一部分的前两种创建函数的方式分别为函数声明和函数表达式。
function add(num1, num2) {
return num1 + num2;
}//函数声明
var add = function (num1, num2) {
return num1 + num2;
}//函数表达式
另外，还有一些比较容易和函数声明混淆的函数表达式。
复制代码
(function add(num1, num2) {
return num1 + num2;
});//函数表达式
var add = function foo(num1, num2) {
return num1 + num2;
}//函数表达式
复制代码
()在JS语言规则中是一个分组操作符，根据W3C标准分组操作符里面的会默认为是表达式。
而下面一种则比较有意思，赋值表达式的左边是一个函数，关于这点不同的解析器对此的处理不同，有的认为这是函数声明，有的认为这是一个函数表达式，不同的解析器对此的处理各不相同。
但是目前在主流浏览器上默认的是函数表达式，而且foo作为函数标识符，只在其函数内部能被识别。看下面的例题：
复制代码
var add=function foo(n){
if(n==1)return 1;
else return n+foo(n-1);
};
console.log(add(3));//6
console.log(foo(3));//error, foo is not defined
复制代码
那么函数声明和函数表达式有什么区别呢？
回答这些问题，就涉及到函数被调用时的情况了。
3.函数的执行环境和作用域
我们都知道，函数运行时是运行在新开辟的栈里的。那么函数在运行时,代码的执行环境是什么样的呢？
函数被调用时发生了什么？
function add(num1, num2) {
var num3 = 300;
return num1 + num2 + num3;
}
var result = add(100, 200);
console.log(result);
这一段代码在执行到第5行的时候会调用我们声明的add函数，add函数在被调用时会做以下处理：
1.add函数形参的声明并赋值。
2.add函数内函数的声明(若函数变量与函数形参的变量同名，则函数声明会覆盖形参声明)。
3.add函数内变量的声明。----->函数按顺序执行。
下面的几个例子可以证明：
例题一：函数内的函数的声明会覆盖函数形参的声明。
function add(num1, num2) {
console.log(typeof num1);//function
function num1() {}
}
var result = add(100, 200);
例题二：函数内变量的声明不会覆盖形参的声明和函数内函数的声明
function add(num1, num2) {
console.log(typeof num1);//number
var num1="23";
}
var result = add(100, 200);
补充：
所谓变量的声明都是类似 var x, y; 这种情况。而var x=1;
其实是 var x ; x=1;分两步执行。
变量声明总是这样： var x；
函数的执行环境：
由上述我们知道，函数执行的时候开辟一个新的栈，而栈内保存着函数内部声明的变量，变量的值在函数代码运行之前按照刚才所讨论的三步赋值。也就是说，当一个函数被调用时，在代码运行之前其栈中已经存在着函数运行时所需的所有的变量。这些变量加一起则构成函数的执行环境。
如果解释器真的把函数内部所有的声明都放在栈中的话，那么解释器在开辟栈的时候就应该可以确定所开辟栈空间的大小。但是如果栈空间大小确定以后，有以下几个问题就需要解决了：
变量的类型在运行时被改变。此时栈空间的大小需要不断调整。
每个函数在声明的时候会维持一个属于自己的作用域链，如果作用域链上的变量类型的话，需要对整个作用域链上的栈调整。
需要针对这种结构重写垃圾回收机制（标记--清理不适用了）。
改进：引进函数变量
当函数被调用的时候，并非将变量的声明保存在栈中，而是保存在一个对象中。而将这个对象的引用保存在栈中。而这个对象存储在堆中，具体的工作原理如下：
function add(num1, num2) {
var num3 = 300;
return num1 + num2 + num3;
}
var result = add(100, 200);
当函数被调用时(未执行之前)，解释器创建一个addReference对象：
addReference={
num1:100；
num2:200;
num3:undefined;
};
addReference对象的引用被压入栈中，而对象本身则存在于堆中。
补充：
函数在运行时，栈中还保存着返回值以及this指针。在函数执行完毕退出时，会清空栈，若存在对此函数变量引用的函数，则将此函数变量加入引用函数的作用域链上，否则过一段时间，若垃圾回收机制为未发现有此函数变量的引用，则将该函数变量删除。
改进后：
栈空间大小确定： 函数运行之前，栈所需要的空间已经能被确定。只存在三个元素： this指针，函数变量的引用，返回值。（返回值也保存在一个变量中，由解释器管理）
函数在运行时，若创建一个新的函数。则只需要将函数变量对象加入新函数的作用域链上即可。
只需要根据此函数变量的引用计数是否为0就可以管理内存，而不需要重写垃圾回收机制。
4.函数的作用域链
在第三部分我们讨论出，函数的作用域上保存的都是函数变量。下面我们通过这个例子来说明这种现象。
复制代码
1 var fun;
2 (function fun1() {
3 var x = 1;
4 (function fun2() {
5 var y = 2;
6 fun = function () {
7 return x + y;
8 }
9 }());
10 }())
11
12 var result=fun();
13 console.log(result)//3
复制代码
根据上例，我们来一步步分析函数执行时都发生了什么？
1. 在全局作用域中的变量对象。
globalReference = {
.....//以前存在的对象 比如 Object，Math，Date之类
fun: undefined;
result: undefined;
}
2.当函数运行至第二行时,fun1的变量对象
复制代码
fun1Reference = {
x: undefined;
}
//执行至第4行的时候，
fun1Reference = {
x: 1;
}
//fun1的作用域链： globalReference
复制代码
3.当函数运行至第四行时,fun2的变量对象
复制代码
fun2Reference = {
y: undefined;
}
//执行至第5行的时候，
fun2Reference = {
y: 2;
}
//fun1的作用域链： globalReference--->fun1Reference
复制代码
4.当函数运行至第6行时,fun的作用域链
//fun的作用域链： globalReference--->fun1Reference--->fun2Reference
5.fun2执行完毕退栈--->fun1执行完毕退栈。
6.当函数运行至第12行时,fun被调用。
复制代码
globalReference = {
| .......
| fun: undefined;
| result: undefined;
| }
fun1Reference ={x:1;}
|
|
|
|
fun2Reference={y:2}
|
|
|
|
funReference:{};
复制代码
7.fun执行完毕，result=6;13行，输出结果。
上述，我们已经模拟一遍函数的执行时的过程。下面我们来介绍一下全局作用域对象。
首先，先明确一点，全局作用域也是一个变量对象。
复制代码
globalReference = {
Object:内置的对象构造函数对象;
Array:内置的数组构造函数对象;
Function:内置的函数构造函数对象;
Math:内置的Math对象;
Date：内置的日期构造函数对象;
.......;
window:globalReference
}
复制代码
window对象保持这对全局对象的引用。
补充：在控制台下执行的代码都是在eval()函数中执行的，这个函数能够使用并且能改变当前函数所在的执行环境。
5.变量和属性的区别
1、变量：可以被改变的量。只有前面加var(非函数)的才能称为变量。函数变量有自己独特的变量声明方式。
var x = 1,y = 2;
var z = 3;
//类似上面这种才是变量
xxx=1;//这样的不是变量，下面会讲到这种形式
2、属性：一个对象内的变量。
var object={
x:1,
y:2,
z:3
}; //x,y,z均为属性。
上面的两种都很容易区分，但是下面这种又该如何解释呢？
rest=1;//rest是属性还是变量？
这句话一般是在函数执行时候，经常性遇到,这样写有很大的弊端。
1.查找较慢。rest前面没有var，则肯定不是变量。那么，在执行的时候就会沿作用域链一直向上查找，直至到全局作用域中的变量对象。此时未找到，则根据规则将其作为全局作用域变量对象的属性。
2.改变了全局作用域变量对象。一般来说，我们在执行代码的时候应该尽量避免改变全局作用域对象。
也就是说，如果我们使用一个前面没有加var的“变量”，则在执行期间，会将该“变量”当做全局作用域变量的属性。
3、变量和属性的区别：
属性(配置为可删除的情况下)可以通过其所在的对象被删除。
比如：
var object={
x:1
}
delete object.x; //true
y=2;
delete window.y(或者delete y);//true
变量在声明的时候会被作为函数变量的属性。原则上也是可以被删除，但是因为我们不能得到函数变量这个对象（window是一个特例），所以在实际操作中，也就导致不可能被删除。
变量一般是针对声明时期，而属性一般针对执行时期。两者在本质上，意义就不一样。
查找普通对象的属性，如果未找到不会抛出错误。但是，查找变量对象的属性，如果未找到则会抛出错误。
var object = {
};
console.log(object.z);//undefined,-----在普通变量中查找
console.log(window.v);//undefined -----在普通变量中查找
console.log(z);//error; -----在作用域链上的变量对象中查找，未找到则报错。
标签：函数
原文地址：http://ipmsg.blog.51cto.com/1051763/1617152
