html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

Javascript中的默认参数详解_基础知识_

[ ] 已经帮助:人解决问题

一些语言――像Ruby,CoffeeScript及即将到来的javascript版本――在定义一个函数的时候,可以声明默认参数,像下面这样:bfMHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
bfMHTML5中文学习网 - HTML5先行者学习网
function myFunc(param1, param2 = "second string") {bfMHTML5中文学习网 - HTML5先行者学习网
    console.log(param1, param2);bfMHTML5中文学习网 - HTML5先行者学习网
}bfMHTML5中文学习网 - HTML5先行者学习网

// Outputs: "first string" and "second string"bfMHTML5中文学习网 - HTML5先行者学习网
myFunc("first string");bfMHTML5中文学习网 - HTML5先行者学习网

// Outputs: "first string" and "second string version 2"bfMHTML5中文学习网 - HTML5先行者学习网
myFunc("first string", "second string version 2");bfMHTML5中文学习网 - HTML5先行者学习网

bfMHTML5中文学习网 - HTML5先行者学习网

不幸的是,在当前的javascript版本,这种写法的无效的。因此,我们能做些什么来实现这种方式,使用我们现有的工具集?bfMHTML5中文学习网 - HTML5先行者学习网

最简单的解决方式像这样:bfMHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
bfMHTML5中文学习网 - HTML5先行者学习网
function myFunc(param1, param2) {bfMHTML5中文学习网 - HTML5先行者学习网
    if (param2 === undefined) {bfMHTML5中文学习网 - HTML5先行者学习网
        param2 = "second string";bfMHTML5中文学习网 - HTML5先行者学习网
    }bfMHTML5中文学习网 - HTML5先行者学习网

    console.log(param1, param2);bfMHTML5中文学习网 - HTML5先行者学习网
}bfMHTML5中文学习网 - HTML5先行者学习网

// Outputs: "first string" and "second string version 2"bfMHTML5中文学习网 - HTML5先行者学习网
myFunc("first string", "second string version 2");bfMHTML5中文学习网 - HTML5先行者学习网

bfMHTML5中文学习网 - HTML5先行者学习网

事实是一个被省略的参数在访问时总是“undefined”。如果你只有一个参数,这是一个好的解决方式,当时如果有多个呢?bfMHTML5中文学习网 - HTML5先行者学习网

如果你多于一个参数,你可以使用一个对象作为参数,这样有一个优点是每个参数都有一个明确的命名。如果你传递一个对象参数,你可以使用相同的方式声明默认值。bfMHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
bfMHTML5中文学习网 - HTML5先行者学习网
function myFunc(paramObject) {bfMHTML5中文学习网 - HTML5先行者学习网
    var defaultParams = {bfMHTML5中文学习网 - HTML5先行者学习网
        param1: "first string",bfMHTML5中文学习网 - HTML5先行者学习网
        param2: "second string",bfMHTML5中文学习网 - HTML5先行者学习网
        param3: "third string"bfMHTML5中文学习网 - HTML5先行者学习网
    };bfMHTML5中文学习网 - HTML5先行者学习网

    var finalParams = defaultParams;bfMHTML5中文学习网 - HTML5先行者学习网

    // We iterate over each property of the paramObjectbfMHTML5中文学习网 - HTML5先行者学习网
    for (var key in paramObject) {bfMHTML5中文学习网 - HTML5先行者学习网
        // If the current property wasn't inherited, proceedbfMHTML5中文学习网 - HTML5先行者学习网
        if (paramObject.hasOwnProperty(key)) {bfMHTML5中文学习网 - HTML5先行者学习网
            // If the current property is defined,bfMHTML5中文学习网 - HTML5先行者学习网
            // add it to finalParamsbfMHTML5中文学习网 - HTML5先行者学习网
            if (paramObject[key] !== undefined) {bfMHTML5中文学习网 - HTML5先行者学习网
                finalParams[key] = paramObject[key];bfMHTML5中文学习网 - HTML5先行者学习网
            }bfMHTML5中文学习网 - HTML5先行者学习网
        }bfMHTML5中文学习网 - HTML5先行者学习网
    }bfMHTML5中文学习网 - HTML5先行者学习网

    console.log(finalParams.param1,bfMHTML5中文学习网 - HTML5先行者学习网
                finalParams.param2,bfMHTML5中文学习网 - HTML5先行者学习网
                finalParams.param3);bfMHTML5中文学习网 - HTML5先行者学习网
}bfMHTML5中文学习网 - HTML5先行者学习网
myFunc({param1: "My own string"});bfMHTML5中文学习网 - HTML5先行者学习网

bfMHTML5中文学习网 - HTML5先行者学习网

这是一个有点笨拙,如果你使用这种方式的地方很多,可以写个封装函数,幸运的是,现在好多库中带了相关方法,比如jQuery和Underscore中的extend方法。bfMHTML5中文学习网 - HTML5先行者学习网

下面使用Underscore的extend方法来实现上面相同的结果:bfMHTML5中文学习网 - HTML5先行者学习网

复制代码 代码如下:
bfMHTML5中文学习网 - HTML5先行者学习网
function myFunc(paramObject) {bfMHTML5中文学习网 - HTML5先行者学习网
    var defaultParams = {bfMHTML5中文学习网 - HTML5先行者学习网
        param1: "first string",bfMHTML5中文学习网 - HTML5先行者学习网
        param2: "second string",bfMHTML5中文学习网 - HTML5先行者学习网
        param3: "third string"bfMHTML5中文学习网 - HTML5先行者学习网
    };bfMHTML5中文学习网 - HTML5先行者学习网

    var finalParams = _.extend(defaultParams, paramObject);bfMHTML5中文学习网 - HTML5先行者学习网

    console.log(finalParams.param1,bfMHTML5中文学习网 - HTML5先行者学习网
                finalParams.param2,bfMHTML5中文学习网 - HTML5先行者学习网
                finalParams.param3);bfMHTML5中文学习网 - HTML5先行者学习网
}bfMHTML5中文学习网 - HTML5先行者学习网

// Outputs:bfMHTML5中文学习网 - HTML5先行者学习网
// "My own string" and "second string" and "third string"bfMHTML5中文学习网 - HTML5先行者学习网
myFunc({param1: "My own string"});bfMHTML5中文学习网 - HTML5先行者学习网

bfMHTML5中文学习网 - HTML5先行者学习网

这就是你如何能得到默认参数,在当前的javascript版本中。bfMHTML5中文学习网 - HTML5先行者学习网

文中不妥之处欢迎批评指正。bfMHTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助