Questions about calling methods in 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

Actually, this code does not call the function like this

takeNoteButton.onclick = createNote;

Pay attention to the code you write every day. Aren’t our calls to functions all in the form of xxxxx(), xxx.xxx() or xxx.call(), etc.?
You can understand this code as an assignment statement. The onclick attribute of takeNoteButton is assigned the function name createNote. The actual reference points to the specific function declared below.

In this way, when the browser monitors the click event of takeNoteButton, you can imagine that it actually makes a function call like takeNoteButton.onclick(event).

Let’s talk about the parameters below. The actual parameters passed in by the function call and the formal parameters of the function declaration are actually separate and do not need to be corresponding. Moreover, the parameters specified when declaring do not have to be passed in (will be treated as undefined). Call If the parameters actually passed in are not used in the declared function body, there is no problem at all.

For example, the function called when this event is clicked is called by the browser itself, and the event object is passed in as an actual parameter. Then working backwards, when we write a specific function body, we can use an event, e, abc, or any name that conforms to the specification as a formal parameter to obtain the actual parameters passed in. Of course, You don’t need formal parameters. You can also use the arguments array object to access the actual parameters passed in, such as:

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

In fact, this also provides us with ideas for parameter design when writing some component plug-ins. We can specify the actual parameters passed in when calling functions inside the components, and the specific value of this actual parameter can be designed as an exposed parameter for external use. Pass in, give a simple example of 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);
}

This code can be called through $().plugin() to output the default default a
You can also use $().plugin({a : '123'}) to pass in the specified parameters and output 123
The formal parameter of the function we actually wrote is still a, and the parameter passed in when actually calling the function is still options.a, and the default value of the external parameter is not passed in.

Answer 2

The function call in js has nothing to do with the number of line parameters. The function parameter of js is an arguments-like array, that is, if you pass in one parameter, the corresponding is arguments[0], if there are two parameters, it is arguments[0] and argument[1]. Therefore, the number of row parameters and actual parameters does not have to match exactly. The bottom layer of the function will match according to the number of parameters you pass in.

Answer 3

Of course it is possible, you can understand that onclick is a pointer, pointing to the createNote function, not actually calling it. Calling this onclick method is done by the browser, and the browser will pass in the e parameter.

Can understand the following code:

var obj = {
    onclick: null
};

function test(msg) {
    console.log(msg);
}

obj.onclick = test;

---

// 当点击事件发生以后
if (obj.onclick && typeof obj.onclick === 'function') {
    obj.onclick("这是我传进去的参数，相当于e");
}

Answer 4

In js, formal parameters and actual parameters do not necessarily have to correspond one to one. The event listening function is equivalent to a callback function.

When an event occurs, the browser will call this function and pass the event object in.

Answer 5

I think this question is somewhat flawed because you ask whether the function can be called? Of course it can be called because this function belongs to the next variable of window. In fact, functions are also variables! It's just special. There are formal parameters but not necessarily actual parameters. If the actual parameters you pass in are special or in another scope, you have to get the actual parameters before passing them. Otherwise, an error will be reported when you use this parameter