(JS) setInterval & this

10357 ワード
setInterval JavaScript this JavaScript js テキストリンク
setIntervalのthis
class Person {
  constructor(name) {
    this.name = name;
  }

  print() {
    setInterval(function() {
      console.log(this.name);
    }, 1000);
  }
}

const NAME = "Danuel";
const person = new Person(NAME);
person.print();
person.printは、毎秒this.nameを出力する関数である.
出力'Danuel'が予想されるが、予想とは異なり、undefinedが出力される.
Person.printメソッドで使用されるsetIntervalは、実際にはwindow.setIntervalである.したがって、setIntervalはthisを使用してwindowを表し、window.nameは値がないため、undefinedを出力する.
setIntervalでこのオプションを使用する
1.変数割当てによる移動scope
class Person {
  constructor(name) {
    this.name = name;
  }

  print() {
    var setInterval = window.setInterval;
    setInterval(function() {
      console.log(this.name);
    }, 1000);
  }
}

const NAME = "Danuel";
const person = new Person(NAME);
person.print();
変数を割り当てて、このウィンドウがPersonの原理を指すようにします.
2.この値を指す変数の作成
class Person {
  constructor(name) {
    this.name = name;
  }

  print() {
    var self = this;
    setInterval(function() {
      console.log(self.name);
    }, 1000);
  }
}

const NAME = "Danuel";
const person = new Person(NAME);
person.print();
setIntervalの外にこの値を指す変数を作成し、その変数のメソッドを使用します.
3.Arrow Functionの使用
class Person {
  constructor(name) {
    this.name = name;
  }

  print() {
    setInterval(() => {
      console.log(this.name);
    }, 1000);
  }
}

const NAME = "Danuel";
const person = new Person(NAME);
person.print();
Arrow Functionのプロパティは、親の範囲を指します.
前述の方法とは異なり、JavaScriptの動作を理解する必要がないという利点がありますが、Internet Explorerが文法をサポートしていないというホットな問題があります.
スプリングブートCRUD -モンゴDB + Docker
Cordovaプラグイン開発(1)-Alndroidプラグイン開発詳細