JS のこの指摘の問題を理解できますか?この記事を見てください

JavaScript のこのポインティング問題を理解できますか?次の記事では、この厄介なポインティングの問題について説明します。お役に立てば幸いです。

#これのポインティング

これまでのさまざまな紹介で、このポインティング方法を決定する方法について説明しました。

「this The last point is the object that call it.」 この文が核心とされていますが、様々な状況に直面すると混乱しやすくなります。さまざまな状況を理解した上で、私は次の文を提案しました。 「矢印、タイミング、構造、特別な状況を見て、通常の通話のポイント番号を見て、次のポイントについては前のポイントを見ないでください。次に、最も近い原則に基づいて判断し、最後に残りの「It's window」を選択します。 [関連する推奨事項: JavaScript 学習チュートリアル ]

arrow 関数

arrow 関数自体にはこれがありません。この変更は存在しません。

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

a.fn() //Cherry

を使用して外側の this をキャプチャします。 分析: 最初のオブジェクト a が fn 関数を呼び出すため、fn 関数の this がオブジェクト a を指し、次に矢印が外側の this をキャプチャします。の場合、setTimeout の this ではなく、fn 関数の this なので、最終的にオブジェクト a

Timer

の名前を取得します。遅延関数内のコールバック関数の場合、これはグローバル オブジェクト window

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

a.fn() //windowsName

を指します。 分析: まず、オブジェクト a が fn 関数を呼び出します。次に、setTimeout 内のコールバック関数は、通常の匿名関数です。 function, then this in the anonymous function point to window

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

a.fn() //setTimeoutName

分析: まず、オブジェクト a が fn 関数を呼び出し、次に setTimeout のコールバック関数が匿名関数であり、通常の関数です。匿名関数ではウィンドウを指しますが、匿名関数の this ポイントを変更するには、bind を使用します。これはオブジェクト b なので、オブジェクト b

#Constructor# の最後の名前になります。 ##コンストラクター内のこれは、作成されたインスタンス オブジェクトを指します。

注: コンストラクターでオブジェクトが返された場合、作成時に新しいインスタンス オブジェクトは存在しませんが、返されたオブジェクト

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

分析: ここでコンストラクターを渡します インスタンス オブジェクト a を作成することは、新しい場所を開いてコンストラクターの内容をコピーすることと同じです。その後、オブジェクト a が存在します。 , これはオブジェクト a を指します。オブジェクト a の内容を変更してもコンストラクターには影響しません。

ポイント番号判定

このポインタを判定します。 .

、近接原則に従います

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

分析: オブジェクト a はオブジェクト b の fn 関数を呼び出します。fn 関数の前に 2 つの .

があり、次に最も近いものが続きます。はオブジェクト 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 関数を呼び出し、このとき、 fn の前後には . があり、前方の

.

は見ず、後方だけを見て、その後、最新のバインドによりこのポイントが c に変更され、次に fn 関数のこのポイントがオブジェクト c をポイントし、取得されるのはオブジェクト c#Exercise

## の年齢です。 #

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、bindapply、call、bind 関数を使用して、このポインタを変更します。

# は、上記の例で使用されています.

##違い

##thisArg , [ argsArray]

call(thisArg, arg1, arg2, ...) #apply 関数と call 関数の違いは、この後に渡されるパラメータにあります。apply では配列が渡され、call では展開されたパラメータが渡されます。 #bind(thisArg[ , arg1[, arg2[, ...]]])()

次に、バインド関数によって新しい関数が作成されます。この関数は手動で呼び出す必要があります##新しい関数の #this

は

bind()

の最初のパラメータとして指定され、残りのパラメータは呼び出し時に使用する新しい関数のパラメータとして使用されます

間違いがある場合は、修正してください。 ！読んでくださった皆様、ありがとうございました！

• 参考文献https://juejin.cn/post/6946021671656488991#comment

【関連おすすめビデオチュートリアル: webfrontend]

以上がJS のこの指摘の問題を理解できますか?この記事を見てくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。