Pouvez-vous comprendre ce problème de pointage de JS ? jetez un oeil à cet article

Pouvez-vous comprendre ce problème de pointage de JavaScript ? L'article suivant vous parlera de ce problème de pointage ennuyeux, j'espère qu'il vous sera utile !

Le pointage de ceci

Dans les différentes introductions que nous avons vues sur la façon de déterminer les méthodes de pointage de ceci, "Cela pointe finalement vers l'objet qui l'appelle" Cette phrase est considérée comme le noyau , Mais face à des situations diverses, on a tendance à se perdre. Sur la base de ma compréhension de diverses situations, j'ai proposé une phrase "Flèches, timing et structure, attention particulière dans des situations particulières, appels normaux pour regarder le numéro de point, les points suivants ne regardent pas vers l'avant, puis jugent en fonction sur le principe le plus proche, et la dernière chose qui reste est la fenêtre ". [Recommandations associées : Tutoriel d'apprentissage Javascript]

Fonction flèche

La fonction flèche elle-même n'a pas cela, donc il n'y a pas de changement. Elle capture l'extérieur en utilisant

var name = "windowsName";
var a = {
    name: "Cherry",
    fn() {
      setTimeout(()=>{
        console.log(this.name); 
      },0)
    }
}

a.fn() //Cherry

Analyse : Tout d'abord, l'objet. a appelle la fonction fn, donc celle de la fonction fn pointe vers l'objet a, puis la flèche capture le this extérieur, alors ce n'est pas ceci dans setTimeout, mais celui de la fonction fn, donc finalement nous obtenons le nom dans l'objet a

timer

Pour la fonction de rappel à l'intérieur de la fonction de retard, cela pointe vers la fenêtre d'objet globale

var name = "windowsName";
var a = {
    name: "Cherry",
    fn() {
      setTimeout(function (){
        console.log(this.name); 
      },0)
    }
}

a.fn() //windowsName

Analyse : d'abord, l'objet a appelle la fonction fn, puis la fonction de rappel dans setTimeout, voici une fonction anonyme , qui est une fonction ordinaire, puis ceci dans la fonction anonyme Pointant vers la fenêtre

var name = "windowsName";
var b={
  name: "setTimeoutName"
}
var a = {
    name: "Cherry",
    fn() {
      setTimeout((function (){
        console.log(this.name); 
      }).bind(b),0)
    }
}

a.fn() //setTimeoutName

Analyse : Tout d'abord, l'objet a appelle la fonction fn, puis la fonction de rappel dans setTimeout, ici est une fonction anonyme, qui est une fonction ordinaire. this dans la fonction anonyme pointe vers window, mais utilisez bind pour changer la fonction anonyme. cela pointe vers l'objet b, donc le nom de famille dans l'objet b

Constructor

this dans le constructeur pointe vers l'objet d'instance créé. ,

Remarque : si un objet est renvoyé dans le constructeur, il ne sera pas créé lors de sa création. Il y aura un nouvel objet instance, mais cet objet renvoyé

function fn(){
  this.age = 37;
}

var a = new fn();
console.log(a.age); // 37
a.age = 38;
console.log(fn); // { this.age = 37; }
console.log(a.age); // 38

Analyse : Ici, nous créons l'objet instance a. via le constructeur, ce qui équivaut à ouvrir un nouvel emplacement et à copier le contenu du constructeur, et il y a actuellement un objet a. Cela pointe vers l'objet a. La modification du contenu de l'objet a n'affecte pas le constructeur

. Jugement du numéro de point

Utilisez . pour juger de l'intérêt et suivez le principe de proximité.判断this指向，遵循就近原则

var a = {
  age:10,
  b: {
      age:12,
      fn(){
          console.log(this.age); 
      }
  }
}
a.b.fn(); //12

解析：对象a调用对象b的fn函数，fn函数前面有两个.，那么最近的是对象b，所以fn函数的this指向的就是对象b，最后拿到的就是对象b的age

var a = {
  age:10,
  b: {
      age:12,
      fn(){
          console.log(this.age); //undefined
      }
  }
}
var c = {
  age:20,
}

var d = {
  age:30,
}
a.b.fn.bind(c).bind(d)(); //20

解析：对象a调用对象b的fn函数然后使用bind改变this的指向，这时候fn前后前后都有.，不看前面的.，只用看后面的，然后最近的bind改变this指向为c，那么此时fn函数的this指向的就是对象c，拿到的就是对象c的age

练习

function outerFunc() {
   console.log(this) // { x: 1 }
   function func() {
    console.log(this) // Window 
   }
   func()
} 

outerFunc.bind({ x: 1 })()

obj = {
  func() {
    const arrowFunc = () => {
      console.log(this._name)
    }

    return arrowFunc
  },

  _name: "obj",
}

obj.func()() //obj

func = obj.func
func()()  //undefined

obj.func.bind({ _name: "newObj" })()() //newObj

obj.func.bind()()() //undefined

obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })() //bindObj

apply、call、bind

使用 apply、call、bind 函数可以改变this的指向，上面this的例子中使用到

区别

thisArg , [ argsArray] call(thisArg, arg1, arg2, ...)

apply和call函数区别在于this后面传入的参数，apply中传的是一个数组，而call中传入的是展开的参数

bind(thisArg[, arg1[, arg2[, ...]]])()

• 然后bind函数创建的是一个新的函数，需要手动去调用
• 这个新函数的 this 被指定为 bind()rrreee
Analyse : L'objet a appelle la fonction fn de l'objet b. Il y a deux . devant la fonction fn, donc le plus proche est l'objet b, donc celle de la fonction fn pointe vers l'objet b, et la dernière chose qu'elle obtient est l'âge de l'objet b </code.> </ul>rrreee<p> Analyse : L'objet a appelle la fonction fn de l'objet b puis utilise bind pour changer la direction de celui-ci. À ce moment, il y a <code>. avant et après fn, quel que soit le .précédent. >. Il suffit de regarder au dos, puis la dernière liaison change ce point en c, puis ce point de la fonction fn pointe vers l'objet c, et ce que vous obtenez est l'âge de l'objet c

Exercice

rrreeerrreee

apply, call, bind

Utilisez la fonction apply, call, bind pour changer le pointeur de ceci Dans l'exemple ci-dessus, la différence

🎜 est utilisée🎜🎜🎜🎜thisArg, [ argsArray] call(thisArg, arg1, arg2, ...)🎜🎜La différence entre les fonctions apply et call réside dans les paramètres transmis après ceci Dans apply, un tableau est. passé, pendant l'appel, les paramètres développés sont passés dans🎜 🎜bind(thisArg[, arg1[, arg2[, ...]]])()🎜
• Ensuite, le La fonction bind crée une nouvelle fonction et doit être appelée manuellement 🎜
• ce de cette nouvelle fonction est spécifié comme premier paramètre de bind(), et les paramètres restants seront utilisés comme paramètres de la nouvelle fonction à utiliser lors de l'appel🎜 🎜🎜🎜S'il y a des erreurs, veuillez les corriger ! ! Merci à tous d'avoir lu ! 🎜🎜🎜🎜🎜Références🎜🎜🎜https://juejin.cn/post/6946021671656488991#comment🎜🎜🎜【Tutoriels vidéo associés recommandés : 🎜front-end web🎜】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!