call()の使用法

call()メソッドは、指定されたこの値と1つ以上のパラメーターを使用して関数を呼び出します。

注:このメソッドの構文と関数はapply()メソッドに似ていますが、唯一の違いは、call()メソッドがパラメーターリストを受け入れるのに対し、apply()メソッドは複数のパラメーターを含む配列を受け入れることです。

callメソッドを使用して親コンストラクターを呼び出す

子コンストラクターでは、親コンストラクターのcallメソッドを呼び出すことで継承を実装できます。次の例では、FoodおよびToyコンストラクターを使用して作成されたオブジェクトインスタンスはすべて、Productコンストラクターにname属性とprice属性が追加されていますが、category属性はそれぞれのコンストラクターで定義されています。

function Product(name, price) {
    
    
  this.name = name;
  this.price = price;
}

function Food(name, price) {
    
    
  Product.call(this, name, price);
  this.category = 'food';
}

function Toy(name, price) {
    
    
  Product.call(this, name, price);
  this.category = 'toy';
}

var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);

console.log(cheese.name) // "feta"
console.log(fun.name) // "robot"

callメソッドを使用して無名関数を呼び出す

次の例のforループでは、無名関数を作成し、関数のcallメソッドを呼び出して、この値を指定して各配列要素を使用して無名関数を実行します。この無名関数の主な目的は、各配列要素オブジェクトにprintメソッドを追加することです。このprintメソッドは、配列内の各要素の正しいインデックス番号を出力できます。もちろん、この値として配列要素を無名関数に渡す必要はありません(通常のパラメーターで問題ありません)。目的は、呼び出しの使用法を示すことです。

var animals = [
  {
    
     species: 'Lion', name: 'King' },
  {
    
     species: 'Whale', name: 'Fail' }
];

for (var i = 0; i < animals.length; i++) {
    
    
  (function(i) {
    
    
    this.print = function() {
    
    
      console.log('#' + i + ' ' + this.species
                  + ': ' + this.name);
    }
    this.print();
  }).call(animals[i], i);
}
//打印出:
// "#0 Lion: King"
// "#1 Whale: Fail"

callメソッドを使用して関数を呼び出し、コンテキストの「this」を指定します

次の例では、greetメソッドが呼び出されると、メソッドのこの値がobjオブジェクトにバインドされます。

function greet() {
    
    
  var reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' ');
  console.log(reply);
}

var obj = {
    
    
  animal: 'cats', sleepDuration: '12 and 16 hours'
};

greet.call(obj);  // cats typically sleep between 12 and 16 hours

callメソッドを使用して関数を呼び出し、最初のパラメーター(引数)を指定しないでください

次の例では、displayメソッドを呼び出しましたが、最初のパラメーターを渡しませんでした。最初のパラメーターが渡されない場合、この値はグローバルオブジェクトにバインドされます。

var sData = 'Wisen';

function display() {
    
    
  console.log('sData value is %s ', this.sData);
}

display.call();  // sData value is Wisen

注:厳密モードでは、この値は未定義になります。次のように。

'use strict';

var sData = 'Wisen';

function display() {
    
    
  console.log('sData value is %s ', this.sData);
}

display.call(); // Cannot read the property of 'sData' of undefined

おすすめ

転載: blog.csdn.net/weixin_42549581/article/details/113995635