js修炼——函数

很多技术从业者对技术水平的评价是代码的实现能力，形而上一点，我认为技术工作和足球运动（本人巴萨球迷，最爱内马尔）是一样的，最重要的是思想意识，古往今来，各行各业的大师讲究的是内功深厚，说的有些玄学的味了，总之，我薄如白纸，我需要修炼。

1.声明还是表达式

我们经常会看到函数定义的两种情况

function clc(num){//函数声明，定义未执行
return num++;
}
//…………………………………………………………………………………………………………………………………………………………
var clc=function(num){//函数表达式，实际上执行了对变量clc的赋值操作
return num++
};//分号，这里是最容易忽略的地方，但是也是最直观体现两者区别的地方

虽然这两种形式颇为相似，但是它们有一个非常重要的区别。函数声明会被提升至上下文顶部，这意味着你可以先使用函数后声明它们，而函数表达式不可以（必须先定义后执行），我的另一篇博 客详细讨论过这一点点击打开链接

2.函数就是值

函数是js的重点，我们可以像使用对象一样使用函数。也可以将它们赋值给变量，在对象中添加它们，将它们当成参数传递给别的函数，或从别的函数中返回。基本上只要是可以使用其他引用值的地方，你就可以使用函数。

function eat(){
console.log("zhuzhouzi");
}
eat();//zhuzhouzi
var eat1=eat;
eat1();//zhuzhouzi

现在eat和eat1指向同一个函数，两者都可以被执行，并具有相同的结果。为了更好理解，我们来看下面用Function构造函数来实现相同功能的代码

var eat=new Function("console.log(\"zhuzhouzi\");");
eat();//zhuzhouzi
var eat1=eat;
eat1();//zhuzhouzi
console.log(eat===eat1);//true

Function构造函数更加清楚地表明eat可以像其他对象一样被传来传去。只要记住函数就是对象，很多行为就变得容易理解了。

3.参数

js函数的另一个独特之处在于你可以给函数传递任意数量的参数却不造成错误。那是因为函数参数实际上被保存在一个被称为arguments的类似数组的对象中。如同一个普通的JavaScript数组，arguments可以自由增长来包含任意个数的值，这些值可以通过数字索引来引用。arguments的length属性会告诉你目前有多少个值。

arguments对象自动存储于函数中。也就是说，函数的命名参数不过是为了方便，并不是真的限制了该函数可接受参数的个数

注意，arguments对象不是一个数组的实例，其拥有的方法与数组不同。

来看下面代码

function sum() {
var result = 0,
i = 0,
len = arguments.length;
while(i < len) {
result += arguments[i];
i++;
}
return result;
}
console.log(sum(1,2));//3
console.log(sum(1,2,3));//6
console.log(sum(1,2,3,4));//10
console.log(sum(1,2,3,4,5));//15

这段代码巧妙的运用了arguments来实现再不设置命名参数的情况下使用接受到的参数，在某些情况下这种方式有妙用

4.对象方法

前面提到我们可以在任何时候给对象添加或删除属性。如果属性值是函数，则该属性被称为方法。你可以像添加属性那样给对象添加方法。说到对象方法，在使用过程中与之紧密联系的就是this对象了

4.1 this对象

关于this对象的介绍以及绑定原则，参见我的另一篇博客点击打开链接

4.2 改变this

在JavaScript中，使用和操作函数中的this的能力是良好的面向对象编程的关键。函数会在各种不同上下文中被使用，它们必须到哪都能正常工作。一般this会被自动设置，但是你可以改变它的值来完成不同的目标。有3中函数方法允许你改变this的值。

4.2.1 call()方法

function output(label){
console.log(label+" is "+this.name);
}
var cat={
name:'cat'
};
var dog={
name:'dog'
};
var name="animal";
/*
* this绑定到全局
* 输出 global is animal
*/
output.call(this,'global');
/*
* this绑定到cat对象
* 输出 cat is cat
*/
output.call(cat,'cat');
/*
* this绑定到dog对象
* 输出 dog is dog
*/
output.call(dog,'dog');

4.2.2 apply()方法
apply方法和call方法如出一辙，除了apply第二个参数是数组形式外，想详细了解的自己百度，相关资料很多

4.2.3 bind()方法

改变this的第三个函数方法是bind()。ES6中新加的这个方法和之前那两个颇有不同。按惯例，bind()的第一个参数是要传给新函数的this的值，看下面代码

function output(label){
console.log(label+" is "+this.name);
}
var cat={
name:'cat'
};
var dog={
name:'dog'
};
var name="animal";
var outputCat=output.bind(cat,"cat");
outputCat();//cat is cat
var outputDog=output.bind(dog,"dog");
outputDog();//dog is dog

5.总结

JavaScript函数的独特之处在于他们同时也是对象，也就是它们也可以被访问、复制和覆盖，就像其他对象一样。JavaScript中的函数和其他对象的最大区别在于它们有一个特殊的内部属性[[Call]]，包含了该函数的执行指令，typeof操作符会在对象内查找这个内部属性，如果找到，它返回“function”。

函数的字面形式有两种：声明和表达式。函数声明是function关键字右边跟着函数名。函数声明会被提升至上下文的顶部。函数表达式可被用于任何可以使用值得地方，例如赋值语句、函数参数或另一个函数的返回值。

函数是对象，所以存在一个Function构造函数。你可以用Function构造函数创建新的函数，不过没有人会建议你这么做，因为它会使你的代码难以理解和调试。

为了理解JavaScript的面向对象编程，我们需要好好理解它的函数。因为JavaScript没有类的概念，能够帮我们实现聚合和继承的就只有函数和其他对象了。