JavaScriptでコール()、apply ()およびbind ()の理解

26952 ワード
node codenewbie webdev javascript テキストリンク
このチュートリアルでは、JavaScriptの呼び出し、バインド、および適用メソッドを理解します.
これらのメソッドを理解するには、JavaScriptで「このキーワード」を知っているはずです.

JavaScriptの"この"キーワード

CJ・ Dec 26 ' 20・ 2分読む

#javascript #webdev

なぜ、この“キーワード”を知る必要があるのか
だから今、あなたはそれを知っている必要があります
  • すべての関数this 自動的にプロパティ
  • 文脈this は、ドットの前から呼び出される関数です.例えば、
    • 'use strict'

let userA = {
 age: 9,
 getAge() {
  console.log(this.age)
 }
}
// here context of getAge is object userA
userA.getAge() // 9

// or

let userB = {
 age: 19
}

function getAge() {
  console.log(this.age)
}
// here context of getAge is object userB
userB.getAge = getAge

userB.getAge() // 19
    しかし、時々我々は参照を失うthis例:
    'use strict'

let car = {
  manufacturer: 'Mahindra',
  model: 'XUV500',
  featureArray: ['Sunroof', 'ABS', '4WD'],

  carInfo() {
    const info = `${this.manufacturer} ${this.model} have these features: `

    const features = this.featureArray.reduce(function (string, feature, i) {
      if (i === this.featureArray.length - 1) {
        return `${string} and ${feature}.`
      }
      return `${string} ${feature},`
    }, '')

    console.log(info + features)
  },
}

car.carInfo()

    これはTypeErrorをスローします。定義されていない'プロパティ


    これは.featureArray of this 12行目は
     if (i === this.featureArray.length - 1) {}
    エラーに応じてthis.featureArray が定義されていない.
    なぜ起こったのか見てみましょう
    'use strict'

let car = {
  manufacturer: 'Mahindra',
  model: 'XUV500',
  featureArray: ['Sunroof', 'ABS', '4WD'],

  carInfo() {
    const info = `${this.manufacturer} ${this.model} have these features: `

    //                👇here this is referenced to car object
    const features = this.featureArray.reduce(function (string, feature, i) {
      console.log(this) // undefined
      //        👇here reference of this is unknown
      if (i === this.featureArray.length - 1) {
        return `${string} and ${feature}.`
      }
      return `${string} ${feature},`
    }, '')

    console.log(info + features)
  },
}

car.carInfo()
    参考文献this 無名関数が通過するので.reduce のコンテキストを取得しませんuser .
    最初にハックでこの問題を解決しましょうthis :
    'use strict'

let car = {
  manufacturer: 'Mahindra',
  model: 'XUV500',
  featureArray: ['Sunroof', 'ABS', '4WD'],

  carInfo() {
    const info = `${this.manufacturer} ${this.model} have these features: `

    let savedReference = this

    const features = this.featureArray.reduce(function (string, feature, i) {
      if (i === savedReference.featureArray.length - 1) {
        return `${string} and ${feature}.`
      }
      return `${string} ${feature},`
    }, '')

    console.log(info + features)
  },
}

car.carInfo() // Mahindra XUV500 have these features:  Sunroof, ABS, and 4WD.

    この記事の後半ではbind ()を使ってこれを修正します


    JavaScriptで利用できるbind ()メソッドについて学びましょう


    The bind() method creates a new function that, when called, has this keyword set to the provided value.


    'use strict'

let kid = {
  Name: 'Rob',
  Age: 6,
}
function sayHi() {
  console.log('👋 Hello, I am ' + this.Name)
}

sayHi()
    ここでエラーがスローされます.TypeError :未定義のプロパティ' name 'を読み込むことはできません
    SayHi ()がコンテキストなしで呼び出されるためです.this が参照されていない.
    では文脈を修正しましょうthis を返します.bind()
    'use strict'

let kid = {
  Name: 'Rob',
  Age: 6,
}
function sayHi() {
  console.log('👋 Hello, I am ' + this.Name)
}

let logHi = sayHi.bind(kid) // creates new object and binds kid. 'this' of sayHi = kid now

logHi() // 👋 Hello, I am Rob

    だから今、我々はバインドがどのように動作するのか理解しましょう


    'use strict'

let car = {
  manufacturer: 'Mahindra',
  model: 'XUV500',
  featureArray: ['Sunroof', 'ABS', '4WD'],

  carInfo() {
    const info = `${this.manufacturer} ${this.model} have these features: `

    const features = this.featureArray.reduce(
      function (string, feature, i) {
        if (i === this.featureArray.length - 1) {
          return `${string} and ${feature}.`
        }
        return `${string} ${feature},`

        // 👇here we have bind the this object which is referenced to object car
      }.bind(this),
      ''
    )

    console.log(info + features)
  },
}

car.carInfo() //Mahindra XUV500 have these features:  Sunroof, ABS, and 4WD.

    ここでbind ()を行いました。call ()とapply ()を理解しましょう。


    JavaScriptのコールメソッドは何ですか？


    Every function has a method call that allows invoking the function specifying the context (this) and arguments the function will be invoked with


    'use strict'

let kid = {
  Name: 'Rob',
  Age: 6,
}

function sayHi() {
  console.log('👋 Hello, I am ' + this.Name)
}

sayHi.call(kid) // 👋 Hello, I am Rob
    引数を渡すこともできます.
    'use strict'

let kid = {
  Name: 'Rob',
  Age: 6,
}

function sayHi(place, number) {
  console.log(`👋 Hello, I am ${this.Name}, I live in ${place} and I have ${number} dogs`)
}

sayHi.call(kid, 'Montreal', 2) // 👋 Hello, I am Rob, I live in Montreal and I have 2 dogs
    見ましょうapply() 作品

    call() and apply() are exact same thing. The only difference between how they work is that call() expects all arguments to be passed in individually, whereas apply() expects an array of all of our arguments.


    'use strict'

let kid = {
  Name: 'Rob',
  Age: 6,
}

function sayHi(place, number) {
  console.log(`👋 Hello, I am ${this.Name}, I live in ${place} and I have ${number} dogs`)
}

sayHi.apply(kid, ['Montreal', 2]) // 👋 Hello, I am Rob, I live in Montreal and I have 2 dogs
    この記事があなたに理解してくれたことを願っていますcall() , bind() , and apply() .
    お気軽に提案を与えるか、または私にメッセージを撮影し、それをチェックアウト私のチェックアウトWebsite .
    次のポストでお会いしましょう!👋
    DockerによるRuby on Railsの環境構築手順
    SvelteとMQTTハブを通したDjangoによる反応フックの使用