JS:この3人の兄弟の呼び出し、適用、バインドを指定します

みなさん、こんにちは梅巴哥erこの記事では、これをバインドするために使用される3人の兄弟(呼び出し、適用、バインド)について説明します。


コール

呼び出しの構文

function.call(thisArg, arg1, arg2, ...)

呼び出し構文の説明

thisArg、arg1、arg2、...これらのパラメーターを使用して、呼び出す前に関数を呼び出します。
call() 提供新的 this 值给当前调用的函数/方法。

その中で:

  • thisArgそれは必要ない。この関数が非厳密モードで、thisArgがnullまたは未定義の場合、グローバルオブジェクトを指します。
  • arg1、arg2、…これらは関数に渡される実際のパラメーターです。
呼び出しの戻り値

使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值,则返回 undefined。


通話コードの例
// example1
function A(name, age) {
    
    
    this.name = name 
    this.age = age 
    this.sayHi = function() {
    
    
        console.log('Athis: ', this) // 查看A的this指向
    }
}
function B() {
    
    
    A.call(this, '迪丽热巴', 18)
    console.log(this) // 查看this指向情况
}
var dili = new B()
console.log(dili.name + '今年' + dili.age + '岁了')
var a = new A()
a.sayHi()
// 输出:B { name: '迪丽热巴', age: 18, sayHi: [Function] }
// 迪丽热巴今年18岁了
// Athis:  A { name: undefined, age: undefined, sayHi: [Function] }
// call指定了参数B的this,call给A提供了新的this值
// B通过this和另外两个参数,调用了函数A
// B此时继承了A的属性,所以call可以实现继承
// A.call(),A必须是function类型,不能是其他类型。

別の例を見てみましょう

function a(age) {
    
    
    console.log('hi, ', this.name + age + '岁了')
    console.log(this)
}
obj = {
    
    
    name: '迪丽热巴'
}
a.call(obj, 18)
// 输出:hi,  迪丽热巴18岁了  { name: '迪丽热巴' }
// obj和参数18通过call调用了函数a
// call给a提供了新的this值obj

適用する


構文を適用する

func.apply(thisArg, [argsArray])

  • thisArgこれは必須のオプションです。
  • [argsArray]配列です
  • apply()メソッドはcall()メソッドに似ています。違いは、call()メソッドがパラメーターリストを受け入れるのに対し、apply()メソッドはパラメーターの配列を受け入れることです。

練る


bind()メソッドは新しい関数を作成します。bind()が呼び出されると、この新しい関数のこれがbind()の最初のパラメーターとして指定され、残りのパラメーターが呼び出しの新しい関数のパラメーターとして使用されます。 。


バインドの戻り値

返回一个原函数的拷贝,并拥有指定的 this 值和初始参数。


バインドは、プロジェクトでこのイベントポイント関数をバインドするためによく使用されます。

ただし、矢印関数を使用した後は、bindでバインドする必要はありません。


バインドバインディングイベントの例

    // 为了在回调中使用 `this`,这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    
    
    this.setState(state => ({
    
    
      isToggleOn: !state.isToggleOn
    }));
  }

この例は、次のように変更できます。

// 这样就不需要再单独绑定this了
handleClick = () => {
    
    
    this.setState(state => ({
    
    
      isToggleOn: !state.isToggleOn
    }));
  }

上記。

おすすめ

転載: blog.csdn.net/tuzi007a/article/details/114495770