>> Tous les droits, encore aujourd'hui, Je vais parler
sur JavaScript et comment il est différent des autres langues
que vous seriez peut-être utilisé à aimer PHP.
Ainsi, dans la dernière conférence sur Lundi, nous avons parlé un peu
sur ce qui est similaire, ce qui est familier entre JavaScript
et PHP ou Python ou Ruby ou C ou d'autres langues
que vous êtes déjà familier.
Mais il fait le JavaScript a une prise de vraiment unique
sur le modèle d'objet qui fait il sorte de tout à fait différent
que la plupart des langues vous allez traiter.
Alors fonctions sont une sorte
de sous-estimé concept JavaScript.
Ils sont beaucoup plus puissants que ils sont dans d'autres langues
parce qu'ils peuvent dans - pour une raison,
ils sont capables d'être définir comme valeurs.
Donc, ici, nous avons var x est égal à la fonction
et c'est une première classe valeur qui peut être transmis
autour comme un argument.
Donc, vous n'avez pas à déclarer la fonction x
et il suffit d'utiliser x que portée.
Vous pouvez passer la valeur de x partout partout, vous le savez,
comme un argument en une autre fonction
où vous pouvez le module d'exportation David mentionné dans le noeud.
Ainsi, le point suivant est
qu'une fonction est un objet en JavaScript.
Ainsi, vous pouvez effectivement mis en propriétés que les valeurs
sur une fonction et traiter seulement qu'il l'aiment est un objet.
Ainsi, lorsque vous travaillez avec jQuery, vous le savez, ce dollar
puis vous passez un sélecteur en ce
et l'invoquer en fonction.
Mais alors, vous aussi ont dollar dot AJAX.
Et qui n'a pas de genre de sens que si vous pensez
d'une fonction comme étant quelque chose que vous pouvez appeler
ou appeler.
Mais JavaScript vous permet d' définir des propriétés sur les fonctions
propriétés statiques avec juste x someProp point
comme je le disais il.
Le prochain point que nous sommes va aller dans un peu plus
en profondeur, c'est le fait que fonctions peuvent être traités
que les classes dans JavaScript.
Donc, il ya le concept de ce nouvel opérateur
ce qui crée une nouvelle instance de la fonction avec une sorte
de comme corps de la classe comme qui vient avec elle
et nous allons aller dans un peu plus,
ça s'appelle le prototype.
Et c'est ce qui est marques JavaScript très unique par rapport
dans d'autres langues qui sont basées classe,
JavaScript est un prototype basé.
Et puis juste à bas il,
fonction peut seulement être appelé clairement que nous sommes habitués.
Donc, ce n'est pas nouveau.
Une autre chose qui est unique est
que les tableaux sont en fait objets.
Ils ne sont pas comme ils sont en PHP
où vous venez de créer un nouveau tableau.
Il s'agit en fait d'un raccourci pour dire nouveau tableau.
Et le réseau est en fait une sous-classe d'un objet.
Donc, c'est quelque chose différent et je vais
dans un peu plus d'un détails à ce sujet.
Et les capacités de mise au point
avec JavaScript sont vraiment inégalée autant que je l'ai vu.
Il s'agit d'une capture d'écran de l'inspecteur Chrome
que nous allons être en utilisant pour le reste
de la présentation d'aujourd'hui.
Et pour arriver à cela, il suffit aller à déposer les outils de développement
et ouvert inspecteur Chrome ou vous pouvez faire un clic droit
puis cliquez sur Afficher l'élément I pense que c'est à la page HTML
ou je pense que c'est la commande l'option J ouvre cela.
Mais nous irons là-dessus et vous peut réellement définir des points d'arrêt
que vous utilisez par le code JavaScript et tri
de évaluer ce local variables sont, quelle est la valeur
de la présente et est elle rend moyen plus facile de déboguer le code.
Et à ne pas - ce n'est pas contrainte au code côté navigateur
mais vous pouvez réellement exécuter une instance
de cette inspecteur Chrome pour votre code côté de service
qui est vraiment bien parce que vous peut avancer ligne par ligne
comme une demande entre dans votre serveur et voir ce qui se passe
et de jouer avec les variables dans la console ici.
Donc, comme je l'ai mentionné, JavaScript est un langage basé sur un prototype
ce qui signifie qu'il existe un ensemble des valeurs par défaut qui sont en quelque sorte
de caché pour chaque fonction
dans le point de l'objet propriété prototype.
C'est donc une sorte de hachage valeur par défaut, différents
que lorsque vous appelez un fonctionner avec le nouveau mot-clé,
ceux-ci sont fixés par par défaut comme des fonctions
qui sont disponibles sur l'instance.
C'est donc en réalité vraiment efficace pour la -
c'est un moyen efficace de mémoire de création d'objets sage
parce que le JavaScript exécution n'a plus qu'à suivre
du prototype de l'objet.
Il sorte de relève à ce
lorsque vous cretae une nouvelle instance d'une classe.
Et vous pouvez également imiter héritage comme il est connu
dans les langues basés sur les classes où vous avez sorte
de comme un présent qui s'étend, s'étend que vous pouvez imiter
que dans JavaScript par ce qu'on appelle la
chaîne de prototype.
Et nous voyons des exemples à ce sujet.
Donc, si votre - plugins jQuery en fait, ils recommandent jQuery
auteurs à utiliser point de dollar fn pour ajouter des fonctionnalités
à la bibliothèque jQuery.
Et nous allons en fait atteindre - Donc, sur cette page,
nous avons le dollar - J'ai inclus jQuery.
Et si vous faites dollar dot dans la console
dont j'ai parlé apportant vous à travers commande décalage J
ou tout simplement aller voir, Outils développeur, développeur
et aller à l'onglet Sources.
[Inaudible Remarque]
Oh, bien sûr. Alors, quand j'ai commencé à à taper dans une variable,
il est auto-complété pour moi ce qui est disponible là-bas.
J'ai donc tapé dans dollar et je ne peux vois je pense que Chrome a une certaine
intégré dollar, dollar et dollar x.
Donc maintenant je veux juste dollar et j'ai mis dans un point.
Et puis il me montre toutes les propriétés
qui sont disponibles sur l'objet jQuery.
Mais si je fais dollar point prototype,
Je vois maintenant toutes les méthodes que je suis habitué à l'aide
quand j'ai le dollar, le sélecteur et puis j'ai chaîne hors qu'avec,
vous le savez, ajouter la classe ou ajouter ou de flou ou l'un des autres.
Ce sont tous fait sur le prototype
qui sous le capot le jQuery crée une nouvelle instance de lui-même
et il sorte de masquer les détails de votre part.
Ainsi, le point que je n'étais faire revenir ici
avec la fonction, ils effectivement cacher prototype de vous
et juste alias il à dollar dot fn.
Donc, la plupart des gens en fait ne réalisent pas
qu'il existe un prototype sous les that capot -
que vous pouvez exploiter et ajouter des fonctionnalités supplémentaires
à chaque instance jQuery si vous le souhaitez.
Ainsi, la «nouvelle» est l'opérateur vraiment un peu difficile
à comprendre au premier abord.
Lorsque vous appelez une fonction avec «nouveau»,
c'est un tout autre façon d'appeler la fonction
comme si vous venez d'appeler clairement.
Ainsi, le "nouveau" opérateur crée ce qu'on appelle une nouvelle instance
d'un objet ou d'une nouvelle instance de, vous pouvez penser
de l'objet en tant que classe.
Et lorsque cela se produit, la valeur de ce qui peut être familier
avec de jQuery, ils sorte de définir cette
à ce qui est commode à ce moment.
Ils sont généralement mis à la nœud DOM courant que vous êtes
sur que vous allez à travers comme chacun ou quelque chose comme ça.
Ils - Cette valeur est censée être la valeur de l'instance
que vous avez créé avec «nouveau», qui comprend tout
sur la chaîne de prototype et toute des méthodes que vous trouveriez
comme propriétés de prototype.
Donc, cela dépend de la façon dont une fonction est appelée,
ce que la valeur de ce est.
Et il est vraiment déroutant si vous êtes nouveau dans le JavaScript.
Mais toutes les fonctions que l'on appelle a un - a à cette valeur.
Donc, même si vous n'avez pas créé une nouvelle instance de quelque chose,
On suppose que ce être globale.
Ou vous pouvez appeler une fonction en utilisant le procédé d'appel
où la méthode apply en JavaScript.
Vous pouvez la fonction et préciser ce que cela devrait être.
Ainsi, vous pouvez le rendre dynamique, qui est vraiment puissant
mais vous permet également de faire choses qui peuvent être trompeuses
et source de confusion pour d'autres développeurs
s'ils ne sont pas utiliser pour le fait.
Et jQuery, je dirais rend encore plus confuse
en rendant commode et sa mise en
au noeud de courant DOM.
Mais la règle simple à retenir ce que la valeur de ce est
lorsque vous êtes à la recherche
à un appel fonctionnelle est ce qui reste de la dot.
Donc si vous avez un objet
et c'est quelque chose point quelque chose est la fonction
que vous appelez alors le première valeur est ce que la valeur
de ce est.
Voici donc un exemple de code
où je crée un nouvel objet littéral
qui est juste l'objet créé avec les accolades
et je suis la mise en nom de Bob
et puis j'ai une sayName méthode qui ici -
donc au cœur de ce sayName si je ne x les points sur sayName,
la valeur de ce est égal pour x, car la gauche
le point est de x. Donc, si Je l'appelle x point sayName,
il dire Bonjour Bob.
Et puis un autre exemple
où je suis en train de l'attribution x point sayName, la fonction
à la variable Y, qui, comme je l'ai mentionné
en JavaScript vous peut assigner des fonctions
aux variables chaque fois que vous voulez, c'est vraiment souple de cette façon,
mais maintenant quand je l'appelle Y, il a perdu le contexte de x.
Donc, c'est maintenant ou mondiale si vous êtes en mode strict,
Je crois que c'est nul ou undefined.
Mais - Alors Y n'est pas ce que vous êtes attendre ici si vous êtes à la recherche
à x et vous allez appeler sayName,
vous vous attendez à ce nom est censé être Bob.
Mais si vous avez tiré au large l'objet et l'a appelé
par elle-même, cela est maintenant mondiale.
Et c'est ce que je disais quand vous voyez dollar dot ce,
souvent, vous ne pensez pas ce qui se passe réellement.
Mais jQuery a en quelque sorte de leur propre langage spécifique au domaine
pour faire face à cela et ce n'est pas ce que vous avez l'habitude
au JavaScript.
Et je le signale parce que c'est vraiment important
pour écrire bien structuré code orienté objet
en JavaScript pour vraiment une bonne compréhension et maîtrise
de comment cela fonctionne et comment les œuvres de modèle d'objet
et comment le nouvel opérateur fonctionne.
Sinon, vous finirez avec spaghetti jQuery
où tout est en quelque sorte de partout
et que le traitement avec le DOM.
Si vous pouvez réellement écrire JavaScript
d'une manière plus structurée, il est beaucoup plus facile
de travailler avec, pour trier de séparer les préoccupations
de l'utilisation de la mettre à jour le DOM et traitant
avec la logique réelle et le code.
Donc, nous allons jeter un oeil à un quelques exemples autour de cela.
J'ai donc quelques exemples ici.
Donc, c'est juste un exemple simple de l'aide d'un objet JavaScript
et ajoutant quelques fonctions , pour ensuite créer de tri
de comme une application miniature.
Il est donc très simple en fait.
La seule chose qu'il fait est au début, il demande à votre nom.
Alors je vais dire Tim et alors vous peut changer votre nom de Bob.
Et c'est tout ce application fait.
Mais ce que je tiens à souligner c'est comment il le fait.
J'ai donc ce générateur de nom objet qui possède une méthode de démarrage
qui demande à l'utilisateur leur nom
simplement en l'appelant ce askForName
qui ici-bas, il ne l'invite
si le nom n'a pas été attribué alors il demande à nouveau
en appelant cette askForName.
Et puis une fois qu'il obtient le nom, il appelle de ce nom de la mise à jour.
Donc cela crée alors le le nom de l'utilisateur dans la balise h1.
Et si le nom n'est pas défini, il lève une erreur.
[Inaudible Remarque]
Oh, bien sûr. Donc, il définit la le nom de l'utilisateur dans la balise h1
en appelant SetDisplayName qui définit le HTML
dans le conteneur du nom et JS Je précéder toute ma HTML
avec sélecteurs JS juste parce que c'est une bonne habitude à prendre
en juste à faire ce pas confondre
lorsque vous utilisez sélecteurs comme ID de ou des classes
à la fois le style et la logique
dans votre JavaScript applications frontales.
Parce que si vous avez différents groupes de personnes travaillant
sur la base de code et vous y avoir un sélecteur
que le concepteur décide changer parce C'est -
ne semblent pas grandes, alors ils veulent de mettre en une nouvelle classe et prendre
à la vôtre et vous comptez sur elle à des fins JavaScript,
puis votre code casse.
Il est bon de faire précéder et trier
de l'espace de noms comme presque la Les classes JavaScript liées
ou des attributs de un préfixe de JS.
Donc c'est assez simple et vous pouvez voir
dans tous les cas je suis appelant retourner cela à la fin.
Donc, c'est une bonne habitude à prendre,
pour vous donner une valeur de retour valide.
En askForName Je ne suis pas parce que cela fait sens
que vous souhaitez obtenir le nom dos.
Mais qu'est-ce qui permet vous faites alors
si vous renvoyez cette mise à jour nom, c'est le retour de la valeur
de SetDisplayName qui est renvoyer la valeur de ce produit.
Et qui vous permet de trier de la chaîne que vous avez l'habitude
à jQuery en retournant la valeur de ce à chaque fois.
Ceci fait référence à l' objets actuels
de sorte que vous pouvez appeler ce point askForName point SetDisplayName
et il tiendra le valeur de ce et vous permettre
d'avoir une belle chaîne il.
Et puis en - de sorte à ce second exemple.
[Pause]
Très bien.
OK. Donc, nous allons aller de l'avant et d'ouvrir la console
et allez à l'onglet Mes Sources.
Nous sautons sur ce fait.
Ainsi, dans le développeur Chrome outils que j'ai mentionnés,
il ya cette pièce et sur la droite a -
vous pouvez voir ce panneau d'arrêt bien que par défaut, il est noir.
Mais quand vous passez la souris dessus, il dit "Ne pas faire de pause sur les exceptions.
Cliquez sur la pause sur toutes les exceptions. "
Et lorsque vous cliquez dessus de plus, il devient bleu.
Et maintenant, à tout moment que il ya une erreur renvoyée
dans votre code JavaScript, ça va s'arrêter au point et vous permettra
d'évaluer ce qui se passe.
Donc - Et c'est vraiment un utile concept est sur le point de le souligner.
Et puis si vous cliquez sur de plus, il devient violet
et ceci est normalement ce que je garde po
Il ne brise le code quand il existe une exception
qui n'a pas été pris.
Ainsi, un grand nombre de fois dans jQuery pour Ainsi, ils essaient captures
pour tester si ou non un navigateur a une sorte de capacité
et continuer à partir de là.
Ce n'est que lorsque il ya une erreur
cela n'a pas été pris dans une prise try.
Donc, nous allons essayer de formuler un nom qui est vide.
Donc, je peux voir que le code est maintenant arrêté
à la méthode de updateName et je peux la souris sur les noms
et de voir qu'il est vide à vide.
Il c'est égal à vide.
Donc, si pas nommer jeter un nouveau erreur et maintenant je ne peux pas en arrière
grâce à la fonction colonne et dire, "OK,
où cela vient-il, "et voir ce que la valeur de client est.
Ainsi, il a procédé askForName,
SetDisplayName début et updateName.
Et ce n'est qu'un très utile Ainsi, vous pouvez voir encore tout le
variables disponibles en ce que la portée ainsi
que les variables de fermeture, donc tout ce qui est fermé
en charge par cette fonction.
Et si je vois que - quelle est la valeur de client est
et ce que la valeur de ce est.
Donc ce parce que nous sommes dans jQuery est égale
à l'élément de DOM courant.
Mais c'est vraiment utile pour le débogage de code
se briser sur des erreurs de ce genre.
Une autre caractéristique de l' Inspecteur Chrome est
qu'à tout moment vous pouvez cliquez sur les différentes lignes
dans la ligne et ça va briser sur les lieux
où vous avez défini des points d'arrêt ils sont appelés.
Donc, si je clique, la ligne devient bleu.
Alors permettez-moi de continuer l' exécution ici, OK, qui a éclaté.
Et maintenant, nous allons définir le nom Alice et appuyez sur Soumettre.
Alors maintenant, je peux voir même avant il est arrivé au point
de mettre à jour tout, c'est maintenant arrêté ici pour que je puisse voir
que mon nom est Alice ce et alors je peux continuer -
permettez-moi de recharger la page.
Très bien, alors maintenant que c'est à partir de début de nouveau,
il s'est arrêté à ce ligne et je peux voir
ce nom est actuellement undefined.
askForName est qui fonctionne il est, de sorte que c'est aussi souvent utile
si vous avez des fonctions qui sont provenant de différents fichiers
ou des endroits différents dans le code, vous pouvez voir où il est,
et puis sautez à cela, l'affiche en surbrillance.
C'est si bon de prendre l'habitude d'utiliser des outils de débogage
qui ne sont pas seulement consoler journal de point.
OK, nous allons donc jeter un regarder un deuxième exemple
ce qui rend plus l'utilisation de prototypes comme je l'avais fait allusion.
Donc, dans cet exemple,
nous créons un nouveau fonction appelée CS
et c'est capitalisés si la norme de convention
en JavaScript est si un fonction est supposée être utilisé
en tant que constructeur, par opposition
à juste une normale fonction, vous capitalisez il.
J'ai donc capitale CS et ce prend un CourseID variables
et qui courseTitle Je me mis à ce CourseID,
ce courseTitle dans le constructeur.
Et puis j'ai aussi mis étudiants et des conférences que des tableaux vides.
Donc, la raison que vous -
OK, donc le prototype propriétés ont ensuite été définis
ici-bas - alors modèle est juste un soulignement simple,
modèle, un modèle de soulignement être un moyen que vous pouvez -
similaire aux modèles que David avait mentionné
sur le serveur, vous pouvez il suffit d'écrire une balise de script
qui n'est pas un JavaScript script, mais un HTML texte
et ce que je fais avec jQuery est -
il ne garde pas les ouvert, ouais, là nous allons.
Avec jQuery, il se fait l' valeur HTML de ce modèle
puis l'exécuter à travers le souligner bibliothèques d'utilitaires
moteur de template.
Ainsi, la documentation pour ce qui est ici
dans le cadre du modèle d'utilité
mais, fondamentalement, vous pouvez lire un peu plus à ce sujet.
Mais il évalue cette chaîne et le transforme en une fonction
que nous pourrons transmettre des données et en ce appeler dynamiquement.
Les deux méthodes suivantes j'ai sont addStudent et addLecture.
Ces suffit de les ajouter à la tableaux internes que je me suis fixés
dans le constructeur et alors la méthode render.
Donc, nous allons créer la nouvelle instance de CS appelé 164
qui a cours nombre 164 et le titre.
Et puis CS50 qui a CS50 et intro à CS1
puis ajouter un peu Cours magistraux étudiants
et puis appelez CS50 rendre.
Et si je n'ai code, de sorte Je fais ça avec Eval.
Vous ne voulez vraiment utiliser Eval, mais je suis en quelque sorte
de prendre toutes les JavaScript c'est ici
et l'exécuter à la volée.
Il rend en ce Modèle ces nouvelles instances
de la classe CS qui ont les propriétés, nous sommes passés
à travers et fait addLecture et à chaque addStudent.
Et comme je l'ai parce que je suis de retour ce,
Je peux effectivement enchaîner les appels addLecture et addStudent
et ça va marcher tout aussi bien.
L'autre caractéristique de JavaScript c'est encore plus utile
sur le côté serveur, où vous avez vraiment à un moment donné
si votre application obtient plus ne savent pas où vous êtes
et il est plus difficile de mettre en ces points d'arrêt individuels
que je l'ai mentionné dans l'inspecteur Chrome est
d'utiliser le mot-clé du débogueur.
Donc, c'est juste D-E-B-U-G-G-E-R.
Et quand vous mettez un débogueur mot-clé dans votre code
et vous avez le - là, nous allons, deux Gs.
Lorsque vous mettez le débogueur mot-clé dans votre code
et vous utilisez un débogueur
tels que le chrome Inspecteur ici
ou le chrome côté serveur Inspecteur, il raconte JavaScript
pour arrêter l'exécution de cette ligne de code, puis elle vous permet
pour parcourir le reste de l'exécution de codes.
Donc, si je clique sur le code de l'exécution ici, il est maintenant l'arrêt
à cette ligne de débogueur et je peux Voir OK, voici la valeur de CS50
et il s'agit d'un cours obtenu titre, bien sûr ID,
il possède pas de cours, pas d'étudiants.
Et puis, je peux parcourir l'ensemble addLecture,
Je peux le voir, c'est pousser à ces conférences,
souris sur que, "Bonjour le monde".
Je peux effectivement dans le console le faire si ce paramètre est réglé
à l'objet courant que vous êtes po
Cette conférence est "Bonjour tout le monde".
Et gardez pas à pas par autant que je veux.
Si je ne veux pas à l'étape
dans la cause d'un appel de fonction ' Je sais ce que cela va
à faire entrer dans addLecture, il ya ce bouton ici
qui dit "Step cours de la prochaine appel de fonction, "et si je peux aller
au point si je suis peut-être demander quelque chose.
Comme par exemple 164 rendu.
Donc, à ce stade, il est va être rendu.
Je peux voir ce modèle est le modèle compilé.
Je peux voir à ce point, je devrait avoir deux étudiants
et deux conférences.
Et puis il ya le prototype chaîne que je faisais allusion.
Donc celui par défaut qui vient avec juste un objet
en JavaScript en général,
il est livré avec deux cordes valeur de constructeur.
Et puis ceux qui J'ai ajouté sur moi-même
avec la addLecture, addStudent et ensuite les propriétés
qui sont propres à ce instance de la classe
comme il a été invoqué avec le nouveau mot-clé.
Alors, faisons un seul plus exemple sur ce
et puis nous entrons dans une certaine des choses plus intéressantes
sur le côté serveur.
Allons donc de l'avant et ouvrir ce dernier exemple qui est -
Voyons, où est le code?
Je ne sais pas où cela allait.
OK, bien, nous pourrions juste sauter sur ce code, puis fait -
oh attendez, je pense que j'ai manqué la feuille de style pour le code.
OK, donc nous allons faire ce un peu plus grand.
Dans cet exemple, je montre un peu plus sur la mise en
dans la chaîne de prototype,
si la mise en place d'héritage avec le JavaScript.
Donc dans ce cas, nous avons un catalogue qui va
à maintenir vraisemblablement plusieurs cours.
Et si un catalogue a un méthodes de addCourse.
Il vérifie donc si le cours qui est passé en est un exemple
bien sûr, comme invoqué avec le nouveau mot-clé.
Donc, si vous essayez d'envoyer et
dans quelque chose de différent, il va hurler à vous.
La méthode render qui sera rendre chacun des cours
en compilant son modèle ci-dessous.
Et nous avons le cours dont l'accès
dans ce cas, la classe de base pour cours de chaque ministère.
Et au lieu de définir chaque
du point de cours prototype de méthode de point
ou bien en utilisant le prolonger helper dans la bibliothèque de soulignement
pour trier des appels prolonger ce prototype avec toute
de ces propriétés, qui est utile, un peu plus facile à lire.
Et puis ici faire ce qui est connu comme la mise
dans la chaîne de prototype.
Donc, c'est en fait un peu difficile pour les personnes à la première
et même encore avoir fait ce pendant un certain temps, c'est une sorte de disque
pour envelopper autour de votre tête.
Mais ne vous laissez pas effrayer.
Je suis donc mise en place d'une nouvelle -
une toute nouvelle classe objet ici, CS.
Et dans le constructeur,
Je veux dire bien sûr appliquer ces arguments.
Donc arguments est une spéciale valeur Je suppose que vous pourriez l'appeler
en JavaScript, le mot-clé qui a tout
du tout ce qui est passé le long est arguments
cette fonction sont disponibles avec les arguments appellent,
le mot d'arguments.
Donc, comme je vous appelle avec bien sûr dot s'appliquer,
c'est le contexte actuel avec laquelle CS est appelé.
Alors, quand je l'invoque avec la nouvelle c'est un - c'est une valeur de CS.
Et je dis appeler cette Bien sûr méthode ici.
Oh, pardon - appeler cette méthode de cours ici
mais définir la valeur de cette être quelle que soit la valeur
de cela est juste ici.
Donc, le mot-clé permet s'appliquer vous sorte de modifier l'état
de ce qui est de savoir comment jQuery est autorisé à régler l'interrupteur
ce sur vous vous allez à travers
et faire un des éléments DOM à la place de l'objet jQuery.
Alors maintenant, je vais mettre une fonction temporaire
qui va attirer l' prototype du cours.
Et une sorte de régler à son prototype
puis définissez le prototype sur l'objet de la fonction CS
à une nouvelle instance de cela.
Donc, fondamentalement, je suis dire à la place -
si je l'ai fait ici CS point prototype est égale nouveau cours.
Ensuite, il serait appelant tout
dans cette fonction constructeur,
que je ne veux pas nécessairement voulu.
Donc tout ce que je fais est sorte de créer presque
comme une fonction de substitution qui aura le prototype de cours
sur elle et une sorte de imiter le prototype -
le cours, mais sans faire tout dans le constructeur
et définir que pour le prototype.
Et puis je suis ajoutant ainsi le département
dans ce cas est l'ordinateur Sciences pour l'objet CS.
Et puis j'ai une sorte de version pont de le faire.
Il ne fonctionne pas dans IE9.
C'est pour ça que je voulais pour montrer sorte de faire -
Qu'est-ce que fait sous le capot.
Mais vous pouvez le régler vers le haut de la même façon
où Econ est égal fonction Bien sûr appliquer ces arguments
puis dire prototype Econ point égaux objet point CreateCourse
prototype point.
Donc ça crée un nouvel objet qui n'est que le prototype
pour le cours et définir le département il.
Alors maintenant, nous allons juste aller mettre un débogueur ici et cliquez sur Exécuter.
Nous y voilà.
Donc, CS164, nous pouvons voir l' chaîne de prototype, nous avons le
propriétés qui étaient définie dans le constructeur.
Ainsi les valeurs de ceux-ci qui ont été mis en puis, dans la chaîne de prototype
pour l'objet CS il avait département informatique définie.
Et puis sur le sous-jacent chaîne de prototype,
nous avons alors tous les méthodes et propriétés
qui sont propres à l'objet du cours.
Et puis nous avons les objets de base.
Donc, ce genre de rapide exemple de la chaîne de prototype.
Et comme vous pouvez le voir ici, il sont deux valeurs par département.
Donc, il ya département de l'informatique
puis département ne figurant pas qui je l'ai dit
que la valeur par défaut ici.
Ainsi, la chaîne de prototype est en fait juste un seul
liste de liens.
Et comme il essaie de trouver une propriété,
il va commencer à la haut niveau de valeur.
Donc, ce qui la définie dans la fonction constructeur
puis sorte de descendre l' chaîne à partir de là de prototype.
Donc, parce qu'il a constaté, de manière -
si ici, je dis CS50 Département point,
il dira Informatique.
Mais si je dis var -
[Pause]
Mais si je dis humaines égaux nouveau cours
et alors je dis humaines dot département,
Je verrai département ne figurant pas parce qu'il est allé à la première -
Je peux regarder le prototype chaîne ici en fait.
Alors il alla d'abord le cours objet et vu qu'il n'y a rien
sur la chaîne de prototype à ce niveau pour le département
ou pour les valeurs du service de sorte puis il passe à l'étape suivante,
cours et regards transmettre là et le trouve.
Donc, c'est juste un peu comme descend du haut vers le bas
et c'est une sorte de quelque chose qui est unique
sur Javascript que vous pouvez modifier
de ces valeurs à un moment donné.
Donc, dans le constructeur ou dans un méthode individuelle sur l'objet
si je veux régler cette département à quelque chose de nouveau,
ou si je veux encore à définir l'une de ces fonctions
qui sont déjà exister
à quelque chose de nouveau, Je suis libre de le faire.
Donc maintenant j'ai CS50 point addLecture, ressemble à cela.
Et si je veux mettre à CS50 addLecture correspond exactement
à la fonction vide.
Alors maintenant je peux voir, c'est juste complètement changé
que vous n'êtes pas en mesure à faire une autre langue
où vous avez une stricte héritage de classe sur la base
et tout est sorte de mettre en place.
JavaScript est très, très souple en ce qui concerne cela.
OK, nous allons revenir en arrière dans les glissières.
Donc, si par exemple vous serait toujours comme une fonction
d'avoir un particulier cette valeur définie pour elle.
Vous pouvez appeler la fonction point bind
et définir ce que la valeur de ce qui devrait être.
Vous pouvez penser que c'est -
«Je suis en train de penser à un bon exemple du monde réel, mais ",
si vous voulez protéger votre code
contre quelqu'un potentiellement appelant à une valeur
ce ne serait pas cela.
Comme par exemple AJAX callback comme l'excès ou d'erreurs.
Ceux-ci sont généralement pas appelé
avec une bonne sémantique La valeur de ce produit.
Et vous êtes comme, "OK, j'ai toujours veux que ce soit la valeur
de l'objet de cours que je travaille avec.
Ou le point de vue que je suis travailler avec dans mon code
que représente ce Nœud DOM, vous pouvez définir -
vous pouvez lier le contexte de cette et puis quand il a appelé plus tard
par jQuery et il n'a pas de bonne valeur de ce que ça va coller
à ce que vous bounded avec.
Ensuite, il ya l'appel de fonction ont été vous pouvez spécifier le contexte
et spécifier une variable nombre d'arguments.
Et puis il ya la fonction appliquez laquelle vous pouvez passer
dans le cadre et alors soit un tableau
ou les arguments des objets qui J'ai mentionné que vous voyez là.
Et les arguments en toute fonction que vous appelez,
vous pouvez simplement taper dans le mot «arguments»
et il va falloir tout les arguments.
Il possède une propriété "longueur"
qui est la façon dont les arguments peuvent avoir été effectivement passé à ce que les méthodes
car en JavaScript vous pouvez trier des appels
avec un nombre variable d'arguments.
Il est utile de dire si cela avait un argument,
puis suivez ce chemin de code.
Si elle a eu deux, vous pourriez vouloir suivre une autre voie.
Il vous permet d'avoir vraiment API dynamiques pour vos méthodes.
Vous pouvez penser que avec jQuery
comme lorsque vous avez dollar dot ou bind.
Et il sorte de ne des choses différentes
quant à savoir si vous mettez un argumentation, deux ou trois
ou démarrer avec une fonction.
Il utilise les arguments propriété
et les arguments longueur dans beaucoup de cas,
d'avoir cette magie fonctionnalité arriver.
Les choses que vous ne pouvez pas faire avec arguments est l'utilisent juste
par défaut comme un tableau.
Ainsi, vous pouvez dire arguments trois et mettez-le à quelque chose
comme vous pourriez l'aide l'affectation de tableau.
Vous pouvez utiliser le - beaucoup des méthodes de soulignement
soit pour les collections ou pour travailler avec des tableaux,
vous pouvez passer des arguments et il va se rendre compte
que c'est un des arguments objet et de tri
de prendre soin de cela pour vous.
Mais si vous souhaitez utiliser le arguments qui sont passés
par l'intermédiaire d'une fonction sous forme de tableau,
vous pouvez utiliser soulignement dot deux ensemble.
L'un du nombre des fonctions d'utilité
qui sont en construction à souligner.