The relationship between function functions and object objects in JavaScript _javascript skills

function is one of the most commonly used concepts in JavaScript, and function in JavaScript is one of the easiest to start with, but it is also one of the most difficult concepts that JavaScript can understand.

Today we try to understand the function and object. Because some of them might get confused in the early days. What is the relationship between them? Of course, not excepting me.

Note: Official definition: in JavaScript, each function is actually a function object.

Let's take a look at the simplest two code, which is the easiest to understand.

function fn () {}
var obj = {}
console.log (fn instanceof Function)//true
console.log (obj instanceof Object)/ /true
console.log (fn instanceof Object)//true
console.log (obj instanceof Function)//false

The previous two print results are easy to understand. The back FN instanceof object is true. Here too, from the definition of a function: All functions in JavaScript are actually function objects. So it's not surprising that it's true. The obj instanceof function is false, of course, not surprisingly. Because he is an object, not a function.

Let's look at one more code.

Console.log (Function instanceof Object); True
console.log (Object instanceof Function);//True

The code is simple. The run structure two are all true, why? The first is the definition of a function (in JavaScript the function is actually a function object), of course, true, and the second? object is also a function?

object is also a function. Because the structure of object is the function object () {native code}.

This form, very clear is declared an object function, of course, is the function, so two are all true.

Their two function and object functions implement the code, which of course is different. How they do it, then we do not go into detail, if you want to think about, you can understand the relevant knowledge of the browser.

ps:$ (function () {}) and $ (document). Ready (function () {})

The difference between Document.ready and onload--javascript document load completion event

There are two kinds of events for page load completion

One is ready, which means that the document structure has been loaded (not including pictures and other non-text media files)

The second is onload, indicating that the page contains pictures and other files, including all the elements are loaded complete.

A lot of people with JQ start writing scripts like this:

$ (function () {
//do something
});

In fact this is the shorthand for JQ ready (), which is equivalent to:

$ (document). Ready (function () {
//do something
})
//or the following method, the default parameters for Jquer are: "Document";
$ (). Ready ( function () {
//do something
})

This is the JQ ready () method is Dom ready, and his role or meaning is that the DOM can be manipulated after the completion of the load.

In general, the first page response load order is: Domain name resolution-load html-load js and css-loading pictures and other information.

Dom ready should be able to manipulate the DOM between "load JS and css" and "load pictures and other information".

1.window.onload method

⑴ Execution Time:

All elements in a Web page, including all associated files of the element, are not executed until they are fully loaded into the browser, that is, JavaScript can access all elements in the Web page at this time.

Window.onload=function () {$ (window). Load (function () {
//write code equivalent to/write code
}});

⑵ Multiple use:

The onload event of JavaScript can only save a reference to a function at a time, and he will automatically overwrite the previous function with the last function.

function one ()
{alert ("one");
} 
function two ()
{alert ("two"); 
}
Window.onload=one; 

2.$ (document)-Ready () method

⑴ execution Time: It can be invoked when the DOM is fully ready. (This does not mean that the files associated with these elements have already been downloaded)

For example: $ (document). The Ready () method does not need to wait until all pictures have been downloaded, knowing that the DOM is ready to be done.

⑵ Multiple use:

function one () {alert ("one"); 
} 
function two () {alert ("two"); 
} $ (document). Ready (function ()
{one ();}) 
; $ (document). Ready (function ()
{two (); 
});//Run code//First: one//First: Two