La relation entre la fonction Function et l'objet Object dans les compétences JavaScript_javascript

La fonction est le concept le plus couramment utilisé en JavaScript. La fonction en JavaScript est la fonction la plus simple avec laquelle démarrer, mais c'est aussi le concept le plus difficile à comprendre et à maîtriser en JavaScript.

Aujourd'hui, nous allons essayer de comprendre la fonction et l'objet. Parce que certaines personnes peuvent être confuses au début, quelle est la relation entre eux. Bien sûr, je ne suis pas exclu.

Remarque : Définition officielle : En Javascript, chaque fonction est en fait un objet fonction.

Regardons d'abord les deux codes les plus simples, qui sont également les plus faciles à comprendre.

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

Les deux premiers effets d'impression sont faciles à comprendre pour tout le monde. L'instance fn d'objet suivante est vraie, la même chose est vraie ici, à partir de la définition des fonctions : en JavaScript, toutes les fonctions sont en fait des objets de fonction. , ce n'est pas étrange. obj instanceof Function est faux, bien sûr, ce n'est pas étrange Parce que c'est un objet, pas une fonction

.

Regardons un autre code

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

Le code est très simple. Les deux structures en cours d'exécution sont vraies, pourquoi ? La première utilise la définition d'une fonction (une fonction en JavaScript est en fait un objet fonction), bien sûr, c'est vrai, mais qu'en est-il ? le deuxième ? Les objets sont aussi des fonctions ?

Object est aussi une fonction Parce que la structure de Object est la fonction Object(){code natif}.

Sous cette forme, il est très clair qu'il s'agit d'une fonction Objet déclarée, qui est bien sûr une fonction, donc les deux sont vraies.

Les codes d'implémentation de leurs deux fonctions Fonction et Objet sont bien sûr différents. Comment ils sont implémentés, nous n'étudierons pas en détail si vous souhaitez étudier, vous pouvez comprendre les connaissances pertinentes du navigateur

.

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

La différence entre document.ready et onload - Événement d'achèvement du chargement du document JavaScript

Il y a deux événements lorsque la page est chargée

Le premier est prêt, ce qui signifie que la structure du document a été chargée (hors fichiers multimédias non textuels comme les images)

Le second est onload, qui indique que tous les éléments de la page, y compris les images et autres fichiers, ont été chargés.

Beaucoup de personnes qui utilisent jQ commencent à écrire des scripts comme celui-ci :

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

En fait, c'est l'abréviation de jq ready(), qui équivaut à :

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

C'est la méthode de jq ready() qui est Dom Ready. Sa fonction ou sa signification est la suivante : vous pouvez faire fonctionner le DOM une fois le DOM chargé.

Généralement, l'ordre dans lequel une page répond en premier au chargement est le suivant : résolution du nom de domaine - chargement du HTML - chargement des js et css - chargement des images et autres informations.

Ensuite, Dom Ready devrait être entre "Chargement de js et css" et "Chargement d'images et autres informations", vous pourrez alors utiliser Dom.

Méthode 1.window.onload

⑴Délai d'exécution :

Il est exécuté une fois que tous les éléments de la page Web (y compris tous les fichiers associés aux éléments) sont complètement chargés dans le navigateur, c'est-à-dire que JavaScript peut accéder à tous les éléments de la page Web à ce moment-là.

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

⑵Utilisations multiples :

L'événement onload de JavaScript ne peut enregistrer qu'une référence à une fonction à la fois, et il écrasera automatiquement la fonction précédente par la dernière fonction.

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

Méthode 2.$(document).ready()

⑴ Calendrier d'exécution : Il peut être appelé lorsque le DOM est complètement prêt. (Cela ne veut pas dire que les fichiers associés à ces éléments ont été téléchargés)

Par exemple : la méthode $(document).ready() peut fonctionner lorsqu'elle sait que le DOM est prêt, et il n'est pas nécessaire d'attendre que toutes les images soient téléchargées.

⑵Utilisations multiples :

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