函数

述

函数对任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句，而且可以在任何地方、任何时候调用执行。在javascript里，函数即对象，程序可以随意操控它们。函数可以嵌套在其他函数中定义，这样它们就可以访问它们被定义时所处的作用域中的任何变量，它给javascript带来了非常强劲的编程能力。

函数的声明

JavaScript有三种声明函数的方法

(1) 函数的声明语句

function命令声明的代码区块，就是一个函数。function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。

1.function hello(a){
2.    console.log(a);
3.}

上面的代码命名了一个hello函数，以后使用hello()这种形式，就可以调用相应的代码。这叫做函数的声明（Function Declaration）。

(2) 函数表达式

除了用function命令声明函数，还可以采用变量赋值的写法

1.var hello = function(a){
2.    console.log(a)
3.}

这种写法将一个匿名函数赋值给变量。这时，这个匿名函数又称函数表达式（Function Expression），因为赋值语句的等号右侧只能放表达式。

采用函数表达式声明函数时，function命令后面不带有函数名。如果加上函数名，该函数名只在函数体内部有效，在函数体外部无效。

1.var hello = function x(a){
2.    console.log(typeof x);
3.}
4.console.log(x);// ReferenceError: x is not defined
5.hello(); //function

个人理解，对于具名的函数表达式来说，函数名称相当于函数对象的形参，只能在函数内部使用；而变量名称相当于函数对象的实参，在函数内部和函数外部都可以使用

1.var test = function fn(){
2.   return fn === test;
3.}
4.console.log(test());//true
5.console.log(test === fn);//ReferenceError: fn is not defined

(3) Function构造函数

1.var add = new Function(
2.    'x',
3.    'y',
4.    'return x + y'
5.);

6.//等同于

7.function add(x,y){

8. return x + y;

9.}

上面代码中，Function构造函数接受三个参数，除了最后一个参数是add函数的“函数体”，其他参数都是add函数的参数。

你可以传递任意数量的参数给Function构造函数，只有最后一个参数会被当做函数体，如果只有一个参数，该参数就是函数体。

1.var foo = new Function(
2.  'return "hello world"'
3.);
4.
5.// 等同于
6.function foo() {
7.  return 'hello world';
8.}

Function构造函数可以不使用new命令，返回结果完全一样。

总的来说，这种声明函数的方式非常不直观，几乎无人使用。

函数返回值

函数中的return语句用来返回函数调用后的返回值，return语句只能出现在函数体内，如果不是会语法错误

1.return 1;//SyntaxError: Illegal return statement

如果没有return语句，则函数调用仅仅依次执行函数体内的每一条语句直到函数结束，最后返回调用程序。这种情况下，调用表达式的结果是undefined

1.var test = function fn(){}

2.console.log(test());//undefined

当执行到return语句时，函数终止执行

1.var test = function fn(){
2.    return 2;
3.};
4.console.log(test());//2

注意：并不是函数中return语句后的所有语句都不执行，finally语句例外,return语句不会阻止finally子句的执行

1.function testFinally(){
2.    try{
3.        return 2;
4.    }catch(error){
5.        return 1;
6.    }finally{
7.        return 0;
8.    }
9.}

1.try{
2.    //通常来讲，这里的代码会从头到尾而不会产生任何问题
3.    //但有时会抛出一个异常，要么是由throw语句直接抛出，要么通过调用一个方法间接抛出
4.}catch(e){
5.    //当且仅当try语句块抛出了异常，才会执行这里的代码
6.    //这里可以通过局部变量e来获得对Error对象或者抛出的其他值的引用
7.    //这里的代码块可以基于某种原因处理这个异常，也可以忽略这个异常，还可以通过throw语句重新抛出异常
8.}finally{
9.    //不管try语句是否抛出了异常，finally里的逻辑总是会执行，终止try语句块的方式有：
10.    //1、正常终止，执行完语句块的最后一条语句
11.    //2、通过break、continue或return语句终止
12.    //3、抛出一个异常，异常被catch从句捕获
13.    //4、抛出一个异常，异常未被捕获，继续向上传播
14.}

一个函数中可以有多个return语句

1.function compare(x,y){

2. if(x > y){

3. return x - y;

4. }else{

5. return y - x;

6. }

7.}

return语句可以单独使用而不必带有expression，这样的话也会向调用程序返回undefined。

1.var test = function fn(){

2. return;

3.}

4.console.log(test()); //undefined;

return语句经常作为函数内的最后一条语句出现，这是因为return语句可用来使函数提前返回。当return被执行时，函数立即返回而不再执行余下的语句

1.//并没有弹出1

2.var test = function fn(){

3. return;

4. alert(1);

5.};

6.console.log(test());//undefined

如果函数调用时在前面加上了new前缀，且返回值不是一个对象或者没有返回值，则返回this(该新对象)

1.function fn(){

2. this.a = 2;

3. return 1;

4.}

5.var test = new fn();

6.console.log(test);//{a:2}

7.console.log(test.constructor);//fn(){this.a = 2;return 1;}

如果返回值是一个对象，则返回该对象

1.function fn(){

2. this.a = 2;

3. return {a:1};

4.}

5.var test = new fn();

6.console.log(test);//{a:1}

7.console.log(test.constructor);//Object() { [native code] }

函数调用

只有函数被调用时，才会执行。调用运算符是跟在任何产生一个函数值的表达式之后的一对圆括号，圆括号内可包含零个或多个用逗号隔开的表达式。每个表达式产生一个参数值，每个参数值被赋予函数声明时定义的形参名

1. javascript一共有4种调用模式：函数调用模式、方法调用模式、构造器调用模式和间接调用模式

【1】函数调用模式

当一个函数并非一个对象的属性时，那么它就是被当做一个函数来调用。对于普通的函数调用来说，函数的返回值就是调用表达式的值

1.function add(x,y){

2. return x+y;

3.}

4.var sum = add(3,4);

5.console.log(sum)//7

使用函数调用模式调用函数时，非严格模式下，this被绑定到全局对象；在严格模式下，this是undefined

1.function add(x,y){

2. console.log(this);//window

3.}

4.add();

1.function add(x,y){

2. 'use strict';

3. console.log(this);//undefined

4.}

5.add();//window

重写

因为函数调用模式中的this绑定到全局对象，所以会发生全局属性被重写的现象

1.var a = 0;

2.function fn(){

3. this.a = 1;

4.}

5.fn();

6.console.log(this,this.a,a);//window 1 1

所以，小心避免全局属性重写带来的问题

【2】方法调用模式

当一个函数被保存在对象的一个属性时，我们称它为一个方法。当一个方法被调用时，this被绑定到该对象。如果调用表达式包含一个提取属性的动作，那么它就是被当做一个方法来调用

1.var o = {

2. m:function(){

3. console.log(111);

4. }

5.}

6.p.m();

方法可以使用this访问自己所属的对象，所以它能在对象中取值或对对象进行修改。this到对象的绑定发生在调用时候。通过this取得他们所属对象的上下文的方法称之为公共方法。

1.var p = {

2. a:1,

3. m:function(){

4. console.log(111);

5. },

6. n:function(){

7. this.a = 2;

8. }

9.}

10.console.log(p.m()); //1

11.o.n();

12.console.log(o.m().a);//2

【3】构造函数调用模式

如果函数或者方法调用之前带有关键字new，它就构成构造函数调用

1.function fn(){

2. this.a = 1;

3.};

4.var obj = new fn();

5.console.log(obj.a);//1

如果构造函数调用在圆括号内包含一组实参列表，先计算这些实参表达式，然后传入函数内

1.function fn(x){

2. this.a = x;

3.};

4.var obj = new fn(2);

5.console.log(obj.a);//2

如果构造函数没有形参，javascript构造函数调用的语法是允许省略实参列表和圆括号的。凡是没有形参的构造函数调用都可以省略圆括号

1.var o = new Object();

2.//等价于

3.var o = new Object;

构造函数通常不适用return关键字，他们通常初始化新对象，当构造函数的函数体执行完毕时，它会显式返回。在这种情况下，构造函数调用表达式的计算结果就是这个新对象的值。

1.function fn(){

2. this.a = 2;

3.}

4.var test = new fn();

5.console.log(test);//{a:2}

如果构造函数使用return语句但没有指定返回值，或者返回一个原始值，那么这时将忽略返回值，同时使用这个新对象作为调用结果

1.function fn(){

2. this.a = 2;

3. return;

4.}

5.var test = new fn();

6.console.log(test);//{a:2}

如果构造函数显式地使用return语句返回一个对象，那么调用表达式的值就是这个对象

1.var obj = {a:1};

2.function fn(){

3. this.a = 2;

4. return obj;

5.}

6.var test = new fn();

7.console.log(test);//{a:1}

【4】间接调用模式

javascript中函数也是对象，函数对象也可以包含方法。call()和apply()方法可以用来间接地调用函数

　　这两个方法都允许显式指定调用所需的this值，也就是说，任何函数可以作为任何对象的方法来调用，哪怕这个函数不是那个对象的方法。两个方法都可以指定调用的实参。call()方法使用它自有的实参列表作为函数的实参，apply()方法则要求以数组的形式传入参数

1.var obj = {};

2.function sum(x,y){

3. return x+y;

4.}

5.console.log(sum.call(obj,1,2));//3

6.console.log(sum.apply(obj,[1,2]));//3

关于call()和apply()方法，我们会在后面章节中的函数的属性和方法中重点讲解。

函数参数

javascript函数的参数与大多数其他语言的函数的参数有所不同。函数不介意传递进来多少个参数，也不在乎传进来的参数是什么数据类型，甚至可以不传参数

arguments

javascript中的函数定义并未指定函数形参的类型，函数调用也未对传入的实参值做任何类型检查。实际上，javascript函数调用甚至不检查传入形参的个数。

1.function add(x){

2. return x+1;

3.};

4.console.log(add(1));//2

5.console.log(add('1'));//'11'

6.console.log(add());//NaN

7.console.log(add(1,2));//2

同名形参

在非严格模式下，函数中可以出现同名形参，且只能访问最后出现的该名称的形参

1.function add(x,x,x){

2. return x;

3.}

4.console.log(add(1,2,3));//3

在严格模式下，出现同名形参会抛出语法错误

1.function add(x,x,x){

2. 'use strict';

3. return x;

4.}

5.console.log(add(1,2,3));//SyntaxError: Duplicate parameter name not allowed in this context

参数个数

当实参比函数声明指定的形参个数要少，剩下的形参都将设置为undefined值

1.function add(x,y){

2. console.log(x,y);//1 undefined

3.}

4.add(1);

当实参比形参个数要多时，剩下的实参没有办法直接获得，需要使用arguments对象来获取

javascript中的参数在内部用一个数组表示。函数接收到的始终都是这个数组，而不关心数组中包含哪些参数。在函数体内可以通过arguments对象来访问这个参数数组，从而获取传递给函数的每一个参数。arguments对象并不是Array的实例，它是一个类数组对象，可以使用方括号语法访问它的每一个元素。

1.function add(x){

2. console.log(arguments[0],arguments[1],arguments[2])//1 2 3

3. return x+1;

4.}

5.add(1,2,3);

arguments对象的length属性显示实参的个数，函数的length属性显示形参的个数

1.function add(x,y){

2. console.log(arguments.length)//3

3. return x+1;

4.}

5.add(1,2,3);

6.console.log(add.length);//2

形参只是提供便利，但不是必需的

1.function add(){

2. return arguments[0] + arguments[1];

3.}

4.console.log(add(1,2));//3

函数重载

javascript函数不能像传统意义上那样实现重载。而在其他语言中，可以为一个函数编写两个定义，只要这两个定义的签名(接受的参数的类型和数量)不同即可

　　javascript函数没有签名，因为其参数是由包含0或多个值的数组来表示的。而没有函数签名，真正的重载是不可能做到的

1.//后面的声明覆盖了前面的声明

2.function addSomeNumber(num){

3. return num + 100;

4.}

5.function addSomeNumber(num){

6. return num + 200;

7.}

8.var result = addSomeNumber(100);//300

只能通过检查传入函数中参数的类型和数量并作出不同的反应，来模仿方法的重载

1.function doAdd(){

2. if(arguments.length == 1){

3. alert(arguments[0] + 10);

4. }else if(arguments.length == 2){

5. alert(arguments[0] + arguments[1]);

6. }

7.}

8.doAdd(10);//20

9.doAdd(30,20);//50

参数传递

javascript中所有函数的参数都是按值传递的。也就是说，把函数外部的值复制到函数内部的参数，就和把值从一个变量复制到另一个变量一样

【1】基本类型值

在向参数传递基本类型的值时，被传递的值会被复制到一个局部变量(命名参数或arguments对象的一个元素)

1.function addTen(num){

2. num += 10;

3. return num;

4.}

5.var count = 20;

6.var result = addTen(count);

7.console.log(count);//20，没有变化

8.console.log(result);//30

【2】引用类型值

在向参数传递引用类型的值时，会把这个值在内存中的地址复制给一个局部变量，因此这个局部变量的变化会反映在函数的外部

1.function setName(obj){

2. //obj 在函数内部是一个局部变量

3. obj.name = 'test';

4.}

5.var person = new Object();

6.setName(person);

7.console.log(person.name);//'test'

当在函数内部重写引用类型的形参时，这个变量引用的就是一个局部对象了。而这个局部对象会在函数执行完毕后立即被销毁

1.function setName(obj){

2. obj.name = 'test';

3. console.log(person.name);//'test'

4. //函数内部重写引用类型的形参，这个obj变量是一个局部对象。函数执行完毕，立马销毁。所以person.name还是全局对象person的属性值

5. obj = new Object();

6. obj.name = 'white';

7. console.log(person.name);//'test'

8.}

9.var person = new Object();

10.setName(person);

函数属性和方法

函数是javascript中特殊的对象，可以拥有属性和方法，就像普通的对象拥有属性和方法一样。甚至可以用Function()构造函数来创建新的函数对象。

属性

length属性

上节提到过，arguments对象的length属性表示实参个数，而参数的length属性则表示形参个数

1.function add(x,y){

2. console.log(argument.length);//3

3. console.log(add.length);//2

4.}

5.add(1,2,3);

name属性

函数定义了一个非标准的name属性，通过这个属性可以访问到给定函数指定的名字，这个属性的值永远等于跟在function关键字后面的标识符，匿名函数的name属性为空

1.function fn(){};

2.console.log(fn.name);//'fn'

3.var fn = function(){};

4.console.log(fn.name);//'fn'

5.var fn = function abc(){};

6.console.log(fn.name);//'abc'

prototype属性

每一个函数都有一个prototype属性，这个属性指向了一个对象的引用，这个对象叫做原型对象(prototype object)。每一个函数都包含不同的原型对象。将函数用作构造函数时，新创建的对象会从原型对象上继承属性。

1.function fn(){};

2.var obj = new fn;

3.fn.prototype.a = 1;

4.console.log(obj.a);//1

关于原型对象，也是咱们再后面面向对象编程课程中非常重要的一节课。

方法

apply()和call()

每一个函数都包含两个非继承而来的方法：apply()和call()方法。这两个方法的用途都是在特定的作用域中调用函数，实际上等于函数体内this对象的值。

要想以对象o的方法来调用函数f()，可以使用call()和apply()

1.f.call(o);

2.f.apply(o);

假设o中不存在m方法，则等价于：

1.o.m = f;//将f存储为o的临时方法

2.o.m();//调用它，不传入参数

3.delete o.m; //将临时方法删除

例子：

1.window.color = "red";

2.var o = {color: "blue"};

3.function sayColor(){

4. console.log(this.color);

5.}

6.sayColor(); //red

7.sayColor.call(this); //red

8.sayColor.call(window); //red

9.sayColor.call(o); //blue

1.//sayColor.call(o)等价于:

2.o.sayColor = sayColor;

3.o.sayColor(); //blue

4.delete o.sayColor;

apply()方法接收两个参数：一个是在其中运行函数的作用域(或者可以说成是要调用函数的母对象，它是调用上下文，在函数体内通过this来获得对它的引用)，另一个是参数数组。其中，第二个参数可以是Array的实例，也可以是arguments对象

1.function sum(num1, num2){

2. return num1 + num2;

3.}

4.//因为运行函数的作用域是全局作用域，所以this代表的是window对象

5.function callSum1(num1, num2){

6. return sum.apply(this, arguments);

7.}

8.function callSum2(num1, num2){

9. return sum.apply(this, [num1, num2]);

10.}

11.console.log(callSum1(10,10));//20

12.console.log(callSum2(10,10));//20

call()方法与apply()方法的作用相同，它们的区别仅仅在于接收参数的方式不同。对于call()方法而言，第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。换句话说，在使用call()方法时，传递给函数的参数必须逐个列举出来

1.function sum(num1, num2){

2. return num1 + num2;

3.}

4.function callSum(num1, num2){

5. return sum.call(this, num1, num2);

6.}

7.console.log(callSum(10,10)); //20

至于是使用apply()还是call()，完全取决于采取哪种函数传递参数的方式最方便。如果打算直接传入arguments对象，或者包含函数中先接收到的也是一个数组，那么使用apply()肯定更方便；否则，选择call()可能更合适

在非严格模式下，使用函数的call()或apply()方法时，null或undefined值会被转换为全局对象。而在严格模式下，函数的this值始终是指定的值

1.var color = 'red';

2.function displayColor(){

3. console.log(this.color);

4.}

5.displayColor.call(null);//red

1.var color = 'red';

2.function displayColor(){

3. 'use strict';

4. console.log(this.color);

5.}

6.displayColor.call(null);//TypeError: Cannot read property 'color' of null

应用

【1】找出数组的最大元素

javascript不提供找出数组最大元素的函数。结合使用apply方法和Math.max方法，就可以返回数组的最大元素

1.var a = [10, 2, 4, 15, 9];

2.Math.max.apply(null, a);//15

【2】将类数数组转换成真正的数据

1.Array.prototype.slice.apply({0:1,length:1});//[1]

【3】将一个数组的值push到另一个数组中

1.var a = [];

2.Array.prototype.push.apply(a,[1,2,3]);

3.console.log(a);//[1,2,3]

4.Array.prototype.push.apply(a,[2,3,4]);

5.console.log(a);//[1,2,3,2,3,4]

【4】绑定回调函数的对象

由于apply方法（或者call方法）不仅绑定函数执行时所在的对象，还会立即执行函数，因此不得不把绑定语句写在一个函数体内

1.<body>

2. <button id="btn">按钮</button>

3.</body>

4.<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

5.<script type="text/javascript">

6. var o = {};

7. o.f = function() {

8. console.log(this === o);

9. }

10. $('#btn').on('click',function(){

11. o.f.apply(o);

12. });

13.</script>

bind()

bind()是es5新增的方法，这个方法的主要作用就是将函数绑定到某个对象

当在函数f()上调用bind()方法并传入一个对象o作为参数，这个方法将返回一个新的函数。以函数调用的方式调用新的函数将会把原始的函数f()当做o的方法来调用，传入新函数的任何实参都讲传入原始函数

1.function f(){

2. return this.x + y;//这个是待绑定的函数

3.}

4.var o = {x : 1};//将要绑定的对象

5.var g = f.bind(o);//通过调用g(x)来调用o.f(x);

6.g(2);//3;

bind()方法不仅是将函数绑定到一个对象，它还附带一些其他应用：除了第一个实参之外，传入bind()的实参也会绑定到this，这个附带的应用是一种常见的函数式编程技术，有时也被称为’柯里化’(currying)

1.var sum = function(x,y){

2. return x+y;

3.}

4.var succ = sum.bind(null,1);

5.succ(2); //3，x绑定到1，并传入2作为实参y

1.function f(y,z){

2. return this.x + y + z;

3.}

4.var g = f.bind({x:1},2);

5.g(3); //6，this.x绑定到1，y绑定到2，z绑定到3

使用bind()方法实现柯里化可以对函数参数进行拆分

1.function getConfig(colors,size,otherOptions){

2. console.log(colors,size,otherOptions);

3.}

4.var defaultConfig = getConfig.bind(null,'#c00','1024*768');

5.defaultConfig('123');//'#c00 1024*768 123'

6.defaultConfig('456');//'#c00 1024*768 456'

述

函数的声明

JavaScript有三种声明函数的方法

(1) 函数的声明语句

function命令声明的代码区块，就是一个函数。function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。

1. function hello(a){

2. console.log(a);

3. }

上面的代码命名了一个hello函数，以后使用hello()这种形式，就可以调用相应的代码。这叫做函数的声明（Function Declaration）。

(2) 函数表达式

除了用function命令声明函数，还可以采用变量赋值的写法

1. var hello = function(a){

2. console.log(a)

3. }

这种写法将一个匿名函数赋值给变量。这时，这个匿名函数又称函数表达式（Function Expression），因为赋值语句的等号右侧只能放表达式。

采用函数表达式声明函数时，function命令后面不带有函数名。如果加上函数名，该函数名只在函数体内部有效，在函数体外部无效。

1. var hello = function x(a){

2. console.log(typeof x);

3. }

4. console.log(x);// ReferenceError: x is not defined

5. hello(); //function

1. var test = function fn(){

2. return fn === test;

3. }

4. console.log(test());//true

5. console.log(test === fn);//ReferenceError: fn is not defined

(3) Function构造函数

1. var add = new Function(

2. 'x',

3. 'y',

4. 'return x + y'

5. );

6. //等同于

7. function add(x,y){

8. return x + y;

9. }

上面代码中，Function构造函数接受三个参数，除了最后一个参数是add函数的“函数体”，其他参数都是add函数的参数。

你可以传递任意数量的参数给Function构造函数，只有最后一个参数会被当做函数体，如果只有一个参数，该参数就是函数体。

1. var foo = new Function(

2. 'return "hello world"'

3. );

5. // 等同于

6. function foo() {

7. return 'hello world';

8. }

Function构造函数可以不使用new命令，返回结果完全一样。

总的来说，这种声明函数的方式非常不直观，几乎无人使用。

函数返回值

函数中的return语句用来返回函数调用后的返回值，return语句只能出现在函数体内，如果不是会语法错误

1. return 1;//SyntaxError: Illegal return statement

如果没有return语句，则函数调用仅仅依次执行函数体内的每一条语句直到函数结束，最后返回调用程序。这种情况下，调用表达式的结果是undefined

1. var test = function fn(){}

2. console.log(test());//undefined

当执行到return语句时，函数终止执行

1. var test = function fn(){

2. return 2;

3. };

4. console.log(test());//2

注意：并不是函数中return语句后的所有语句都不执行，finally语句例外,return语句不会阻止finally子句的执行

1. function testFinally(){

2. try{

3. return 2;

4. }catch(error){

5. return 1;

6. }finally{

7. return 0;

8. }

9. }

1. try{

2. //通常来讲，这里的代码会从头到尾而不会产生任何问题

3. //但有时会抛出一个异常，要么是由throw语句直接抛出，要么通过调用一个方法间接抛出

4. }catch(e){

5. //当且仅当try语句块抛出了异常，才会执行这里的代码

6. //这里可以通过局部变量e来获得对Error对象或者抛出的其他值的引用

7. //这里的代码块可以基于某种原因处理这个异常，也可以忽略这个异常，还可以通过throw语句重新抛出异常

8. }finally{

9. //不管try语句是否抛出了异常，finally里的逻辑总是会执行，终止try语句块的方式有：

10. //1、正常终止，执行完语句块的最后一条语句

11. //2、通过break、continue或return语句终止

12. //3、抛出一个异常，异常被catch从句捕获

13. //4、抛出一个异常，异常未被捕获，继续向上传播

14. }

一个函数中可以有多个return语句

1. function compare(x,y){

2. if(x > y){

3. return x - y;

4. }else{

5. return y - x;

6. }

7. }

return语句可以单独使用而不必带有expression，这样的话也会向调用程序返回undefined。

1. var test = function fn(){

2. return;

3. }

4. console.log(test()); //undefined;

return语句经常作为函数内的最后一条语句出现，这是因为return语句可用来使函数提前返回。当return被执行时，函数立即返回而不再执行余下的语句

1. //并没有弹出1

2. var test = function fn(){

3. return;

4. alert(1);

5. };

6. console.log(test());//undefined

如果函数调用时在前面加上了new前缀，且返回值不是一个对象或者没有返回值，则返回this(该新对象)

1. function fn(){

2. this.a = 2;

3. return 1;

4. }

5. var test = new fn();

6. console.log(test);//{a:2}

7. console.log(test.constructor);//fn(){this.a = 2;return 1;}

如果返回值是一个对象，则返回该对象

1. function fn(){

2. this.a = 2;

3. return {a:1};

4. }

5. var test = new fn();

6. console.log(test);//{a:1}

7. console.log(test.constructor);//Object() { [native code] }

函数调用

1. javascript一共有4种调用模式：函数调用模式、方法调用模式、构造器调用模式和间接调用模式

【1】函数调用模式

当一个函数并非一个对象的属性时，那么它就是被当做一个函数来调用。对于普通的函数调用来说，函数的返回值就是调用表达式的值

1. function add(x,y){

2. return x+y;

3. }

4. var sum = add(3,4);

5. console.log(sum)//7

使用函数调用模式调用函数时，非严格模式下，this被绑定到全局对象；在严格模式下，this是undefined

1. function add(x,y){

2. console.log(this);//window

3. }

4. add();

1. function add(x,y){

2. 'use strict';

3. console.log(this);//undefined

4. }

5. add();//window

重写

因为函数调用模式中的this绑定到全局对象，所以会发生全局属性被重写的现象

1. var a = 0;

2. function fn(){

3. this.a = 1;

4. }

5. fn();

6. console.log(this,this.a,a);//window 1 1

所以，小心避免全局属性重写带来的问题

【2】方法调用模式

1. var o = {

2. m:function(){

3. console.log(111);

4. }

5. }

6. p.m();

1. var p = {

2. a:1,

3. m:function(){

4. console.log(111);

5. },

6. n:function(){

7. this.a = 2;

8. }

9. }

10. console.log(p.m()); //1

11. o.n();

12. console.log(o.m().a);//2

【3】构造函数调用模式

如果函数或者方法调用之前带有关键字new，它就构成构造函数调用

1. function fn(){

2. this.a = 1;

3. };

4. var obj = new fn();

5. console.log(obj.a);//1

如果构造函数调用在圆括号内包含一组实参列表，先计算这些实参表达式，然后传入函数内

1. function fn(x){

2. this.a = x;

3. };

4. var obj = new fn(2);

5. console.log(obj.a);//2

如果构造函数没有形参，javascript构造函数调用的语法是允许省略实参列表和圆括号的。凡是没有形参的构造函数调用都可以省略圆括号

1. var o = new Object();

2. //等价于

3. var o = new Object;

1. function fn(){

2. this.a = 2;

3. }

4. var test = new fn();

5. console.log(test);//{a:2}

如果构造函数使用return语句但没有指定返回值，或者返回一个原始值，那么这时将忽略返回值，同时使用这个新对象作为调用结果

1. function fn(){

2. this.a = 2;

3. return;

4. }

5. var test = new fn();

6. console.log(test);//{a:2}

如果构造函数显式地使用return语句返回一个对象，那么调用表达式的值就是这个对象

1. var obj = {a:1};

2. function fn(){

3. this.a = 2;

4. return obj;

5. }

6. var test = new fn();

7. console.log(test);//{a:1}

【4】间接调用模式

javascript中函数也是对象，函数对象也可以包含方法。call()和apply()方法可以用来间接地调用函数

1. var obj = {};

2. function sum(x,y){

3. return x+y;

4. }

5. console.log(sum.call(obj,1,2));//3

6. console.log(sum.apply(obj,[1,2]));//3

关于call()和apply()方法，我们会在后面章节中的函数的属性和方法中重点讲解。

函数参数

arguments

javascript中的函数定义并未指定函数形参的类型，函数调用也未对传入的实参值做任何类型检查。实际上，javascript函数调用甚至不检查传入形参的个数。

1. function add(x){

2. return x+1;

3. };

4. console.log(add(1));//2

5. console.log(add('1'));//'11'

6. console.log(add());//NaN

7. console.log(add(1,2));//2

同名形参

在非严格模式下，函数中可以出现同名形参，且只能访问最后出现的该名称的形参

1. function add(x,x,x){

2. return x;

3. }

4. console.log(add(1,2,3));//3

在严格模式下，出现同名形参会抛出语法错误

1. function add(x,x,x){

2. 'use strict';

3. return x;

4. }

5. console.log(add(1,2,3));//SyntaxError: Duplicate parameter name not allowed in this context

参数个数

当实参比函数声明指定的形参个数要少，剩下的形参都将设置为undefined值

1. function add(x,y){

2. console.log(x,y);//1 undefined

3. }

4. add(1);

当实参比形参个数要多时，剩下的实参没有办法直接获得，需要使用arguments对象来获取

1. function add(x){

2. console.log(arguments[0],arguments[1],arguments[2])//1 2 3

3. return x+1;

4. }

5. add(1,2,3);

arguments对象的length属性显示实参的个数，函数的length属性显示形参的个数

1. function add(x,y){

2. console.log(arguments.length)//3

3. return x+1;

4. }

5. add(1,2,3);

6. console.log(add.length);//2

形参只是提供便利，但不是必需的

1. function add(){

2. return arguments[0] + arguments[1];

3. }

4. console.log(add(1,2));//3

函数重载

　　javascript函数没有签名，因为其参数是由包含0或多个值的数组来表示的。而没有函数签名，真正的重载是不可能做到的

1. //后面的声明覆盖了前面的声明

2. function addSomeNumber(num){

3. return num + 100;

4. }

5. function addSomeNumber(num){

6. return num + 200;

7. }

8. var result = addSomeNumber(100);//300

只能通过检查传入函数中参数的类型和数量并作出不同的反应，来模仿方法的重载

1. function doAdd(){

2. if(arguments.length == 1){

3. alert(arguments[0] + 10);

4. }else if(arguments.length == 2){

5. alert(arguments[0] + arguments[1]);

6. }

7. }

8. doAdd(10);//20

9. doAdd(30,20);//50

参数传递

javascript中所有函数的参数都是按值传递的。也就是说，把函数外部的值复制到函数内部的参数，就和把值从一个变量复制到另一个变量一样

【1】基本类型值

在向参数传递基本类型的值时，被传递的值会被复制到一个局部变量(命名参数或arguments对象的一个元素)

1. function addTen(num){

2. num += 10;

3. return num;

4. }

5. var count = 20;

6. var result = addTen(count);

7. console.log(count);//20，没有变化

8. console.log(result);//30

【2】引用类型值

在向参数传递引用类型的值时，会把这个值在内存中的地址复制给一个局部变量，因此这个局部变量的变化会反映在函数的外部

1. function setName(obj){

2. //obj 在函数内部是一个局部变量

3. obj.name = 'test';

4. }

5. var person = new Object();

6. setName(person);

7. console.log(person.name);//'test'

当在函数内部重写引用类型的形参时，这个变量引用的就是一个局部对象了。而这个局部对象会在函数执行完毕后立即被销毁

1. function setName(obj){

2. obj.name = 'test';

3. console.log(person.name);//'test'

4. //函数内部重写引用类型的形参，这个obj变量是一个局部对象。函数执行完毕，立马销毁。所以person.name还是全局对象person的属性值

5. obj = new Object();

6. obj.name = 'white';

7. console.log(person.name);//'test'

8. }

9. var person = new Object();

10. setName(person);

函数属性和方法

函数是javascript中特殊的对象，可以拥有属性和方法，就像普通的对象拥有属性和方法一样。甚至可以用Function()构造函数来创建新的函数对象。

属性

length属性

上节提到过，arguments对象的length属性表示实参个数，而参数的length属性则表示形参个数

1. function add(x,y){

2. console.log(argument.length);//3

3. console.log(add.length);//2

4. }

5. add(1,2,3);

name属性

1. function fn(){};

2. console.log(fn.name);//'fn'

3. var fn = function(){};

4. console.log(fn.name);//'fn'

5. var fn = function abc(){};

6. console.log(fn.name);//'abc'

prototype属性

1. function fn(){};

2. var obj = new fn;

3. fn.prototype.a = 1;

4. console.log(obj.a);//1

关于原型对象，也是咱们再后面面向对象编程课程中非常重要的一节课。

方法

apply()和call()

每一个函数都包含两个非继承而来的方法：apply()和call()方法。这两个方法的用途都是在特定的作用域中调用函数，实际上等于函数体内this对象的值。

要想以对象o的方法来调用函数f()，可以使用call()和apply()

1. f.call(o);

2. f.apply(o);

假设o中不存在m方法，则等价于：

1. o.m = f;//将f存储为o的临时方法

2. o.m();//调用它，不传入参数

3. delete o.m; //将临时方法删除

例子：

1. window.color = "red";

2. var o = {color: "blue"};

3. function sayColor(){

4. console.log(this.color);

5. }

6. sayColor(); //red

7. sayColor.call(this); //red

8. sayColor.call(window); //red

9. sayColor.call(o); //blue

1. //sayColor.call(o)等价于:

2. o.sayColor = sayColor;

3. o.sayColor(); //blue

4. delete o.sayColor;

1. function sum(num1, num2){

2. return num1 + num2;

3. }

4. //因为运行函数的作用域是全局作用域，所以this代表的是window对象

5. function callSum1(num1, num2){

6. return sum.apply(this, arguments);

7. }

8. function callSum2(num1, num2){

9. return sum.apply(this, [num1, num2]);

10. }

11. console.log(callSum1(10,10));//20

12. console.log(callSum2(10,10));//20

1. function sum(num1, num2){

2. return num1 + num2;

3. }

4. function callSum(num1, num2){

5. return sum.call(this, num1, num2);

6. }

7. console.log(callSum(10,10)); //20

在非严格模式下，使用函数的call()或apply()方法时，null或undefined值会被转换为全局对象。而在严格模式下，函数的this值始终是指定的值

1. var color = 'red';

2. function displayColor(){

3. console.log(this.color);

4. }

5. displayColor.call(null);//red

1. var color = 'red';

2. function displayColor(){

3. 'use strict';

4. console.log(this.color);

5. }

6. displayColor.call(null);//TypeError: Cannot read property 'color' of null

应用

【1】找出数组的最大元素

javascript不提供找出数组最大元素的函数。结合使用apply方法和Math.max方法，就可以返回数组的最大元素

1. var a = [10, 2, 4, 15, 9];

2. Math.max.apply(null, a);//15

【2】将类数数组转换成真正的数据

1. Array.prototype.slice.apply({0:1,length:1});//[1]

【3】将一个数组的值push到另一个数组中

1. var a = [];

2. Array.prototype.push.apply(a,[1,2,3]);

3. console.log(a);//[1,2,3]

4. Array.prototype.push.apply(a,[2,3,4]);

5. console.log(a);//[1,2,3,2,3,4]

【4】绑定回调函数的对象

由于apply方法（或者call方法）不仅绑定函数执行时所在的对象，还会立即执行函数，因此不得不把绑定语句写在一个函数体内

1. <body>

2. <button id="btn">按钮</button>

3. </body>

4. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

5. <script type="text/javascript">

6. var o = {};

7. o.f = function() {

8. console.log(this === o);

9. }

10. $('#btn').on('click',function(){

11. o.f.apply(o);

12. });

13. </script>

bind()

bind()是es5新增的方法，这个方法的主要作用就是将函数绑定到某个对象

1. function f(){

2. return this.x + y;//这个是待绑定的函数

3. }

4. var o = {x : 1};//将要绑定的对象

5. var g = f.bind(o);//通过调用g(x)来调用o.f(x);

6. g(2);//3;

1. var sum = function(x,y){

2. return x+y;

3. }

4. var succ = sum.bind(null,1);

5. succ(2); //3，x绑定到1，并传入2作为实参y

1. function f(y,z){

2. return this.x + y + z;

3. }

4. var g = f.bind({x:1},2);

5. g(3); //6，this.x绑定到1，y绑定到2，z绑定到3

使用bind()方法实现柯里化可以对函数参数进行拆分

1. function getConfig(colors,size,otherOptions){

2. console.log(colors,size,otherOptions);

3. }

4. var defaultConfig = getConfig.bind(null,'#c00','1024*768');

5. defaultConfig('123');//'#c00 1024*768 123'

6. defaultConfig('456');//'#c00 1024*768 456'

posted @ 2019-06-04 18:06 马昌伟阅读(423) 评论(0) 收藏举报

刷新页面返回顶部

魔降风云变

函数

述

函数的声明

函数返回值

函数调用

【1】函数调用模式

【2】方法调用模式

【3】构造函数调用模式

【4】间接调用模式

函数参数

arguments

同名形参

参数个数

函数重载

参数传递

函数属性和方法

属性

length属性

name属性

prototype属性

方法

apply()和call()

应用

bind()

公告