ホームページ  >  記事  >  ウェブフロントエンド  >  javascript_javascript スキルにおける call()、apply()、bind() の使用法に関する簡単な説明

javascript_javascript スキルにおける call()、apply()、bind() の使用法に関する簡単な説明

WBOY
WBOYオリジナル
2016-05-16 16:03:11854ブラウズ

call(thisObj, arg1, arg2...) と apply(thisObj, [obj1, obj2...]) の 2 つのメソッドは、すべての関数に含まれる非継承メソッドです

call(thisobj[, args]) と apply(thisobj[, args])

効果は同じです。簡単に言うと、現在このメソッドを使用しているオブジェクトの this ポインタが、呼び出し側のメソッドの thisObj オブジェクトを指すように変更されます。この 2 つの違いは次のとおりです (最初のパラメータは同じです)。入力されたパラメータは 1 つずつリストされ、apply メソッドの 2 番目のパラメータは配列
です。

例を挙げるとより直感的です:

window.color='red';
var o={color:"blue"};
function sayColor(){
alert(this.color);
};
sayColor(); //red(全局函数,this是window)
sayColor.call(this);//red(调用call方法,指定对象是this,这里的this是window,没什么意义)
sayColor.call(window);//red(调用call方法,指定对象是window,没什么意义)
sayColor.call(o); //blue (调用call方法,指定对象是o,所以this指代对象o,这里由原来的window指向了o)
sayColor.apply(o);//blue (调用call方法,指定对象是o,所以this指代对象o,这里由原来的window指向了o)

ECMAScript5 の binding() メソッドは、最初の 2 つのメソッドと似ています。bind() メソッドは関数のインスタンスを作成し、このインスタンスの this 値は、関数に渡される値にバインドされます。バインド()関数。

例:

function a(y){
return this.x+y;
};
var o={x:1};
var g=a.bind(o);
g(2);//3

この例から、関数 a がオブジェクト o にバインドされ、新しい関数 g を返すことがわかります。g が呼び出されるとき、関数 a はオブジェクト o のメソッドとして呼び出されます。
bind() メソッドは、関数をオブジェクトにバインドし、新しい関数を返します。この新しい関数に渡されるすべてのパラメーターは、バインドされた関数に渡されます。

それらの違いを見てみましょう

JS では、これら 3 つは関数の this オブジェクトのポインタを変更するために使用されます。これらの違いは何ですか。
違いについて説明する前に、3 つの類似点をまとめてみましょう:
1. これらはすべて、関数のこのオブジェクトのポイントを変更するために使用されます。
2. 最初のパラメータは、これが指すオブジェクトです。
3. 後続のパラメータを使用してパラメータを渡すことができます。
それでは、最初に例を見てみましょう。
var xw = {
名前: "小王"、
性別 年齢: 24 歳、
言う: function() {
alert(this.name " , " this.gender " ,今年 " this.age); } }
var xh = {
名前: "小红",
性別 年齢:18歳
}
xw.say();
映っている人物は今年24歳の男性、シャオ・ワンに違いない。

それでは、xw の Say メソッドを使用して xh のデータを表示する方法を説明します。

通話の場合、次のことができます:

コードをコピーします


適用するには、次の操作を実行できます:

コードをコピーします


バインドの場合は次のようにする必要があります:

コードをコピーします

如果直接写xw.say.bind(xh)是不会有任何结果的,看到区别了吗?call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以。
那么call和apply有什么区别呢?我们把例子稍微改写一下。

        var xw = {
            name : "小王",
            gender : "男",
            age : 24,
            say : function(school,grade) {
                alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);                
            }
        }
        var xh = {
            name : "小红",
            gender : "女",
            age : 18
        }

可以看到say方法多了两个参数,我们通过call/apply的参数进行传参。
对于call来说是这样的

复制代码 代码如下:

xw.say.call(xh,"实验小学","六年级");      

而对于apply来说是这样的

复制代码 代码如下:

xw.say.apply(xh,["实验小学","六年级郑州牛皮癣医院"]);

看到区别了吗,call后面的参数与say方法中是一一对应的,而apply的第二个参数是一个数组,数组中的元素是和say方法中一一对应的,这就是两者最大的区别。
那么bind怎么传参呢?它可以像call那样传参。

复制代码 代码如下:

xw.say.bind(xh,"实验小学","六年级")();

但是由于bind返回的仍然是一个函数,所以我们还可以在调用的时候再进行传参。

复制代码 代码如下:

xw.say.bind(xh)("实验小学","六年级");

以上所述就是本文的全部内容了,希望大家能够喜欢、

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。