js函数

js函数声明

1)普通函数的声明

function functionName(parameters) {
  执行的代码
}

2)函数表达数定义

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

上述定义之后,变量x可以作为一个函数使用:

var z = x(4, 3);

3)构造函数Function()定义

// 使用new关键字
var myFunction = new Function("a", "b", "return a * b");
// 不使用new关键字,使用普通函数定义
var myFunction = function (a, b) {return a * b}
var x = myFunction(4, 3);

4)函数作为对象调用

// arguments.length 属性返回函数调用过程接收到的参数个数
function myFunction(a, b) {
    return arguments.length;
}
// toString() 方法将函数作为一个字符串返回
function myFunction(a, b) {
    return a * b;
}

var txt = myFunction.toString();

js函数参数

1)显示参数与隐藏参数

函数显式参数在函数定义时列出。不需要指定参数的数据类型。

函数隐藏参数(arguments)在函数调用时传递给函数真正的值。js函数对隐藏参数的值和个数不进行检测。

2)默认参数

如果函数在调用时缺少参数,参数会默认设置为:undefined

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

function myFunction(x, y) {
    if (y === undefined) {
          y = 0;
    } 
}

或者:

function myFunction(x, y) {
    y = y || 0;
}
// 如果y已经定义 , y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。

如果函数调用时设置了过多的参数,参数将无法被引用,因为无法找到对应的参数名。 只能使用 arguments 对象来调用。

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;
}

3)通过值传递参数

在函数中调用的参数是函数的参数。

如果函数修改参数的值,将不会修改参数的初始值(在函数外定义)。

函数参数的改变不会影响函数外部的变量(局部变量)。

4)通过对象传递参数

在JavaScript中,可以引用对象的值。

因此我们在函数内部修改对象的属性就会修改其初始的值。

修改对象属性可作用于函数外部(全局变量)。

js函数调用

js中,this关键字指向函数执行时的当前对象。

1)作为函数调用

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

在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。myFunction() 和 window.myFunction() 是一样的。

当函数没有被自身的对象调用是, this 的值就会变成全局对象。在 web 浏览器中全局对象是浏览器窗口(window 对象)。该实例返回 this 的值是 window 对象:

function myFunction() {
    return this;
}
myFunction();                // 返回 window 对象

2)作为方法调用

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

3)使用构造函数调用函数

如果函数调用前使用了new关键字, 则是调用了构造函数。

这看起来就像创建了新的函数,但实际上 JavaScript 函数是重新创建的对象:

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}

// This creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"

构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。构造函数中this关键字没有任何的值。this的值在函数调用时new实例化对象时创建。

4)作为函数方法调用

call()和apply()是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。

function myFunction(a, b) {
    return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray);   // 返回 20
function myFunction(a, b) {
    return a * b;
}
myFunction.call(myObject, 10, 2);      // 返回 20

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

js闭包

1)全局变量和局部变量

全局变量可用于页面上的所有脚本,局部变量只能用于定义它函数的内部,对于其他函数或脚本代码是不可用的。

注意:变量声明如果不使用var关键字,即使它在函数内定义,也是一个全局变量。

2)js内嵌函数

内嵌函数可以解决“计数器困境”。在js中,所有函数都能访问他们上一层的作用域。

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}
//内嵌函数plus()可以访问父函数的counter变量

如果我们能在外部访问plus()函数,就能解决计数器困境。为了确保counter=0只执行一次,需要闭包。

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

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

// 计数器为 3

变量add指定了函数自我调用的返回值。add变量可以作为一个函数调用,访问函数上一层作用域的计数器。这个叫做js闭包。它使得函数拥有私有变量变成可能。计数器受匿名函数的作用域保护,只能通过add方法修改。

闭包是可访问上一层函数作用域里变量的函数,即使上一层函数已经关闭。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。