Relationship between Function functions and Object objects in JavaScript _ javascript skills

This article mainly introduces the relationship between Function functions and Object objects in JavaScript. For more information, see Function is the most common concept in javascript, the function in javascript is the easiest function to start with, but it is also the most difficult concept for javascript to understand.

Today, let's try to understand functions and objects, because some people may be confused in the early stage. What is the relationship between them? Of course, no exception exists for me.

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

Let's first look at the simplest two codes, which are also the easiest to understand.

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

The effects of the previous two prints are easy to understand. the fn instanceof Object is true. the same is true here. From the definition of a function: In javascript, all functions are actually function objects. so it is not surprising that it is true. obj instanceof Function is false, of course not surprising. because it is an object, not a function.

Let's take a look at the code.

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

The code is very simple. The running structure is both true. Why? The first function is defined as a function (the function in javascript is actually a function object). Of course, it is true. What about the second function? Is the object a function?

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

In this form, it is clear that the declared Object function, of course, is a function, so both are true.

The implementation code of the two functions and the Object Function is certainly different. how they are implemented, so we don't have to worry about it in detail. If you want to think about it, you can learn about the browser.

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

Differences between document. ready and onload -- JavaScript document loading completion events

There are two types of page loading events

Ready indicates that the file structure has been loaded (excluding non-text media files such as images)

The second is onload, which indicates that all elements on the page including images and other files are loaded.

Many people who use jQ write scripts like this:

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

In fact, this is short for jq ready (), which is equivalent:

$ (Document ). ready (function () {// do something}) // or the following method, the default parameter of jQuer is: "document"; $ (). ready (function () {// do something })

The jq ready () method is Dom Ready. Its function or significance is that DOM operations can be performed after DOM loading is complete.

Generally, the loading order of a page response is: domain name resolution-loading html-loading js and css-loading images and other information.

Then Dom Ready should be able to operate Dom between loading js and css and loading other information such as images.

1. window. onload Method

(1) execution time:

All elements (including all associated files of elements) on the webpage are fully loaded into the browser before execution. That is, JavaScript can access all elements on the webpage.

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

(2) multiple use:

The JavaScript onload event can only store references to one function at a time. 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; // After the code is run, only two

2. $ (document). ready () method

(1) execution time: it can be called when DOM is fully ready. (This does not mean that the files associated with these elements have been downloaded)

For example, the $ (document). ready () method knows that DOM is ready to operate without waiting for all the images to be downloaded.

(2) multiple use:

Function one () {alert ("one");} function two () {alert ("two") ;}$ (document ). ready (function () {one () ;}); $ (document ). ready (function () {two () ;}); // after running the code // first: one // first: two