JavaScript函数小记

JavaScript中的 闭包:

1

function f1(){

2

    var N = 0; // N是f1函数的局部变量

3

4

    function f2(){ // f2是f1函数的内部函数，是闭包

5

6

        N += 1; // 内部函数f2中使用了外部函数f1中的变量N

7

        console.log(N);

8

    }

9

    return f2;

10

}

11

var result = f1();

12

result(); // 输出1

13

result(); // 输出2

14

result(); // 输出3

JavaScript中声明变量时,如果 不使用var关键字,那么它就是一个 全局变量,即便它在函数内定义

JavaScript函数可以通过一个表达式定义,函数表达式可以存储在变量中   

1

 var x = function(a,b){return a + b};

JavaScript中function()构造函数的写法:

1

var myFunction = new Function("a", "b", "return a * b");

2

var x = myFunction(4, 3);

但是实际上不必使用构造函数,上面实例可以写成

1

var myFunction = function (a, b) {return a * b}

2

var x = myFunction(4, 3);

在JavaScript中,很多时候,需要 避免使用new关键字

函数提升(Hoisting)

提升是JavaScript默认将当前作用域提升到前面去的行为,应用在变量的声明与函数的声明

因此, 函数可以再声明之前调用 的

1

myFunction(5);

2

function myFunction(y){

3

    return y*y;

4

}

5

//25

自调用函数

自调用表达式会自动调用,如果表达式后面紧跟(),则会自动调用

不能自调用声明的函数

通过添加括号来说明它是一个函数表达式

1

(function(){alert(111)})();

1

<p id="demo"></p>

2

<script>

3

(function () {

4

    document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";

5

})();

6

</script>

在JavaScript中函数是一个对象,使用typeof操作符判断函数类型将返回"function"

arguments.length属性返回函数调用过程接收的参数个数

1

<p> arguments.length 属性返回函数接收到参数的个数：</p>

2

<p id="demo"></p>

3

<script>

4

function myFunction(a, b) {

5

    return arguments.length; //2

6

}

7

document.getElementById("demo").innerHTML = myFunction(4, 3); //2

8

    alert(typeof myFunction); //function

9

    alert(myFunction.constructor) //function Function() { [native code] }

10

</script>

默认参数:
如果函数在调用时候未提供隐式参数,参数会默认设置为: undefined

有时这是可以接受的,但是建议最好为参数设置一个默认值:

1

<p id="demo"></p>

2

<script>

3

function myFunction(x, y) {

4

    if (y === undefined) {

5

        y = 1;

6

    }    

7

    return x + y;

8

}

9

document.getElementById("demo").innerHTML = myFunction(4);    //5

10

</script>

还可以用简写形式:

如果y已经定义, y || 返回y,因为y是true,否则返回1

这里就使用到了   undefined代表false,   !undefined代表true

1

<p id="demo"></p>

2

<script>

3

function myFunction(x, y) {

4

    y = y || 1;

5

    return x + y;

6

}

7

document.getElementById("demo").innerHTML = myFunction(4);    //5

8

</script>

Arguments对象:

为JavaScript函数的内置对象,包含了函数调用的参数数组,通过argument对象可以方便达到一些操作:

找到所有参数中最大的那一个:

1

x = findMax(1, 123, 500, 115, 44, 88);

2

3

function findMax() {

4

    var i, max = arguments[0];

5

6

    if(arguments.length < 2) return max;

7

8

    for (i = 0; i < arguments.length; i++) {

9

        if (arguments[i] > max) {

10

            max = arguments[i];

11

        }

12

    }

13

    return max;

14

}

统计所有参数的总和:

1

x = sumAll(1, 123, 500, 115, 44, 88);

2

3

function sumAll() {

4

    var i, sum = 0;

5

    for (i = 0; i < arguments.length; i++) {

6

        sum += arguments[i];

7

    }

8

    return sum;

9

}

函数作为方法调用:

在JavaScript中可以将函数定义为对象的方法(写框架时经常用的方式)

函数作为对象方法调用,会使得this的值成为对象本身

1

<p id="demo"></p>

2

<script>

3

var myObject = {

4

    firstName:"John",

5

    lastName: "Doe",

6

    fullName: function() {

7

        return this.firstName + " " + this.lastName;

8

    }

9

}

10

document.getElementById("demo").innerHTML = myObject.fullName(); 

11

</script>

JavaScript中 call方法和apply方法:

简单的说,call和apply是为了动态改变this而出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其他对象的方法来操作

通过call或apply方法可以设置this的值,且作为已存在对象的新方法调用

call与apply的区别是,call传入的是具体的一个一个参数,apply传入的是参数数组

1

function add(a,b)  

2

{  

3

    alert(a+b);  

4

}  

5

function sub(a,b)  

6

{  

7

    alert(a-b);  

8

}  

9

10

add.call(sub,3,1);    //通俗讲就是 要调用add这个方法,并且是在sub这个对象上调用的(可以理解为替换sub对象)

用法

1

function Animal(){    

2

    this.name = "Animal";    

3

    this.showName = function(){    

4

        alert(this.name);    

5

    }    

6

}    

7

8

function Cat(){    

9

    this.name = "Cat";    

10

}    

11

12

var animal = new Animal();    

13

var cat = new Cat();    

14

15

//通过call或apply方法，将原本属于Animal对象的showName()方法交给对象cat来使用了。    

16

//输入结果为"Cat"    

17

animal.showName.call(cat,",");     //通俗讲就是 要调用的是showName这个方法,并且是在cat这个对象上用的(可以理解为替换cat对象)

18

//animal.showName.apply(cat,[]);  

JavaScript的prototype属性:

prototype属性允许向对象添加属性和方法,注意:prototype是全局属性,适用于所有的JavaScript对象

JavaScript中大多使用的都是方法,属性只有三个,常用的只有一个length:

length,constructor,prototype