cet objet en Javascript

Cet article présente principalement cet objet en Javascript, qui a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Concernant l'utilisation de ceci, nous rencontrons le plus souvent The. les principaux sont dans les fonctions globales, dans les méthodes objet, lors de l'appel et de l'application, dans les fermetures, dans les fonctions fléchées et dans les classes

Nous savons que cet objet est lié en fonction de l'environnement d'exécution de la fonction au moment de l'exécution. Décidément, la valeur de this n'est pas déterminée avant l'appel de la fonction, cela fera donc référence à différents objets lors de l'exécution du code. Quelle instance d'objet appelle la fonction où elle se trouve, cela représente alors quelle instance d'objet.

1. Fonction globale

Dans la fonction globale, ceci est égal à fenêtre

var name = "Tina";function sayName() {
    alert(this.name);
}
person();//Tina

Ici, puisque la fonction person() est exécutée dans l'environnement global et est également appelée person() par l'objet window dans la portée globale, cela pointe donc à ce moment vers la fenêtre ; objet. Lorsque cette fonction est affectée à l'objet o et que o.sayName() est appelée, this fait référence à l'objet o, donc l'évaluation de this.name devient l'évaluation de o.name.

 name = "Tina"

2. Méthodes objets

🎜 >Lorsqu'une fonction est appelée comme méthode d'un objet, cela est égal à cet objet

var name="Tina";var obj={
      name="Tony",
      getName: function() {
            alert(this.name);
      }
};
obj.getName();//"Tony"

3.call ; ( ) et apply() et bind()

Nous savons que call(ctx, parm1,parm2,parm3...) et apply(ctx,[parms]) Le but est d'appeler des fonctions dans une portée spécifique, ce qui équivaut en fait à définir la valeur de cet objet dans le corps de la fonction

function sum(num1, num2)  {      return num1+num2;
}function callSum1(num1, num2) {      return sum.apply(this, [num1, num2]);
}function callSum2(num1,num2) {      return sum.call(this, num1, num2);
}
alert(callSum1(10, 10)); //20alert(callSum2(10, 10));//20

Dans le Dans l'exemple ci-dessus, callSum1() et callSum2() transmettent this comme valeur this lors de l'exécution de la fonction sum() (car ils sont appelés dans la portée globale, donc l'objet window est transmis en fait, call et apply sont les) ; le plus puissant L'avantage est qu'il peut étendre la portée dans laquelle la fonction s'exécute ; regardez l'exemple suivant :

window.color="red";var o={ color: "blue"};function sayColor() {
      alert(this.color);
}
sayColor();//"red"sayColor.call(this);//"red"sayColor.call(window);//"red"sayColor.call(o);//"blue"

La méthode bind() créez une instance de la fonction, sa valeur sera liée à la valeur transmise à la fonction bind(). Par exemple :

window.color="red";var o={ color: "blue" };function sayColor() {
    alert(this.color);
}var objsayColor = sayColor.bind(o);
objsayColor();//"blue"

Un autre scénario d'utilisation est la liaison de fonction. Pour créer une fonction, la liaison de fonction peut spécifier des paramètres dans un environnement spécifique. . Cette technique est souvent utilisée avec les fonctions de rappel et les gestionnaires d'événements pour préserver l'environnement d'exécution du code tout en passant la fonction en tant que variable.

var handler = {
      message: "Event handled",
      handleClick : function(event) {
            alert(this.message);
      }
};var btn = document.getElementById("my_btn");
btn.addEventListener("click", handler.handleClick, false);

Lorsque le bouton est enfoncé, cette fonction est appelée et une boîte d'avertissement s'affiche Bien qu'il semble que la boîte d'avertissement doive afficher Événement géré, en fait, ce qui est montré n'est pas défini. La raison en est que l'environnement d'exécution de handler.handleClick() n'est pas enregistré, donc cet objet pointe finalement vers le bouton DOM au lieu du gestionnaire (dans IE8, cela pointe vers la fenêtre). Une façon de résoudre ce problème consiste à utiliser une fermeture.

var handler = {
      message: "Event handled",
      handleClick : function(event) {
            alert(this.message);
      }
};var btn = document.getElementById("my_btn");
btn.addEventListener("click", function(event){
      handler.handleClick(event);
}, false);

Cette solution utilise une fermeture dans le gestionnaire d'événements onclick pour appeler directement handler.handleClick(). Bien sûr, cela est spécifique à cette application. Extrait de solution de code. Nous savons que la création de plusieurs fermetures peut rendre votre code difficile à comprendre et à déboguer. Par conséquent, de nombreuses bibliothèques JS implémentent une fonction qui peut lier une fonction à un environnement spécifié. Cette fonction est généralement appelée bind(); ECMAScript 5 définit une méthode native bind() pour toutes les fonctions, et son utilisation est la suivante :

var handler = {
      message: "Event handled",
      handleClick : function(event) {
            alert(this.message+":"+event.type);
      }
};var btn = document.getElementById("my_btn");
btn.addEventListenr("click", handler.handleClick.bind(handler), false);

Une simple fonction bind() prend un argument et un environnement et renvoie une fonction qui appelle la fonction donnée dans l'environnement donné et tous les paramètres sont passés inchangés . La syntaxe est la suivante :

function bind(fn, context) {      
return function() {            
return fn.apply(context, arguments);
      };
}

Cette fonction crée une fermeture dans bind(). La fermeture utilise apply pour appeler la fonction entrante et donne apply Pass. l'objet contexte et un tableau d'objets arguments. Les objets arguments ici sont destinés aux fonctions internes (fonctions anonymes), pas aux paramètres de bind(). Lorsque la fonction renvoyée est appelée, elle exécute la fonction passée dans l'environnement donné et donne tous les arguments.

La méthode native bind() est similaire à la méthode bind() précédemment personnalisée, qui nécessitent toutes deux de transmettre l'objet comme cette valeur. Ils sont principalement utilisés dans les gestionnaires d'événements et setTimeout() et setInterval(). La liaison joue souvent le même rôle que la fonction de flèche dans la liaison dans le traitement des événements de réaction.

4. Fermeture

Parfois, en raison des différentes manières d'écrire les fermetures, l'utilisation de cet objet dans les fermetures peut poser certains problèmes ;

var name = "The window";var object = {
      name: "My Object",
      getNameFunc: function() {            
      return function() {                  
      return this.name;
            };
      }
};
alert(object.getNameFunc()());//"The window"

由于getNameFunc()返回一个函数，因此调用object.getNameFunc()()就会立即调用它返回的函数，结果就是返回一个字符串"The window"，即全局变量的值，此时匿名函数没有取得其包含作用域（外部作用域）的this对象。原因在于内部函数在搜索两个特殊变量this和arguments时，只会搜索到其活动对象为止，因此永远不可能直接访问外部函数中的这两个变量。这时，只需把把外部作用域中的this对象保存在一个闭包能够访问到的变量里，就可以让闭包访问该对象了。

var name = "The window";var object = {
      name: "My Object",
      getNameFunc: function() {            
      var that = this;            
      return function() {                  
      return that.name;
            };
      }
};
alert(object.getNameFunc()());//"My Object"

//节流function throttle(fn, delay) {      
var previous = Data.now();      
return function() {             
var ctx = this;             
var args = arguments;             
var now = Data.now();             
var diff = now-previous-delay;              
if(diff>=0) {
                    previous = now;
                    setTimeout(function() {
                         fn.apply(ctx, args);
                    }, delay);
              }
       };
}

5. 箭头函数

我们知道，箭头函数有几个需要注意的点：

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象；

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误；

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用rest参数代替；

（4）不可以使用yield命令，因此箭头函数不能用作Generator函数；

这里我们只谈论第一点；this对象的指向是可变的，但在箭头函数中，它是固定的；

function foo() {
      setTimeout(() => {
          console.log('id: ', this.id);
      }, 100);
}var id=21;
foo.call({id: 31});//id: 31

上述代码中，setTimeout是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它真正加入到执行栈后还要等到100毫秒后才会执行，如果是普通函数，此时的this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id：31}）所以输出的是id: 31；

箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域。下面是另一个例子：

function Timer() {      this.s1 = 0;      this.s2 = 0;
      setInterval(() => this.s1++, 1000);
      setInterval(function() {            this.s2++;
      }, 1000);
}var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);//s1: 3setTimeout(() => console.log('s2: ', timer.s2), 3100);//s2: 0

上面代码中，Timer函数内部设置了两个定时器，分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域（Timer函数)，后者的this指向运行时所在的作用域(即全局对象)。所以，3100毫秒后，timer.s1被更新了3次，timer.s2一次都没更新。

箭头函数可以让this指向固定化，这种特性很有利于封装回调函数。下面代码将DOM事件的回调函数封装在一个对象里面。

var handler = {
      id: '123456',
      init: function() {
            document.addEventListener('click',
                event => this.doSomething(event.type), false);
      },
      doSomething: funcition(type) {
            console.log('Handling ' + type + ' for ' + this.id);
      }
};

上面代码的init方法中，使用了箭头函数，这导致这个箭头函数里面的this，总是指向handler对象。否则，回调函数运行时，this.doSomething这一行会报错，因为此时this指向document对象。this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码的this。正是因为它没有this，所以也就不能用作构造函数。由于箭头函数没有自己的this，所以当然不能用call()、apply（）、bind()改变this的指向。

6. class

类的方法内部如果含有this，它默认指向类的实例。

class Logger {    /*constructor() {
        this.printName = this.printName.bind(this);
    }*/
    printName(name = 'Nicolas') {        this.print(`Hello ${name}`);
    }
    print(text) {
        console.log(text);
    }
}
const logger = new Logger();
const { printName } = logger;
printName();

上面代码中，printName方法中的this，默认指向Logger类的实例。但是，如果将这个方法提取出来单独使用，this会指向该方法运行时所在的环境，因为找不到print方法而导致报错。一种简单的解决方法就是在构造函数中绑定this。而另一种方法是使用箭头函数：

class Logger {
    constructor() {        this.printName = (name='Nicolas') => {            this.print(`Hello ${name}`);
    }
    print(text) {
        console.log(text);
    }
}
const logger = new Logger();
const { printName } = logger;
printName();

还有一种方法是使用Proxy，获取方法的时候，自动绑定this。

function selfish (target) {
  const cache = new WeakMap();
  const handler = {
    get (target, key) {
      const value = Reflect.get(target, key);      if (typeof value !== 'function') {        return value;
      }      if (!cache.has(value)) {
        cache.set(value, value.bind(target));
      }      return cache.get(value);
    }
  };
  const proxy = new Proxy(target, handler);  return proxy;
}
const logger = selfish(new Logger());

 以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

foreach, for in, for of 之间的异同

Vue+Electron实现简单桌面应用

JS定时器和单线程异步特性

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!