TIL[このキーワード/サブクラスdance party解説を修正]

1.newキーワード、インスタンス==thisを使用します。

class DancerClass{
  constructor(top, left, timeBetweenSteps){
    this.top = top;
    this.left = left;
    this.timeBetweenSteps = timeBetweenSteps;
  }
}  
let dancer = new DancerClass(300, 500, 3000);
dancer // { top: 300, left: 500, timeBetweenSteps: 3000 }

ここで踊る人はこうなります.

2.一般関数のthis==global(window)を表します。

function myFunction(){
  console.log(this === globalThis); // true
}

myFunction(); 

3.オブジェクト内のメソッド関数のthis==オブジェクト

var myObject = {
  myFunction: function(){
    console.log(this === myObject); // true
  }
};

myObject.myFunction();

4.新しい変数にオブジェクト内のメソッドを指定して実行する場合、メソッドのthis!==オブジェクト

var myObject = {
  myFunction: function(){
    console.log(this === myObject); // false
  }
};
var myFunction = myObject.myFunction;
myFunction(); 

5.settimeoutでコールバック関数として使用される関数のthis

var myObject = {
  myFunction: function(){
    console.log(this === myObject); // true
    setTimeout(function(){
      console.log(this === myObject); // false
      console.log(this === global); // true
    }, 0);
  }
};

表面上、settimootコールバック関数のthisはオブジェクトを指しているようですが、実際にはglobalです.setTimeoutは外部関数であり、setTimout関数を持つアドレスを借りているため、myObjectオブジェクトには含まれていないと考えられます.したがってobjfunc()以外のすべてのthisはglobalのルールであり、settimeoutのコールバック関数のthisもglobalを表す.

-わかりやすいジェホが描いた絵🙇‍🙇‍🙇‍

6.call、apply、bind私たちはこのオブジェクトを人為的に代入します。

var myObject = {
  myFunction: function(a, b){
    console.log(a + ' ' + b); // 'hello world'
    console.log(this === myObject); // false
    console.log(this === myOtherObject) // true
  }
};

var myOtherObject = {};

myObject.myFunction.call(myOtherObject, 'hello', 'world');

従来の方式では、thisはmyotherObjectであったが、callがmyotherObjectというオブジェクトを人為的に入れたため、thisはmyotherObjectとなった.

7.矢印関数

let obj = {};
obj.func = () => { 
  return this;
}


obj.func() // global

ここでthisはobjを指すかもしれませんがglobalを指します.この場合、矢印関数のthisの大部分はglobalと見なすことができる.

オブジェクトのメソッドを呼び出すと、this==オブジェクトであり、それ以外のすべてのコンテンツはglobalです。

obj.func()はfunc()の前にあります.func()のすべてがglobalであることを意味します.
これだけ背負い込んでもいい!!
では、今日死にたい次階級ダンスパーティーを引き裂きましょう.

1.Class型からDancerClassへjsファイル深さ分析

このクラスでインスタンスを作成します.

let dancer = new DancerClass(30, 50, 2000);

これによりダンサーの例が生まれ、形はこうなります.

{top: 30, left: 50, timeBetweenSteps: 2000, $node: span.dancer}

客体です.すべての対象の国のルールにはprotoがあります.このproto接続はどこですか?もちろん、このオブジェクトを作成するDancerClassというクラス(関数)のプロトタイプに接続されます.
実際にコンソールウィンドウを撮影した場合

これにより、クラスで作成したメソッドcreateDancerElement、step、setPositionが非常に可愛く保存されます.今、私はどうしてみんなが知っている事実をこんなに長く説明したのかと言います.

このハーモニーです.殺すぞ...setTimeout(this.step.bind(this), ...)このような醜い文法を見ましたか.もし本当に今晩理解しなければ、私は冤罪で死ぬだろう.それでは直接解説に入りましょうsettimeoutはstepというメソッドで使用されますが、実際には外部から導入された関数です.この関数ではstepと書いたら「obj」func()はfunc()の前にあります.または[]でfunc()を包んでいるすべてのthisはglobalの意味です.ルールに従ってglobalに向かいます.まったく.globalには私たちが望んでいるstepの方法はありません.あっても私たちが望んでいるstepではありません.
だから出てきた解法はこれですstep.bindです.bindのこれは例です.すなわち,さっきdancerというインスタンスが生成され,dancerになった.最終的に説明するとthisですstepメソッド(関数)に現れるすべてのthisをdancerに変換することを意味します.これでsettimeoutの中のthisStepはglobalではなくdancerを指す、dancerオブジェクト内にある.protoで接続されているDancerClass.プロトタイプにstepメソッドを読み込みます.