在js中，函数本身属于对象的一种，因此可以定义、赋值，作为对象的属性或者成为其他函数的参数。函数名只是函数这个对象类的引用。
函数定义
3种函数定义的方式
1.函数声明语句
使用function关键字，后跟一组参数以及函数体
function funcname(args1,args2){
statement;
}
2.函数表达式
以表达式方式定义的函数，函数的名称是可选的
var funcname=function(args1,args2){
statement;
}
var funcname=function funcname(args1,args2){
statement;
}
匿名函数也叫拉姆达函数，是function关键字后面没有标识符的函数。
通常而言，以表达式定义函数时都不需要名称，这会让定义它们的代码更加紧凑。函数表达式特别适合用来定义那些只会使用一次的函数
var ten=(function(x){return x*x}(10));//定义同时进行调用
一个函数定义表达式包含名称，函数的局部作用域将会包含一个绑定到函数对象的名称。实际上，函数的名称将成为函数内部的一个局部变量。
var test=function fn(){
return fn;
}
console.log(test);//fn(){return fn;}
console.log(test());//fn(){return fn;}
console.log(test()());//fn(){return fn;}
对于有具体名字的函数表达式来说，函数名称相当于函数对象的形参，自能在函数内部使用；而变量名称相当于函数对象的实参，在函数内部和函数外部都可以使用。
var test=function fn(){
return fn===test;
}
console.log(test());//true
console.log(test===fn);//fn is not defined
函数定义了一个非标准的name属性，通过这个属性可以访问到给定函数指定的名字，这个属性的值永远等于跟在function关键字后面的标识符，匿名函数的name属性为空。
//ie-11浏览器无效，输出undefined
//chrome在处理匿名函数时有问题，会显示函数表达式的名字
function fn(){}
console.log(fn.name);//fn
var fn=function(){};//''在chrome浏览器会显示fn
var fn=function abc(){}
console.log(fn.name);//abc
3.function构造函数
Function构造函数接收任意数量的参数，但是最后一个参数始终都被看成是函数体，而前面的参数则枚举出了新函数的参数
var funcname=new Function(args1,args2,'statement')
注意：Function构造函数无法指定函数名称，它创建的是一个匿名函数。
从技术上讲，这是一个函数表达式。但是不推荐使用这种方式声明函数，这种语法会导致解析两次代码。第一次是解析常规js代码，第二次解析传入构造函数中的字符串，影响性能。
var sum=new Function('num1','num2','return num1+num2')
//等价于
var sum=function(num1,num2){
return num1+num2;
}
Function()构造函数创建的函数，其函数体的编译总是会在全局作用域中执行。于是，Function()构造函数类似于在全局作用域中执行的eval()
var test=0;
functoin fn(){
var test=1;
return new Function('return test')
}
console.log(fn()());//0
并不是所有的函数都可以成为构造函数
var a=new Math.min();//报错
函数声明顺序
函数声明，相对于变量会优先加载。所以不用担心函数声明在调用前还是调用后。
调用函数时会在本机活动对象中查询，即当前js文件中查询，如果没有才会向上查询
，所以要是在两个js文件中定义相同的函数名，这两个js文件内部调用各自的函数，其他js文件调用最后声明的函数。
重复
变量的重复声明是无用的，不会覆盖同一作用域声明的变量，但是函数的重复声明会覆盖前面的同名函数或同名变量。
//变量的重复声明无用
var a=1;
var a;
console.log(a);//1
//覆盖同名变量
var a;
function a(){
console.log(1)
}
a();//1
//覆盖同名函数
a();//2
function a(){
console.log(a)
}
function a(){
console.log(2)
}
删除
函数声明语句创建的变量无法删除，这一点和变量声明一样。
function foo(){
console.log(1)
}
delete foo;
console.log(foo());//1
函数返回值
所有函数都有返回值，没有return语句时，默认返回内容是undefined，和其他面向对象的编程语言一样，return语句不会阻止finally子句的执行。
function test(){
try{
return 2;
}catch(error){
return 1;
}finally{
return 0;
}
}
test();//0
如果函数调用时在前面加上了new前缀，且返回值不是一个对象，则返回this(该新对象)
function fn(){
this.a=2;
return 1;
}
var test=new fn();
console.log(test);//{a:2}
console.log(test.constructor);//fn(){this.a=2;return 1;}
如果返回值是一个对象，则返回该对象。
function fn(){
this.a=2;
return {a:1}
}
var test=new fn();
console.log(test);//{a:1}
console.log(test.constructor);//Object
函数调用
js一共有四种调用模式：函数调用模式，方法调用模式，构造器调用模式和间接调用模式。
1.函数调用模式
当一个函数并非一个对象的属性时，那么他就是被当作一个函数来调用的。对于普通的函数调用来说，函数的返回值就是调用表达式的值。
function add(x,y){
return x+y;
}
var sum=add(3,4)
console.log(sum);//7
使用函数调用模式调用函数时。非严格模式下，this被绑定到全局对象；在严格模式下，this是undefined
function add(x,y){
console.log(this);//window
}
function add(x,y){
'use strict';
console.log(this);//undefined
}
因此，this可以用来判断当前是否是严格模式。
var strict=(functioon(){return !this;}())
重写：因为函数调用模式的函数中的this绑定到全局对象，所以会发生全局属性被重写的现象
var a=0;
function fn(){
this.a=1;
}
fn();
console.log(this,this.a,a);//window 1 1
2.方法调用模式
当一个函数被保存为对象的一个属性时，我们称它为一个方法。当一个方法被调用时，this被绑定到该对象。如果调用表达式包含一个提取属性的动作，那么它就是被当作一个方法来调用。
var o={
m:function(){
console.log(1)
}
}
o.m();//1
方法可以使用this访问自己所属的对象，所以它能从对象中取值或对对象进行修改。this到对象的绑定发生在调用的时候。通过this可取的它们所属对象的上下文的方法称为公共方法。
var o={
a:1,
m:function(){
return this;
},
n:function(){
this.a=2;
}
}
console.log(o.m().a);//1
o.n();
console.log(o.m().a);//2
任何函数只要作为方法调用实际上都会传入一个隐式的实参--这个参数是一个对象，方法调用的母体就是这个对象，通常来讲，基于那个对象的方法可以执行多次操作，方法调用的语法已经清晰的表明了函数将基于一个对象进行操作。
rect.setSize(width,height);
setRectSize(rect,width,height);
假设上面两行代码的功能完全一样，它们都作用于一个假定的对象rect。可以看出，第一行的方法调用语句非常清晰的表明这个函数执行的载体是rect对象，函数中的所有操作将会基于这个对象。
和变量不同，关键字this没有作用域的限制，嵌套的函数不会调用它的函数中继承this，如果嵌套函数作为方法调用，其this的值指向调用它的对象。如果嵌套函数作为函数调用，其this的值不是全局对象就是undefined
var o={
m:function(){
function n(){
return this;
}
return n();
}
}
console.log(o.m());//window
var o={
m:function(){
function n(){
'use strict'
return this;
}
return n()
}
}
console.log(o.m());//undefined
如果想访问这个外部函数的this值，需要将this的值保存在一个变量里，这个变量和内部函数都同在一个作用域内。通常使用变量self或that来保存this.
var o={
m:function(){
var self=this;
console.log(this===o);//true
function n(){
console.log(this===o);//false
console.log(self===o);//true
return self;
}
return n()
}
}
console.log(o.m()===o);//true
3.构造函数调用模式
如果函数或者方法调用之前带有new关键字，它就构成构造函数调用。
function fn(){
this.a=1;
}
var obj=new fn();
console.log(obj.a);//1
如果构造函数调用在圆括号内包含一组实参列表，先计算这些实参表达式，然后传入函数内
function fn(x){
this.a=x;
}
var obj=new fn(2);
console.log(obj.a);//2
如果构造函数没有形参，js构造函数调用的语法是允许省略实参列表和圆括号的。凡是没有形参的构造函数都可以省略圆括号。
var o=new Object();
//等价于
var o=new Object;
注意：尽管构造函数看起来像是一个方法调用，他依然会使用新对象作为调用上下文。也就是说：在表达式new o.m()中，调用上下文并不是o
var o={
m:function(){
return this;
}
}
var obj=new o.m();
console.log(obj,obj===o);//{},false
console.log(obj.constructor===o.m);//true
构造函数通常不使用return关键字，他们通常初始化新对象，当构造函数的函数体执行完毕时，它会显式返回。在这种情况下，构造函数调用表达式的计算结果就是这个新对象的值。
function fn(){
this.a=2;
}
var test=new fn();
console.log(test);//{a:2}
如果构造函数使用return语句但没有指定返回值，或者返回一个原始值，那么这时将忽略返回值，同时使用这个新对象作为调用结果
function fn(){
this.a = 2;
return;
}
var test = new fn();
console.log(test);//{a:2}
如果构造函数显式地使用return语句返回一个对象，那么调用表达式的值就是这个对象
var obj = {a:1};
function fn(){
this.a = 2;
return obj;
}
var test = new fn();
console.log(test);//{a:1}
4.间接调用模式
js中函数也是对象，函数对象也可以包含方法，call()和apply()方法可以用来间接的调用函数。
这两个方法都允许显式指定调用所需的this值，也就是所，任何函数可以作为任何对象的方法来调用，哪怕这个函数不是对象的方法。两个方法都可以指定调用的实参。call()方法使用它自有的实参列表作为函数的实参。apply()方法则要求以数组的形式传入参数。
var obj={};
function sun(x,y){
return x+y;
}
console.log(sun.call(obj,1,2));//3
console.log(sun.apply(obj,[1,2]));//3
函数参数
arguments:js中的函数定义并未指明函数形参的类型，函数调用也未对传入的实参值做任何类型检查。实际上，js函数调用甚至不检查传入形参的个数。
function add(x){
return x+1;
}
console.log(add(1));//2
console.log(add("1"));//11
console.log(add());//NaN
console.log(add(1,2));//2
同名形参：在非严格模式下，函数中可以出现同名形参，且只能访问最后出改名称的形参。
function add(x,x,x){
return x;
}
console.log(add(1,2,3));//3
而在严格模式下，出现同名形参抛出语法错误。
function add(x,x,x){
'use strict';
return x;
}
console.log(add(1,2,3));//出现错误
参数个数：当实参比函数声明指定的形参个数少，剩下的形参都将设置为undefined值。
function add(x,y){
console.log(x,y);
}
add(1);//1,undefined
常常使用逻辑或运算符给省略的参数设置一个合理的默认值。
function add(x,y){
y=y||2;
console.log(x,y)
}
add(1)
注意：实际上，使用y=y||2是不严谨的，显示的设置值（undefined,null,false,0,-0,NaN）也会得到相同的结果。所以应该根据实际场景进行合理设置。
当实参比形参个数要多时，剩下的实参没有办法直接获得，需要使用即将提到的arguments对象。
js中的参数在内部用一个数组表示。函数接收到的始终都是这个数组，而不关心数组中包含哪些参数。在函数体内可以通过arguments对象来访问这个参数数组，从而获得传递给参数的每一个参数。arguments对象并不是array的实例，他是一个类数组对象，可以使用方括号访问它的每一个元素。
function add(x){
console.log(arguments[0],arguments[1],arguments[2]);
return x+1;
}
add(1,2,3)
arguments对象的length属性显示实参的个数，函数的length属性显示形参的个数。
function add(x,y){
console.log(arguments.length) //3
return x+1;
}
add(1,2,3);
console.log(add.length); //2
形参只是提供便利，但不是必需的
function add(){
return arguments[0]+arguments[1];
}
console.log(add(1,2));//3
对象参数：当一个函数包含超过3个形参时，要记住调用函数中实参的正确顺序实在让人头疼。
function arraycopy(/*array*/from,/*index*/form_start,/*array*/to,/*index*/to_start,/*integer*/length){
//todo
}
通过键值对的形式来传入参数，这样参数的顺序就无关紧要了。定义函数的时候，传入的实参都写入一个单独的对象之中，在调用的时候传入一个对象，对象中的名值对是真正需要的实参数据。
function easycopy(args){
arraycopy(args.from,args.from_start||0,args.to,args.to_start||0,args.length);
}
var a=[1,2,3,4],b=[];
easycopy({from:a,to:b,length:4})
以参数为参数
函数本身是一个对象，因此可以将函数作为另一个函数的参数，进而实现函数回调，功能等同于c++中的函数指针
function printf(str){
dom1.innerText+=str.toString()+"\n";//设置dom1显示的文字。变量也可以自动调用其他js文件中的dom1变量。dom1会先在当前文件中查询，然后向之前引用的js文件查询，再向之后引用的js文件查询
}
function callfunction(myfunction,myargument){ //函数作为其他函数的参数
return myfunction(myargument); //调用回调函数
}
callfunction(printf,"hello world");
同步：当形参与实参的个数相同时，arguments对象的值和对应形参的值保持同步。
function test(num1,num2){
console.log(num1,arguments[0]);//1,1
arguments[0]=2;
console.log(num1,arguments[0]);//2,2
num1=10;
console.log(num1,arguments[0]);//10,10
}
test(1)
注意：虽然命名参数和对应arguments对象的值相同，但并不是相同的命名空间。他们的命名空间是独立的，但值是同步的
在严格模式下，arguments对象的值和参数的值都是独立的。
function test(num1,num2){
'use strict';
console.log(num1,arguments[0]);1,1
arguments[0]=2;
console.log(num1,arguments[0]);1,2
num1=10;
console.log(num1,arguments[0]);10,2
}
test(1)
当形参并没有对应的实参时，arguments对象的值和形参的值并不对应。
function test(num1,num2){
console.log(num1,arguments[0]);//undefined,undefined
num1=10;
arguments[0]=5;
console.log(num1,arguments[0]);//10,5
}
test()
内部属性：callee
arguments对象有一个名为callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数
下面是经典的阶乘函数
function factorial(num){
if(num<=1){
return 1;
}else{
return num*factorial(num-1)
}
}
console.log(factorial(5));//120
但是，上面这个函数的执行与函数名字紧紧耦合在了一起，可以使用arguments.callee可以消除函数解耦
function fact(num){
if(num<=1){
return 1;
}else{
return num*arguments.callee(num-1);
}
}
console.log(fact(5));//120
但是在严格模式下，访问这个属性会抛出typeerror错误
function factorial(num){
'use strict';
if(num <=1){
return 1;
}else{
return num* arguments.callee(num-1);
}
}
//TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
console.log(factorial(5));
这时，可以使用具名的函数表达式
var fact=function fn(num){
if(num<=1){
return 1;
}else{
return num*fn(num-1)
}
}
console.log(fact(5))
caller:实际上，有两个caller属性
1：函数的caller
函数的caller属性保存着调用当前函数的函数的引用，如果实在全局作用域中调用当前函数，它的值是null
function outer(){
inner()
}
function inner(){
console.log(inner.caller)//outer(){inner();}
}
outer()
function inner(){
console.log(inner.caller);//null
}
inner()
在严格模式下，访问这个属性会抛出typeerror错误
function inner(){
'use strict';
console.log(inner.caller);
}
inner()
2:arguments对象的caller
该属性始终是undefined，定义这个属性是为了分清arguments.caller和函数的caller属性
function inner(x){
console.log(arguments.caller);//undefined
}
inner(1);
同样地，在严格模式下，访问这个属性会抛出TypeError错误
function inner(x){
'use strict';
//TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context
console.log(arguments.caller);
}
inner(1);
函数重载
js函数不能像传统意义上那样实现重载。而在其他语言中，可以为一个函数编写两个定义，只要这两个定义的签名（接受的参数的类型和数量）不同即可。
js函数没有签名，因为其参数是由包含0个或者多个值得数组来表示的。而没有函数签名，真正的重载是不可能做到的。
//后面的声明覆盖了前面的声明
function a(num){
retun num+100;
}
functiona (num){
return num+200;
}
var result=a(100);//300
只能通过检查传入函数中参数的类型和数量并做出不同的反应，来模仿方法的重载
function doAdd(){
if(arguments.length==1){
alert(arguments[0]+10)
}else if(arguments.length==2){
alert(arguments[0]+arguments[2])
}
}
doAdd(10);//20
doAdd(30,20);//50
参数传参
js中所有函数的参数都是按值传递的，也就是说，把函数外部的值复制到函数内部的参数，就和把值从一个变量复制到另一个变量一样。
1.基本类型值
在向参数传递基本类型的值时，被传递的值会被复制给一个局部变量（同名参数或arguments对象的一个元素）
function addTen(num){
num+=10;
return num;
}
var count=20;
var result=addTen(count);
console.log(count);//20
console.log(result);//30
2.引用类型值
在向参数传递引用类型的值时，会把这个值在内存中的地址复制给一个局部变量，因此这个局部变量的变化会反应在函数的外部。
function setName(obj){
obj.name="test"
}
var person=new Object();
setName(person)
console.log(person.name);//test
当在函数内部重写引用类型的参数时，这个变量的引用就是一个局部对象了。而这个局部对象会在函数执行完毕后立即被销毁。
function setName(obj){
obj.name="test";
console.log(person.name);//test
obj=new Object();
obj.name="white";
console.log(person.name);//test
}
var person=new Object();
setName(person)
函数属性
length属性
arguments对象的length属性表示实参个数，而函数的length属性则表示形参个数。
function add(x,y){
console.log(arguments.length)//3
console.log(add.length)//2
}
add(1,2,3)
name属性
函数定义了一个非标准的name属性，通过这个属性可以访问到给定函数指定的名字，这个属性的值永远等于跟在function关键字后面的标识符，匿名函数的name属性为空
//IE11-浏览器无效，均输出undefined
//chrome在处理匿名函数的name属性时有问题，会显示函数表达式的名字
function fn(){};
console.log(fn.name);//'fn'
var fn = function(){};
console.log(fn.name);//''，在chrome浏览器中会显示'fn'
var fn = function abc(){};
console.log(fn.name);//'abc'
注意：name属性早就被浏览器广泛支持，但是直到es6才将其写入标准
es6对这个属性的行为做出了一些修改，如果将一个匿名函数赋值给一个变量，es5的name属性会返回空字符串，而es6的name属性会返回实际的函数名
var fun=function(){}
fun.name;//es5 ""
fun.name;//es6 fun
如果将一个具名函数赋值给一个变量，则es5和es6的name属性都返回这个具名函数原本的名字
var bar=function baz(){}
bar.name;//es5 baz
bar.name;//es6 baz
Function构造函数返回的函数实例，name属性的值是“anonymous”
(new Function).name;//anonymous
bind返回的函数，name属性值会加上“bound”前缀
function foo(){}
foo.bind({}).name;//bound foo
(function (){}).bind({}).name;//bound
prototype属性
每一个函数都有一个prototype属性，这个属性指向一个对象的引用，这个对象称作原型对象。每一个函数都包含不同的原型对象。将函数用作构造函数时，新创建的对象会从原型对象上继承属性
function fn(){}
var obj=new fn;
fn.prototype.a=1;
console.log(obj.a);//1
函数方法
apply()和call()
每个函数都包含两个非继承而来的方法，apply()和call().这两个方法的用途都是在特定的作用域中调用函数，实际上等于函数体内this对象的值。
要想以函数对象o的方法来调用函数f(),可以这样使用call()和apply()
f.call(o)
f.apply(o)
假设o中不存在m方法，则等价于
o.m = f; //将f存储为o的临时方法
o.m(); //调用它，不传入参数
delete o.m; //将临时方法删除
下面是一个实际的例子
window.color="red";
var o={color:"blue"};
function saycolor(){
console.log(this.color)
}
sayColor()//red
sayColor.call(this);//red
sayColor.call(window);//red
sayColor.call(o);//blue
//sayColor.call(o)等价于
o.sayColor=sayColor;
o.sayColor();//blue
delete o.sayColor;
apply()方法接收两个参数：一个是在其中运行函数的作用域（或者可以说是要调用函数的母对象，它是调用上下文，在函数体内通过this来获得对他的引用），另一个是参数数组。其中，第二个参数可以是array的实例，也可以是arguments对象
function sum(num1,num2){
return num1+num2;
}
//因为运行函数的作用域是全局作用域，所以this代表的是window对象
function callSum(num1,num2){
return sum.apply(this,arguments)
}
function callSum2(num1,num2){
return sum.apply(this,[num1,num2])
}
console.log(callSum(10,10));//20
console.log(callSum2(10,10));//20
call()方法与apply()方法的作用相同，它们的区别仅仅在于接收参数的方式不同，对于call方法而言，第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。换句话说，在使用call()方法时，传递给函数的参数必须逐个列举出来
function sum(num1, num2){
return num1 + num2;
}
function callSum(num1, num2){
return sum.call(this, num1, num2);
}
console.log(callSum(10,10)); //20
至于是使用apply()还是call(),完全取决于采取哪种函数传递参数的方式最方便。如果打算直接传入arguments对象，或者包含函数中先接收到的也是一个数组，那么使用apply()肯定更方便，否则，选择call()可能更合适
在非严格模式下，使用函数的call()或apply()方法时，null或undefined值会被转换为全局对象。而在严格模式下，函数的this值始终是指定的值
var color = 'red';
function displayColor(){
console.log(this.color);
}
displayColor.call(null);//red
var color = 'red';
function displayColor(){
'use strict';
console.log(this.color);
}
displayColor.call(null);//TypeError: Cannot read property 'color' of null
应用
1.调用对象的原生方法
var obj={};
obj.hasOwnProperty("toString");//false
obj.hasOwnProperty=function(){
return true;
}
obj.hasOwnProperty("toString");//true
Object.prototype.hasOwnProperty.call(obj,"toString");false
2.找出数组中的最大值
js不提供找出数组最大元素的函数，结合使用apply方法和math.max方法，就可以返回数组的最大元素
var a=[1,33,2,4,5,6];
Math.max.apply(null,a)
3.将数组对象转换成真正的数组
Array.prototype.slice.apply({0:1,length:1})//[1]
或者
[].prototype.slice.apply({0:1,length:1})
4.将一个数组的值push到另一个数组中
var a=[];
Array.prototype.push.apply(a,[1,2,3])
console.log(a);//[1,2,3]
Array.prototype.push.apply(a,[2,3,4]);
console.log(a);//[1,2,3,2,3,4]
5.绑定回调函数的对象
由于apply方法或者call方法不仅绑定函数执行时所在的对象，还会立即执行函数，因此不得不把绑定语句写在函数体内，更简洁的写法是采用下面的bind方法
var o={};
o.f=function(){
console.log(this===o)
}
var f=function(){
o.f.apply(o)
}
bind()方法
bind()是es5新增的方法，这个方法的主要作用是将函数绑定到某个对象上
当在函数f()上调用bind()方法并传入一个对象o作为参数，这个方法将返回一个新的对象。以函数调用的方式调用新的函数将会把原始的函数f()当作o的方法调用，传入新函数的任何实参都将传入原始函数
function f(y){
return this.x+y;
}
var o={x:1};
var g=f.bind(o);
g(2)
兼容代码
function bind(f,o){
if(f.bind){
return f.bind(o)
}else{
return function(){
return f.apply(o,arguments)
}
}
}
bind方法不仅是将函数绑定到一个对象上，它还附带一些其他应用：除了第一个实参外，传入bind的实参也会绑定到this，这个附带的应用是一种常见的函数式编程及时，称柯里化
var sum=function(x,y){
return x+y;
}
var succ=sum.bind(null,1);
succ(2);//3,x绑定到1，并传入2作为实参y
function f(y,z){
return this.x+y+z;
}
var g=f.bind({x:1},2)
g(3);//6,this.x绑定到1，y绑定到2,z绑定到3
function getConfig(colors,size,other){
console.log(colors,size,other)
}
var default=getConfig.bind(null,"#000","1024*234");
default("123")
default("456")
toString()
函数的toString()实例方法返回函数代码的字符串，而静态的toString()方法返回一个类似’[native code]’的字符串作为函数体
function test(){
alert(1)
}
test.toString()
Function.toString()
toLocalString()
toLocalString()方法和toString()方法返回的结果相同
function test(){
alert(1);//test
}
test.toLocaleString();/*"function test(){
alert(1);//test
}"*/
Function.toLocaleString();//"function Function() { [native code] }"
valueOf()
函数的valueOf()方法返回函数本身
function test(){
alert(1);//test
}
test.valueOf();/*function test(){
alert(1);//test
}*/
typeof test.valueOf();//'function'
Function.valueOf();//Function() { [native code] }
网友评论