dieses Objekt in Javascript

In diesem Artikel wird hauptsächlich dieses Objekt in Javascript vorgestellt, das einen gewissen Referenzwert hat. Jetzt können Freunde in Not darauf verweisen.

In Bezug auf die Verwendung stoßen wir am häufigsten auf The Die wichtigsten sind in globalen Funktionen, in Objektmethoden, beim Aufrufen und Anwenden, in Abschlüssen, in Pfeilfunktionen und in Klassen.

Wir wissen, dass dieses Objekt basierend auf der Ausführungsumgebung der Funktion zur Laufzeit gebunden ist. Der Wert hierfür wird definitiv nicht vor dem Aufruf der Funktion bestimmt, sodass er sich während der Codeausführung auf verschiedene Objekte bezieht. Welche Objektinstanz die Funktion aufruft, in der sich diese befindet, dann repräsentiert dies welche Objektinstanz.

1. Globale Funktion

In der globalen Funktion entspricht dies dem Fenster

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

Da die Funktion person() in der globalen Umgebung ausgeführt wird, ist sie auch die person(), die vom Fensterobjekt im globalen Bereich aufgerufen wird. Daher zeigt dies zu diesem Zeitpunkt auf das Fenster Objekt. Wenn diese Funktion dem Objekt o zugewiesen wird und o.sayName() aufgerufen wird, bezieht sich dies auf das Objekt o, sodass die Auswertung von this.name zur Auswertung von o.name wird.

 name = "Tina"

2. Objektmethoden

Wenn eine Funktion als Methode eines Objekts aufgerufen wird, entspricht dies diesem Objekt

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

3.call() und apply( ) und bind()

Wir wissen, dass die Verwendung von call(ctx, parm1,parm2,parm3...) und apply(ctx,[parms]) Calling a ist Funktion in einem bestimmten Bereich entspricht tatsächlich dem Festlegen des Werts dieses Objekts im Funktionskörper;

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

Im obigen Beispiel sind callSum1() und callSum2( ) beim Ausführen der Funktion sum() wird dieser als dieser Wert übergeben (da er im globalen Bereich aufgerufen wird, also das Fensterobjekt übergeben wird, ist tatsächlich, dass dies möglich ist). Erweitern Sie den Bereich, in dem die Funktion ausgeführt werden soll. Sehen Sie sich das folgende Beispiel an:

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"

Die bind()-Methode erstellt eine Instanz der Funktion, und zwar diese Der Wert wird an den an die Funktion bind() übergebenen Wert gebunden. Beispiel:

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

Ein weiteres Verwendungsszenario ist die Funktionsbindung, die eine Funktion erstellt, die in einer bestimmten Umgebung mit angegebenen Parametern aufgerufen werden kann. Diese Technik wird häufig bei Rückruffunktionen und Ereignishandlern verwendet, um die Funktion als Variable zu übergeben und gleichzeitig die Codeausführungsumgebung beizubehalten.

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

Wenn die Taste gedrückt wird, wird diese Funktion aufgerufen und ein Warnfeld angezeigt. Eigentlich sollte im Warnfeld jedoch „Ereignis behandelt“ angezeigt werden Es wird angezeigt, dass es undefiniert ist. Der Grund dafür ist, dass die Ausführungsumgebung von handler.handleClick() nicht gespeichert wird, sodass dieses Objekt schließlich auf die DOM-Schaltfläche und nicht auf den Handler zeigt (in IE8 zeigt dies auf das Fenster). Eine Möglichkeit, dieses Problem zu beheben, ist die Verwendung eines Verschlusses.

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);

Diese Lösung verwendet einen Abschluss innerhalb des onclick-Ereignishandlers, um handler.handleClick() direkt aufzurufen. Dies ist natürlich spezifisch für diesen Codeabschnitt. Lösung. Wir wissen, dass das Erstellen mehrerer Abschlüsse dazu führen kann, dass Ihr Code schwer zu verstehen und zu debuggen ist. Daher implementieren viele JS-Bibliotheken eine Funktion, die eine Funktion an eine bestimmte Umgebung binden kann. Diese Funktion heißt im Allgemeinen bind(); ECMAScript 5 definiert eine native bind()-Methode für alle Funktionen und wird wie folgt verwendet:

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);

Eine einfache bind()-Funktion nimmt ein Argument und eine Umgebung und gibt eine Funktion zurück, die die gegebene Funktion in der gegebenen Umgebung aufruft, wobei alle Argumente intakt weitergeben. Die Syntax lautet wie folgt:

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

Diese Funktion erstellt einen Abschluss in bind(). Der Abschluss verwendet apply, um die eingehende Funktion aufzurufen, und übergibt Kontext an apply. Das Objekt ist ein Array von Argumentobjekten für interne Funktionen (anonyme Funktionen), nicht für Parameter für bind(). Wenn die zurückgegebene Funktion aufgerufen wird, führt sie die übergebene Funktion in der angegebenen Umgebung aus und gibt alle Argumente an.

Die native bind()-Methode ähnelt der zuvor angepassten bind()-Methode, die beide die Übergabe des Objekts als diesen Wert erfordern. Sie werden hauptsächlich in Event-Handlern und setTimeout() und setInterval() verwendet. Die Bindung spielt oft die gleiche Rolle wie die Pfeilfunktion, wenn es darum geht, dies bei der Verarbeitung von Reaktionsereignissen zu binden.

4. Abschluss

Aufgrund der unterschiedlichen Schreibweisen von Abschlüssen kann die Verwendung dieses Objekts in Abschlüssen manchmal zu Problemen führen;

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定时器和单线程异步特性

Das obige ist der detaillierte Inhalt vondieses Objekt in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!