Quatre façons de lier ceci

Riz Meng 2021-10-13 17:25:15
quatre fa ons lier ceci


Connaissance préalable

this Qu'est - ce que c'est??

Quand une fonction est appelée,Crée un contexte d'exécution,Ce contexte d'exécution contiendra où la fonction est appelée、Comment appeler une fonction、Informations telles que les paramètres entrants.this Est une propriété d'un contexte d'exécution,Utilisé dans l'exécution de la fonction.

thisQuand la liaison apparaît

this Est lié au moment de l'exécution,Pas lié au moment de l'écriture.C'est - à - dire this Est la liaison qui se produit lorsque la fonction est appelée.Qu'est - ce que ça veut dire,Tout dépend de l'endroit où la fonction est appelée.thisNe pointe en aucun cas vers la portée lexicale de la fonction.

Règles de liaison

Liaison par défaut

Lors de la liaison par défaut,En mode strict,Impossible de parler d'objets globaux pour la liaison par défaut,thisSera lié àundefined.

function foo() {
console.log(this)
}
foo() // window
Copier le Code

Mode strict(strict mode):

function foo() {
 'use strict'
console.log(this)
}
foo() // undefined
Copier le Code

Liaison implicite

Lorsque la fonction fait référence à un objet contextuel,Une règle de liaison implicite va faire appel à une fonctionthisLié à cet objet contextuel.

Essentiellement,Quand on juge une liaison implicite,Doit être un objet contenant un attribut à l'intérieur de la fonction, Fonction de référence indirecte par cette propriété ,Pour mettrethisIndirect(Implicite) Lié à cet objet .

function foo() {
console.log(this.a)
}
const obj = {
a: 1,
foo: foo
}
obj.foo() // 1
Copier le Code

Propriétés de l'objet dans la chaîne de référence , Seule la position d'appel de la couche supérieure ou de la dernière couche fonctionne .

function foo() {
console.log(this.a)
}
const obj = {
a: 1,
foo: foo
}
const obj1 = {
a: 2,
obj: obj
}
obj1.obj.foo() // 1
Copier le Code

Perte implicite

  1. L'assignation de référence est implicitement manquante ;

    function foo() {
    console.log(this.a)
    }
    const obj = {
    a: 1,
    foo: foo
    }
    const bar = obj.foo
    bar() // undefined
    Copier le Code

    Attention!,bar En fait, je cite fooFonction elle - même, Donc la liaison par défaut est appliquée .À ce moment - là.this Pointagewindow.

  2. Perte implicite du passage des paramètres ;

    function foo() {
    console.log(this.a)
    }
    function doFoo(fn) {
    fn()
    }
    const obj = {
    a: 1,
    foo: foo
    }
    doFoo( obj.foo ) // undefined
    Copier le Code

    Passage des paramètres, C'est aussi une affectation implicite , La logique est la même que dans le cas précédent .

Liaison explicite

Lorsque la fonction est appelée, Force la fonction à se lier à this.Désignation directethis Objet lié à , C'est ce qu'on appelle une liaison explicite .Peut passercallapplybindRéalisation méthodologique.

function foo() {
console.log(this.a)
}
const obj = {
a: 1,
}
foo.call(obj) // 1
foo.apply(obj) // 1
const bindFoo = foo.bind(obj)
bindFoo() // 1
Copier le Code

Dur à lier

La liaison dure équivaut à bind. Redéfini à l'intérieur de la fonction thisPointage.

function foo() {
console.log(this.a)
}
const obj = {
a: 1,
}
const bar = function(){
foo.call( obj )
}
bar() // 1
bar.call(window) // 1
Copier le Code

Code ci - dessus,Même chose.bindLes effets de.

function foo() {
console.log(this.a)
}
const obj = {
a: 1,
}
const bar = foo.bind(obj)
bar() // 1
Copier le Code

newBIND

function foo(a) {
this.a = a
}
const bar = new foo(2)
console.log(bar.a) // 2
Copier le Code

UtilisernewPour appelerfoo(...)Heure,new L'implémentation interne construit un nouvel objet , Et le lier à foo(...)AppeléthisAllez..On appelle çanewBIND.

Priorité de liaison

Apparemment., Selon le cas ci - dessus ,Afficher les liens > Liaison implicite > Liaison par défaut.Alorsnew Lier et montrer quelle liaison est haute ?Par ici Dur à lier Pour tester les priorités .

function foo(value){
this.a = value
}
const obj = {
a: 1,
}
const bar = foo.bind(obj)
bar(2)
console.log(obj.a) // 2
const baz = new bar(3)
console.log(obj.a) // 2
console.log(baz.a) // 3
Copier le Code

Voilà., L'ordre de priorité de liaison est : newBIND > Afficher les liens > Liaison implicite > Liaison par défaut.

Nous pouvons adopter les quatre règles suivantes ,Jugementthis Objet lié à :

  1. ParnewAppelez?
  2. Parcall、apply、bindAppelez?
  3. Appelé par un objet contextuel ?
  4. Tout ce qui précède n'est pas satisfaisant , Est la liaison par défaut , Lié à undefined.

Liaison inattendue

nullOuundefinedEn tant quethis De l'objet lié à this Ignorer le problème

Prends ça.nullOuundefinedEn tant quethis Objet lié à Entréecall、apply、bind,À ce moment - là,, Ces valeurs sont ignorées lors de l'appel , Application pratique Est la liaison par défaut .

Si la fonction ne s'en soucie pas thisEt si,À ce moment - là,,Entréenull, En tant que substituant ,C'est un bon choix..

MaisUtilisernullPour ignorerthis La liaison peut avoir des effets secondaires . Si une fonction utilise this( Comme une fonction d'une bibliothèque tierce ), Cette règle de liaison par défaut ,Oui.Prends ça.this Lié à un objet global , Cela aurait des conséquences imprévisibles ( Comme modifier un objet global ).

Voilà., Nous devrions utiliser une méthode plus sûre ,Comme substituant.

Nous pouvons créer un objet vide non délégué Object.create(null).Ignorerthis Toujours passer un objet non délégué vide lors de la liaison , N'aurait aucun effet sur l'objet global .

function foo(value){
console.log(value)
}
var ø = Object.create(null)
foo.call(ø, 2) // 2
Copier le Code

Références indirectes

Pour créer une fonction “Références indirectes”,Dans ce cas, Appeler cette fonction applique la règle de liaison par défaut . Cela se produit facilement lorsque l'affectation est :

function foo() {
console.log(this.a)
}
const obj = {
a: 1,
foo: foo
}
obj.foo() // 1
const bar = obj.foo // Affectation
bar() // undefined
Copier le Code

Liaison souple

La liaison dure peut faire this Force la liaison à l'objet spécifié . Mais il y a un problème avec la liaison dure , Est de réduire la flexibilité de la fonction , Et ne peut plus être modifié avec une liaison implicite ou explicite après une liaison dure this Direction de.

Et la liaison souple peut résoudre le problème ci - dessus , Vous pouvez définir une liaison par défaut Objet globalEtundefinednull Valeurs autres que , Cela permet d'obtenir le même effet que la liaison dure ,En même tempsRéserve Une liaison implicite ou explicite est utilisée pour modifier this Capacité de.

Regarde ça. À propos de soft Binding Article de.Le Code d'implémentation est le suivant(Source::Tu n'en sais rien.JavaScript》Vol.):

if(!Function.prototype.softBind){
Function.prototype.softBind=function(obj){
var fn=this;
var args=Array.prototype.slice.call(arguments, 1);
var bound=function(){
return fn.apply(
// Déterminer le courant this, Si vous êtes lié à un objet global ou undefined,null,ModifierthisPour l'entréeobj,Sinon, rien.
(!this || this === (window || global)) ? obj : this,
args.concat.apply(args,arguments)
);
};
bound.prototype=Object.create(fn.prototype);
return bound;
};
}
Copier le Code

Voir l'effet:

var name = 'global'
const obj = {
name: 'obj',
foo: function () {
console.log(this.name)
}
}
const obj1 = {
name: 'obj1'
}
obj.foo() // => obj // Liaison implicite
setTimeout(obj.foo, 0) // Liaison par défaut thisPerdu,global
// Maintenant, nous utilisons une liaison souple 
const softFoo = obj.foo.softBind(obj)
setTimeout(softFoo, 0) // obj Liaison souple ,this Pointer vers le paramètre par défaut obj
softFoo.call(obj1) // obj1,Peut être utilisécall Changement explicite this
obj1.foo = softFoo
obj1.foo() // obj1, Soft BIND this Le pointage a été modifié avec succès par une liaison implicite ,Lié àobj1
setTimeout(obj1.foo, 0) // obj La fonction de rappel est équivalente à un paramètre implicite , Il y aurait une liaison par défaut qui this Lier global , Mais il y a une liaison souple ,Ici.thisOu pointerobj
Copier le Code

Fonctions fléchées

Syntaxe:

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
Copier le Code

Notes:

  • Les fonctions fléchées n'utilisent pas this Quatre règles standard pour ,Mais selon la couche externe,(Fonction ou global) Champ d'application pour déterminer this;
  • Les fonctions fléchées ne peuvent pas être utilisées comme constructeurs,new Fonctions fléchées() Erreur de programme ;
  • Même chose., Parce que la fonction flèche ne peut pas être utilisée comme constructeur , Il n'y a pas d'objet contextuel à l'intérieur , Ne peut pas non plus être utilisé argumentsObjet;

Résumé

C'est bon,C'est à propos de this Quelques introductions à,C'est expliqué. this Qu'est - ce que c'est?,this Quand la liaison apparaît,À propos de this Quatre types de reliures , Et les priorités de liaison, etc .C'est fini**ヽ(°▽°)ノ*~

版权声明
本文为[Riz Meng]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/10/20211013172431738A.html

  1. Error in spring source code compilation: the monoprocessor in reactor.core.publisher is outdated
  2. Buctf [geek Challenge 2019] http
  3. 20 个值得学习的 Vue 开源项目
  4. 20 projets open source à apprendre
  5. Scène et application de la manette des gaz anti - bavardage
  6. Qu'est - ce que j'ai gagné en abandonnant vue pour les six mois de React?
  7. À partir de [Bytecode cache] et de [http cache], intervieweur: « est - ce si mince? »
  8. [niveau intermédiaire et avancé] obligatoire, 30 + questions manuscrites à haute fréquence et réponses détaillées (dix mille caractères longs), voyez comment "vous" ne pouvez pas m'abattre
  9. Mise en œuvre d'un outil d'échafaudage universel pour l'ingénierie Web de 0 à 1
  10. 【中高级前端】必备,30+高频手写题及详细答案(万字长文),看“你”怎么难倒我
  11. In less than two days, the box office exceeded 400 million, and Changjin Lake broke out, breaking seven records in Chinese film history
  12. Tong Liya Jin Chen bumps her hair, Xie Na Zhao Liying bumps her shirt, and she sees EQ from the reaction
  13. react之组件生命周期
  14. L'équipe de vue dévoile un nouvel outil d'échafaudage rapide comme la foudre Create View, qui remplacera la vue CLI à l'avenir, avec seulement 300 lignes de code, apprenez - le!
  15. 20 dessins illustrant le fonctionnement du moteur de rendu du Navigateur
  16. In less than two days, the box office exceeded 400 million, and Changjin Lake broke out, breaking seven records in Chinese film history
  17. 千锋重庆web前端学习之理解CSS位置属性
  18. 什么是语义HTML标记以及如何使用它们?
  19. Si vous vous représentez avec un tableau, c'est le champ de Van Gogh.
  20. 前端面试手写代码
  21. 前端开发框架Vue中Vuex的使用原理分享
  22. vue-echarts初次体验
  23. 分享一些web前端开发好用的网站
  24. 每天读一点webpack-003
  25. react之组件生命周期
  26. Alibaba collection version of mybatis handwritten documents, Java front-end interview questions
  27. SpringBoot Java后端实现okhttp3超时设置
  28. react之組件生命周期
  29. Cycle de vie des composants de React
  30. 使用Reactor将阻塞调用变为异步非阻塞
  31. Baked cake wife sun photos, plain face on camera, beautiful appearance is still a beauty, watching children during the festival is a little helpless
  32. 亚洲知名插画师荒川(arakawa) 仅8件独版NFT作品系列《Can't Out》正式上架Element综合市场
  33. Taiyuan: singing, welcoming the national day, gathering to praise blessings
  34. Arakawa, un illustrateur Asiatique bien connu, n'a mis sur le marché que huit pièces de la collection NFT "can't out" en une seule édition.
  35. Résumé des questions d'entrevue Hadoop (II) - - hdfs
  36. 如何解决“Serverless”系统的冷启动问题
  37. BootstrapBlazor 模板安装
  38. BootstrapBlazor 模板安装
  39. Tong Liya Jin Chen bumps her hair, Xie Na Zhao Liying bumps her shirt, and she sees EQ from the reaction
  40. 使用ESLint+Prettier来统一前端代码风格
  41. 为什么说 Node.js 是实时应用程序开发的绝佳选择
  42. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  43. 使用elementui在完成项目中遇到的未知知识点2
  44. On the mechanism of webpack loader
  45. 云原生体系下 Serverless 弹性探索与实践
  46. vue开发技巧
  47. Une fleur merveilleuse de l'histoire de l'industrie des nouveaux véhicules énergétiques, Zhongtai Jiangnan T11, une voiture vintage que vous n'avez jamais vue
  48. 致敬!再见了!LayUI !
  49. Vue安装和卸载
  50. Implement a flipped character with the transform attribute of CSS
  51. 你的第一个 Docker + React + Express 全栈应用
  52. [apprentissage de l'algorithme] 1486. Fonctionnement exclusif du tableau (Java / C / C + + / python / go / Rust)
  53. Zhang Daxian sends a blessing video on xYG relay, showing positive energy in details
  54. 前端技巧-JS元编程ES6 symbol公开符号
  55. Article de 37 ans seul à l'hôpital!Il boitait, soupçonnait d'être blessé, souriait avec douleur
  56. 前端推荐!10分钟带你了解Konva运行原理
  57. npm ERR! iview-project@3.0.0 init: `webpack --progress --config webpack.dev.config.js
  58. 零基础学习Web前端需要注意什么呢?
  59. The Youth League promotes Yiyang Qianxi new film, and the relationship between the two generation and the generation is good. Li Fei is blessed.
  60. Qu'est - ce qu'il faut remarquer à l'avant - plan Web de l'apprentissage de base zéro?