JavaScript で暗黙的な呼び出しを使用するにはどうすればよいですか?

この記事ではJavaScriptの暗黙的呼び出しに関する知識を詳しく紹介していますので、興味のある方は一緒に学んでください。

前書き

暗黙の呼びかけと表現するのが正確かどうかはわかりませんが、その行動は常に舞台裏に隠れており、時折顔を出しますが、あまり効果はないようです。しかし、それを理解しておくことは、あなたにとってはあまり役に立たないことを保証します。

いわゆる暗黙的な呼び出しとは、単にいくつかのメソッドを自動的に呼び出すことを意味し、これらのメソッドはフックのように外部から変更でき、それによって確立された動作を変更できます。
以下に私が最近見た暗黙的な呼び出しをいくつかリストします。例はすべて要点を示しています。

Sting と valueOf へのデータ型変換を追加します

var obj = {
   a: 1,
   toString: function () {
    console.log('toString')
    return '2'
   },
   valueOf: function () {
    console.log('valueOf')
    return 3
   }
  }
  console.log(obj == '2'); //依次输出 'valueOf' false
  console.log(String(obj));//依次输出 'toString' '2'

var obj = {
   a: 1,
   toString: function () {
    console.log('toString')
    return '2'
   },
   valueOf: function () {
    console.log('valueOf')
    return {} //修改为对象
   }
  }
  console.log(obj == '2'); //依次输出 'valueOf' 'toString' true
  console.log(Number(obj));//依次输出 'valueOf' 'toString' 2

等価演算子の操作では、オブジェクトは最初にcall valueOf 戻り値がオブジェクトの場合、null を除く toSting が呼び出され、戻り値が比較に使用されます。最初の例は 3 == '2' と同等であり、2 番目の例は false を返します。 valueOf オブジェクトの実行により、次に toString が実行され、最後に '2' == '2' と同等になり、Number メソッドと String メソッドで true が出力されます。Number は最初に valueOf を呼び出し、次に toString を呼び出します。 String メソッドではその逆になります。

上記の 2 つの例に加えて、データ型変換は数値演算などの他のさまざまな演算にも存在します。参照型が関与する場合、オブジェクトがオブジェクトである限り、valueOf メソッドまたは toString メソッドが呼び出されます。これら 2 つのメソッドを継承するため、これら 2 つのメソッドを再オーバーライドして、DOM2 イベント

handleEvent の動作に影響を与えることができます。addEventListener の 2 番目のパラメーターもオブジェクトにすることができます。関数に加えて、イベントをトリガーするオブジェクトの handleEvent メソッドが後で実行されます。このメソッドが実行されると、eventObj オブジェクトに渡したいデータをバインドできます

JSON

。

var eventObj = {
   a: 1,
   handleEvent: function (e) {
    console.log(this, e);//返回 eventObj 和 事件对象
    alert(this.a)
   }
  }
  document.addEventListener('click', eventObj)

JSON stringify メソッドで渡されたオブジェクトに toJSON メソッドがある場合、次のコードのように、このメソッドで実行されたオブジェクトは toJSON の実行後に返されるオブジェクトに変換されることに注意してください。 上記のステートメントに従えば、エラーが予期したものであることは明らかですが、直接返す場合、これはまったくエラーを報告しません。大胆な推測をして、toJSON によって返されたオブジェクトを元のオブジェクトと比較することもできます。オブジェクトが等しい場合は、Promise.resolve メソッドがオブジェクトを渡すときに、Promise オブジェクトの元のオブジェクト

then

var Obj = {
   a: 10,
   toJSON: function () {
    return {
     a: 1,
     b: function () {
     },
     c: NaN,
     d: -Infinity,
     e: Infinity,
     f: /\d/,
     g: new Error(),
     h: new Date(),
     i: undefined,
     
    }
   }
  }
  console.log(JSON.stringify(Obj));
  //{"a":1,"c":null,"d":null,"e":null,"f":{},"g":{},"h":"2018-02-09T19:29:13.828Z"}

を直接使用し、then メソッドが存在する場合は、その then メソッドがすぐに実行されます。これは、Promise.resolve にこの動作があることに加えて、Promise.all にもこの動作があります

var Obj1 = {
   a: 10,
   toJSON: function () {
    console.log(this === Obj1);//true
    return this
   }
  }
  console.log(JSON.stringify(Obj1));//{"a":10}

オブジェクト属性アクセサーの get および set

 var Obj2 = {
   a: 10,
   toJSON: function () {
    console.log(this === Obj2);//true
    return {
     a: this
    }
   }
  }
  console.log(JSON.stringify(Obj2));//报错 Maximum call stack size exceeded

に関係がないことがわかります。何歳が設定されているかというと、私の年齢は18歳以下です。 属性アクセスを行う際には、実際には上記の記述方法の他に、以下のような記述方法もあります

var obj = {
   then: function (resolve, reject) {
    setTimeout(function () {
     resolve(1000);
    }, 1000)
   }
  }
  Promise.resolve(obj).then(function (data) {
   console.log(data);// 延迟1秒左右输出 1000
  })

。これで、入力の値と obj.age の属性値スパンの innerHTML 値がバインドされます

イテレーター インターフェイス Symbol.iterator

 var timePromise = function (time) {
    return new Promise(function (resolve) {
     setTimeout(function () {
      resolve(time);
     }, time)
    })
   }
   var timePromise1 = timePromise(1000);
   var timePromise2 = timePromise(2000);
   var timePromise3 = timePromise(3000);
   Array.prototype.then = function (resolve) {
     setTimeout(function () {
      resolve(4000);
     }, 4000)
    }
   Promise.all([timePromise1, timePromise2, timePromise3]).then(function (time) {
    console.log(time);// 等待4秒左右输出 4000
   })

スプレッド演算子を呼び出すか、for ..オブジェクトをループする .of は、Array、String、Map、Set、TypedArray などのオブジェクトのトラバーサー インターフェイスを呼び出します。引数や NodeList などの一部の配列のようなオブジェクトにはネイティブにトラバーサー インターフェイスがありますが、通常のオブジェクトはこのインターフェイスを展開しません。オブジェクトでスプレッド演算子または for...of ループを使用できるようにするには、このメソッドをオブジェクトに追加するか、インターフェイスを使用して元のオブジェクトのメソッドを書き換えて動作を変更することができます上記は私があなたのためにまとめたものです。将来皆さんのお役に立てれば幸いです。

関連記事:

ノードアプリケーションでタイミング攻撃を使用する場合、どのようなセキュリティ脆弱性が存在しますか?

オブジェクトを渡すvueコンポーネントに一方向バインディングを実装するにはどうすればよいですか?

Vue コンポーネントで TypeScript を使用する方法 (詳細なチュートリアル)

以上がJavaScript で暗黙的な呼び出しを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。