The relationship between Function function and Object object in JavaScript_javascript skills

Function is the most commonly used concept in JavaScript. Function in JavaScript is the easiest function to get started with, but it is also the most difficult concept to understand and master in JavaScript.

Today we will try to understand Function and Object. Because some people may be confused about this in the early stage. What is the relationship between them. Of course, I am not excluded.

Note: Official definition: In Javascript, every function is actually a function object.

Let’s look at the two simplest codes first, which are also 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 first two printing effects are easy for everyone to understand. The following fn instanceof Object is true. The same is true here, from the definition of functions: In JavaScript, all functions are actually function objects. So if it is true, it does not It’s strange. obj instanceof Function is false, of course it’s not strange. Because it is an object, not a function.

Let’s look at another code

console.log(Function instanceof Object); // true
console.log(Object instanceof Function); // true

The code is very simple. Both of the running structures are true, why? The first one uses the definition of a function, (a function in JavaScript is actually a function object), of course it is true, but what about the second one? Objects are also functions?

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

In this form, it is very clear that it is an Object function declared, which is of course a function, so both of them are true.

The implementation codes of their two Function and Object functions are of course different. How they are implemented, we will not study in detail. If you want to study, you can learn about the relevant knowledge of the browser.

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

The difference between document.ready and onload - JavaScript document loading completion event

There are two events when the page is loaded

The first is ready, which means that the document structure has been loaded (excluding non-text media files such as images)

The second is onload, which indicates that all elements of the page including images and other files have been loaded.

Many people who use jQ start writing scripts like this:

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

In fact, this is the abbreviation of jq ready(), which is equivalent to:

$(document).ready(function(){
//do something
})
//或者下面这个方法，jQuer的默认参数是：“document”；
$().ready(function(){
//do something
})

This is the method of jq ready() which is Dom Ready. Its function or meaning is: you can operate the DOM after the DOM is loaded.

Generally, the order in which a page responds to loading first is: domain name resolution - loading html - loading js and css - loading images and other information.

Then Dom Ready should be between "Loading js and css" and "Loading images and other information", then you can operate Dom.

1.window.onload method

⑴Execution timing:

It is executed after all elements in the webpage (including all associated files of the elements) are completely loaded into the browser, that is, JavaScript can access all elements in the webpage at this time.

window.onload=function(){ $(window).load(function(){
//编写代码 等价于 //编写代码
} });

⑵Multiple uses:

JavaScript's onload event can only save a reference to one function at a time, and it will automatically overwrite the previous function with the last function.

function one()
{ alert("one");
}
function two()
{ alert("two");
}
window.onload=one;
window.onload=two; //运行代码后只有 two

2.$(document).ready() method

⑴ Execution timing: It can be called when the DOM is completely ready. (This does not mean that the files associated with these elements have been downloaded)

For example: The $(document).ready() method can operate when it knows that the DOM is ready, and there is no need to wait for all images to be downloaded.

⑵Multiple uses:

function one(){ alert("one");
}
function two(){ alert("two");
} $(document).ready(function()
{ one(); });
$(document).ready(function()
{ two();
}); //运行代码后 //先是：one //先是：two