JavaScriptのcall applyメソッドとbindメソッドを詳しく解説

JavaScriptのcall applyメソッドとbindメソッドを詳しく解説_基礎知識

WBOY

リリース： 2016-05-16 15:11:25

オリジナル

1637 人が閲覧しました

JavaScript では、call、apply、bind という 3 つのメソッドが Function オブジェクトに付属しています。この記事では、いくつかのシナリオを適用することで 3 つのメソッドを詳しく理解します。

call()

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

関数を呼び出すときに、別の this オブジェクトを割り当てることができます。これは現在のオブジェクト、call メソッドの最初のパラメータを参照します。

call メソッドを使用すると、Object.prototype.toString.call([]) など、あるオブジェクトのメソッドを別のオブジェクトから借用できます。これは、Object オブジェクトからメソッドを借用する Array オブジェクトです。

構文 fun.call(thisArg[, arg1[, arg2[, ...]]])
thisArg
fun 関数の実行時に指定される this の値。注意が必要なのは以下のような状況です

(1) 関数内の this は、ウィンドウオブジェクト
を指しているか、渡さないでください。 (2) 関数内の this は、この関数への参照を指しますが、関数実行時の実際の this 値とは限りません。 (3) 値がプリミティブ値 (数値、文字列、ブール値) である this は、文字列、数値、ブール値
などのプリミティブ値の自動パッケージ化オブジェクトを指します。 (4) オブジェクトを渡し、関数内の this はこのオブジェクトを指します

引数1、引数2、...

指定されたパラメータのリスト。

例

初歩的な応用例

function a(){
 //输出函数a中的this对象
 console.log(this); 
}
//定义函数b
function b(){} 

var obj = {name:'这是一个屌丝'}; //定义对象obj
a.call(); //window
a.call(null); //window
a.call(undefined);//window
a.call(1); //Number
a.call(''); //String
a.call(true); //Boolean
a.call(b);// function b(){}
a.call(obj); //Object

ログイン後にコピー

call メソッドを使用して匿名関数を呼び出し、コンテキストのこれを指定します

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

function greet() {
 var reply = [this.person, '是一个轻量的', this.role].join(' ');
 console.log(reply);
}

var i = {function greet() {
 var reply = [this.person, '是一个轻量的', this.role].join(' ');
 console.log(reply);
}

var i = {
 person: 'JSLite.io', role: 'Javascript 库。'
};

greet.call(i); 
// JSLite.io 是一个轻量的 Javascript 库。


 person: 'JSLite.io', role: 'Javascript 库。'
};

greet.call(i); 
// JSLite.io 是一个轻量的 Javascript 库。

ログイン後にコピー

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

次の例の for ループ本体では、無名関数を作成し、各配列要素を指定された this 値として使用して、関数の call メソッドを呼び出して無名関数を実行します。この匿名関数の主な目的は、各配列要素オブジェクトに 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 メソッドを使用して関数を呼び出し、パラメーターを渡します

var a = {
 name:'JSLite.io', //定义a的属性
 say:function(){ //定义a的方法
  console.log("Hi,I'm function a!");
 }
};
function b(name){
 console.log("Post params: "+ name);
 console.log("I'm "+ this.name);
 this.say();
}

b.call(a,'test');
//Post params: test
//I'm onepixel
//I'm function a!

ログイン後にコピー

apply()

構文は call() メソッドの構文とほぼ同じですが、唯一の違いは、apply の 2 番目のパラメーターが複数のパラメーターを含む配列 (または配列のようなオブジェクト) でなければならないことです。 apply のこの機能は非常に重要です。

既存の関数を呼び出す場合、その関数に this オブジェクトを指定できます。これは現在のオブジェクト、つまりこの関数を呼び出しているオブジェクトを指します。 apply を使用すると、メソッドを一度作成すると、それを別のオブジェクトに継承できるため、新しいオブジェクトにメソッドを繰り返し記述する必要がありません。

構文: fun.apply(thisArg[, argsArray])

注: Chrome 14 と Internet Explorer 9 は依然として配列のようなオブジェクトを受け入れないことに注意することが重要です。配列のようなオブジェクトが渡されると、例外がスローされます。

パラメータ

thisArg

上記の呼び出しの thisArg パラメータと同じです。

argsArray

配列または配列に似たオブジェクト。その配列要素は個別のパラメーターとして fun 関数に渡されます。このパラメータの値が null または未定義の場合、パラメータを渡す必要がないことを意味します。 ECMAScript 5 以降では、配列のようなオブジェクトが使用できるようになりました。

例

function jsy(x,y,z){
 console.log(x,y,z);
}

jsy.apply(null,[1,2,3]); 
// 1 2 3

ログイン後にコピー

リンクコンストラクターに適用する使用例

Java と同様に、apply を使用してコンストラクターをオブジェクトにリンクできます。次の例では、construct というグローバル Function 関数を作成して、パラメーターリストではなく配列のようなオブジェクトをコンストラクターで使用できるようにします。。

Function.prototype.construct = function(aArgs) {
 var fConstructor = this, 
 fNewConstr = function() { 
 fConstructor.apply(this, aArgs); 
 };
 fNewConstr.prototype = fConstructor.prototype;
 return new fNewConstr();
};
function MyConstructor () {
 for (var nProp = 0; nProp < arguments.length; nProp++) {
  console.log(arguments,this)
  this["property" + nProp] = arguments[nProp];
 }
}
var myArray = [4, "Hello world!", false];
var myInstance = MyConstructor.construct(myArray);

console.log(myInstance.property1);    // logs "Hello world!"
console.log(myInstance instanceof MyConstructor); // logs "true"
console.log(myInstance.constructor);    // logs "MyConstructor"

ログイン後にコピー

適用関数と組み込み関数を使用する

スマート適用を使用すると、配列変数を反復処理するように記述される特定のタスクで組み込み関数を使用できるようになります。次の例では、Math.max/Math.min を使用して配列内の最大値/最小値を見つけます。

//里面有最大最小数字值的一个数组对象
var numbers = [5, 6, 2, 3, 7];

/* 使用 Math.min/Math.max 在 apply 中应用 */
var max = Math.max.apply(null, numbers);
// 一般情况是用 Math.max(5, 6, ..) 或者 Math.max(numbers[0], ...) 来找最大值
var min = Math.min.apply(null, numbers);

//通常情况我们会这样来找到数字的最大或者最小值
//比对上面的栗子，是不是下面的看起来没有上面的舒服呢？
max = -Infinity, min = +Infinity;
for (var i = 0; i < numbers.length; i++) {
 if (numbers[i] > max)
 max = numbers[i];
 if (numbers[i] < min) 
 min = numbers[i];
}

ログイン後にコピー

パラメータ配列は分割され、ループに渡されます

function minOfArray(arr) {
 var min = Infinity;
 var QUANTUM = 32768;

 for (var i = 0, len = arr.length; i < len; i += QUANTUM) {
 var submin = Math.min.apply(null, arr.slice(i, Math.min(i + QUANTUM, len)));
 console.log(submin, min)
 min = Math.min(submin, min);
 }

 return min;
}

var min = minOfArray([5, 6, 2, 3, 7]);

ログイン後にコピー

バインド

bind() 関数は新しい関数 (バインド関数と呼ばれます) を作成します

バインドは ES5 の新しいメソッドです

パラメーターの受け渡しは、call または apply
と似ています。対応する関数は実行されません。呼び出しまたは適用すると、対応する関数が自動的に実行されます
関数
への参照を返します。構文 fun.bind(thisArg[, arg1[, arg2[, ...]]])

次の例: Web ページがクリックされると、EventClick がトリガーされて実行され、JSLite.io p1 p2 が出力されます。これは、EventClick 内のこれがバインドによって obj オブジェクトに変更されたことを示します。 EventClick.bind(obj,'p1','p2') を EventClick.call(obj,'p1','p2') に変更すると、ページは JSLite.io p1 p2

を直接出力します。

var obj = {name:'JSLite.io'};
/**
 * 给document添加click事件监听，并绑定EventClick函数
 * 通过bind方法设置EventClick的this为obj，并传递参数p1,p2
 */
document.addEventListener('click',EventClick.bind(obj,'p1','p2'),false);
//当点击网页时触发并执行
function EventClick(a,b){
 console.log(
   this.name, //JSLite.io
   a, //p1
   b //p2
 )
}
// JSLite.io p1 p2

ログイン後にコピー

互換性があります

if (!Function.prototype.bind) {
 Function.prototype.bind = function (oThis) {
 if (typeof this !== "function") {
  // closest thing possible to the ECMAScript 5
  // internal IsCallable function
  throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
 }

 var aArgs = Array.prototype.slice.call(arguments, 1), 
  fToBind = this, // this在这里指向的是目标函数
  fNOP = function () {},
  fBound = function () {
   return fToBind.apply(this instanceof fNOP
     &#63; this //此时的this就是new出的obj
     : oThis || this,//如果传递的oThis无效，就将fBound的调用者作为this
    
    //将通过bind传递的参数和调用时传递的参数进行合并，并作为最终的参数传递
    aArgs.concat(Array.prototype.slice.call(arguments)));
  };
 fNOP.prototype = this.prototype;
 //将目标函数的原型对象拷贝到新函数中，因为目标函数有可能被当作构造函数使用
 fBound.prototype = new fNOP();
 //返回fBond的引用，由外部按需调用
 return fBound;
 };
}

ログイン後にコピー

兼容例子来源于：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#Compatibility

应用场景：继承

function Animal(name,weight){
 this.name = name;
 this.weight = weight;
}
function Cat(){
 // 在call中将this作为thisArgs参数传递
 // Animal方法中的this就指向了Cat中的this
 // 所以Animal中的this指向的就是cat对象
 // 在Animal中定义了name和weight属性，就相当于在cat中定义了这些属性
 // cat对象便拥有了Animal中定义的属性，从而达到了继承的目的
 Animal.call(this,'cat','50');
 //Animal.apply(this,['cat','50']);
 this.say = function(){
  console.log("I am " + this.name+",my weight is " + this.weight);
 }
}
//当通过new运算符产生了cat时，Cat中的this就指向了cat对象
var cat = new Cat();
cat.say();
//输出=> I am cat,my weight is 50

ログイン後にコピー

原型扩展

在原型函数上扩展和自定义方法，从而不污染原生函数。例如：我们在 Array 上扩展一个 forEach

function test(){
 // 检测arguments是否为Array的实例
 console.log(
  arguments instanceof Array, //false
  Array.isArray(arguments) //false
 );
 // 判断arguments是否有forEach方法
 console.log(arguments.forEach); 
 // undefined
 // 将数组中的forEach应用到arguments上
 Array.prototype.forEach.call(arguments,function(item){
  console.log(item); // 1 2 3 4
 });
}
test(1,2,3,4);

ログイン後にコピー