javascript中关于方法的调用的疑问

Question

window.onload=init;
function init(){
    var takeNoteButton=document.getElementById("take-note");
    takeNoteButton.onclick=createNote;
}
function createNote(e){
    //dosomething
}

各位大神好，这段代码中对createNote函数的调用：
     takeNoteButton.onclick=createNote;
而实际的createNote(e)有个参数，这样也能调么！！

Answer 1

其实这段代码对函数的调用并不是这句

takeNoteButton.onclick = createNote;

留意一下日常写的代码，我们对函数的调用不都是 xxxxx()，xxx.xxx()或者xxx.call()等类似这样的形式吗？
而这句代码你可以理解为一个赋值语句，takeNoteButton 的 onclick 属性赋值为 createNote 这个函数名，实际引用指向下面声明的具体函数。

这样，浏览器在监听到takeNoteButton的点击事件发生的时候，你可以想象成，实际上就进行了takeNoteButton.onclick(event)这样的函数调用。

下面说下参数，函数调用传入的实参和函数声明的形参实际上是分开的，并不需要对应起来，并且声明时指定的参数不一定要传入（会作为undefined处理），调用时实际传入的参数，如果在声明的函数体内并没有用到，那也完全没有问题。

比如这个事件点击时调用的函数，它是由浏览器底层自己进行调用，并传入了事件对象作为实参。那么反推过来，我们在写具体的函数体的时候，可以用一个event也好，e也好，abc也好，随便一个符合规范的名字作为形参来取得实际传入的实参，当然也可以不用形参，用arguments这个类数组对象也能访问到实际传入的参数，比如：

var a = 1;
fn(a);
// 可以这样拿到a
function fn(param) {
    console.log(param);
}
// 也可以这样拿到a
function fn() {
    console.log(arguments[0]);
}

其实这也为我们写一些组件插件提供了参数设计的思路，在组件内部的函数调用上我们可以指定传入的实参，而这个实参具体的值可以设计为一个暴露出去的参数让外部传入，举个jQuery的简单栗子：

$.fn.plugin = function(option) {
    var defaultOp = {
        a : 'default a'
    };
    var options = $.extend(defaultOp, option || {});
    var fn = function(a){ console.log(a) };
    fn(options.a);
}

这段代码可以通过$().plugin()调用，输出默认的default a
也可以用过$().plugin({a : '123'}) 这样传入指定的参数，输出123
而我们实际写的函数，形参还是a，实际调用函数传入的参数还是options.a，并且做了外部不传入参数的默认值的处理。