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

VUE3.0 をすぐに始める方法:

this のポインティングを

this のポインティング方法を決定する方法についてのさまざまな紹介で、 「this は最終的にそれを呼び出すオブジェクトをポイントする」という文は、私たちは、さまざまな状況に直面して混乱しがちです。様々な状況を理解した上で、私は「矢印、タイミング、構造、特別な状況を見て、通常のコールはポイント番号を見て、後のポイントは前を見ずに判断してください」という文を提案しました。最も近い原則に基づいて、最後に残ったのは窓です。」

アロー関数

アロー関数自体には this がないため、

var name = "windowsName";

var a = {
    名前：「チェリー」、
    fn() {
      setTimeout(()=>{
        console.log(この名前); 
      },0)
    }
}

a.fn() //チェリー

分析: まず、オブジェクト a が fn 関数を呼び出します。そのため、fn 関数の this はオブジェクト a を指します。次に、矢印が外側の this をキャプチャします。その後、setTimeout 内の this ではなく、this of fn 関数なので、最終的にオブジェクト a の名前を取得します。

timer

の this は、グローバル オブジェクト window

var name = "windowsName";

var a = {
    名前：「チェリー」、
    fn() {
      setTimeout(function(){
        console.log(この名前); 
      },0)
    }
}

a.fn() //windowsName

分析: まず、オブジェクト a が fn 関数を呼び出します。次に、setTimeout のコールバック関数が通常の関数である無名関数です。次に、無名関数内の this は window

var name =

"windows 名";
var b={
  名前: "setTimeoutName"
}
var a = {
    名前：「チェリー」、
    fn() {
      setTimeout((関数(){
        console.log(この名前); 
      }).bind(b),0)
    }
}

a.fn() //setTimeoutName

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

コンストラクターは

、最終的にコンストラクター内で作成されたインスタンス オブジェクトを指します。

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

関数 fn(){

  この年齢 = 37;
}

var a = 新しい fn();
console.log(a.age); // 37
a.年齢 = 38;
console.log(fn); // { this.age = 37 }
console.log(a.age); // 38

分析: ここでは、コンストラクターを通じてインスタンス オブジェクト a を作成します。これは、新しい場所を開いてコンストラクターの内容をコピーすることと同じです。今度は、これはオブジェクト a を指します。オブジェクト a の内容の変更は、コンストラクターのドット

数判定

.この点を判断し、近接原則に従います。

var a = {
  年齢：10歳、
  b: {
      年齢：12歳、
      fn(){
          console.log(this.age); 
      }
  }
}
abfn(); //12

分析: オブジェクト a はオブジェクト b の fn 関数を呼び出します。 fn 関数の前に 2 つあります.したがって、fn 関数の this はオブジェクト b を指します。最後に取得されるのは b の年齢

var a = {
  年齢：10歳、
  b: {
      年齢：12歳、
      fn(){
          console.log(this.age); //未定義
      }
  }
}
var c = {
  年齢：20歳、
}

var d = {
  年齢：30歳、
}
abfn.bind(c).bind(d)(); //20

解析: . a がオブジェクト b の fn 関数を呼び出し、bind を使用して this の前後を変更します。

が

.点を c に変更します。その場合、fn 関数のこの点はオブジェクト c になり、得られるのは

、

   console.log(this) // { x: 1 }
   関数 func() {
    console.log(this) // ウィンドウ 
   }
   楽しい（）
} 

externalFunc.bind({ x: 1 })()

obj = {
  関数() {
    const arrowFunc = () => {
      console.log(this._name)
    }

    戻る arrowFunc
  }、

  _name: "オブジェクト",
}

obj.func()() //obj

func = obj.func
func()() //未定義

obj.func.bind({ _name: "newObj" })()() //newObj

obj.func.bind()()() //未定義

obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })() //bindObj

call、bind 関数を使用して、方向を変更します

。

この例では

、 thisArg , [ argsArray] call(thisArg, arg1, arg2, ...)

の違いが

apply 関数と call 関数の違いは、この後に渡されるパラメーターにあります。 apply で渡されるのは配列であり、call で渡されるのは拡張パラメータの

bind(thisArg[, arg1[, arg2[, ...]]])()

、bind 関数は
• この新しい関数に必要な
• 新しい関数を作成します。
• this 、 bind()として指定されます。最初のパラメータと、残りのパラメータは、呼び出し時に使用する新しい関数のパラメータとして使用されます。

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

参考資料

https://juejin.cn/post/6946021671656488991#comment

[関連ビデオチュートリアルの推奨事項: Web フロントエンド]

上記は、JS の this pointing 問題をどのように理解できるかです。この記事の詳細については、php 中国語 Web サイトの他の関連記事に注目してください。