JavaScript函数

2016-05-17 本文已影响132人 Dev_hell03W

1. JavaScript函数定义

JavaScript使用关键字function定义函数. 函数可以通过声明定义, 也可以是一个表达式.

函数声明:

//例如:
function functionName(parameters) {
    //执行的代码
}

函数表达式:

例如:
var func = function (a, b) { return a * b; }
// 此函数是一个匿名函数, 函数存储在变量中, 不需要函数名称, 通常通过变量名来调用.

函数提升:

提升是javascript默认将当前的作用域提升到前面去的行为.
提升应用在变量的声明和函数的声明中.
因此, 函数可以再声明之前调用.
如:

myFunction(5);

function myFunction(y) {
    return y * y;
}

使用表达式定义的函数时无法提升.

自调用函数:

函数表达式可以"自调用";
自调用表达式会自动调用;
如果表达式后面紧跟(), 则会自动调用;
不能自调用声明的函数;
通过添加括号,来说明它是一个函数表达式;
例如:

(function () {
    var x = "Hello!!";      // 我将调用自己
})();

函数可作为一个值使用:

如:

// JavaScript 函数作为一个值使用：
function myFunction(a, b) {
    return a * b;
}
var x = myFunction(4, 3);

// JavaScript 函数可作为表达式使用：
function myFunction(a, b) {
    return a * b;
}
var x = myFunction(4, 3) * 2;

函数是对象:

在JavaScript中使用typeof操作符判断函数类型返回值是function, 但是将JavaScript函数描述成一个对象更加准确. JavaScript有属性和方法.

// arguments.length 属性返回函数调用过程接收到的参数个数：
function myFunction(a, b) {
    return arguments.length;
}

// toString() 方法将函数作为一个字符串返回:
function myFunction(a, b) {
    return a * b;
}

var txt = myFunction.toString();
// txt == function myFunction(a, b) { return a * b; }

2. JavaScript函数参数

JavaScript函数对参数的值(arguments)没有进行任何的检查.

函数的显示参数和隐式参数:

函数的显示参数在函数定义时候列出;
函数的隐式参数, 在函数调用时候传递给函数真正的值;

参数规则:

JavaScript函数定义时参数没有指定数据类型;
JavaScript函数对隐藏参数没有进行检测;
JavaScript函数对隐藏参数的个数没有进行检测;

默认参数:

如果函数在调用时候缺少参数, 参数会设置默认值: undefined.
这是可以接受的, 但是最好还是为参数设置一个值.

// 为函数参数设置默认值
function myFunction(x, y) {
    if (y === undefined) {
          y = 0;
    } 
}

// 或者，更简单的方式：
function myFunction(x, y) {
    y = y || 0;
}

Arguments对象:

JavaScript有个内置的对象 arguments对象;
arguments对象包含了函数调用的参数数组;

通过for循环很容易取出参数的值:

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

function findMax() {
    var i, max = 0;
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

通过值传递参数:

在函数中调用的参数是函数的参数;
如果函数修改参数的值, 将不会修改参数的初始值(在函数外部定义);
函数参数的改变不会影响函数外部的变量(局部变量);

通过对象传递参数:

在JavaScript中, 可以引用对象的值;
因此我们在函数内部修改对象的属性就会修改其初始值;
修改对象属性可作用于函数的外部(全局变量);

3. JavaScript函数调用

JavaScript有四种调用方式; 每种方式的不同在于this的初始化.

this关键字: 一般来说, this指向函数执行时的当前对象.

作为一个函数调用:

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // myFunction(10, 2) 返回 20

// 以上的函数不属于任何对象, 但是在JavaScript中始终是默认的全局对象. 在HTML中默认的全局对象是HTML页面本身, 所以函数属于HTML页面. 在浏览器中的页面对象是浏览器对象(window对象). 所以以上函数会自动变为window对象的函数. 

// 上面一段js代码等同于:
function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);    // window.myFunction(10, 2) 返回 20

//这是调用JavaScript函数常用的方法, 但不是良好的编程习惯, 全局变量, 方法或者函数容易造成命名冲突和bug.

全局对象:

当函数没有被自身对象调用时候, this的值就会变成全局对象.
在web浏览器中全局对象是浏览器窗口(window对象).

函数作为方法调用:

在JavaScript中, 可以将函数定义为对象的方法.
如:

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"

// fullName方法是一个函数, 函数属于对象, myObject是函数的持有者, this对象拥有JavaScript代码, 实例中的this的值是myObject对象.

4. JavaScript闭包

JavaScript变量可以是局部变量或者全局变量. 私有变量可以用到闭包.

废话不多说, 直接上闭包代码:

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// 计数器为 3
// 反正我是看了很久才看懂的. = 号右边其实就是一个自调用的函数, 在执行函数时候回自动调用一下, 执行自调用函数时候, 函数返回值是一个方法, 如代码所示, 自调用函数返回值被赋值给add变量, 到此为止, add=function(){ return counter += 1; }; 并且counter的值是0, counter的值被保存在自调用函数中, 并且只初始化一次.

JavaScript函数

1. JavaScript函数定义

2. JavaScript函数参数

3. JavaScript函数调用

4. JavaScript闭包

猜你喜欢

热点阅读