Javascriptのアプリとcallの詳細

14575 ワード

Javascriptのアプリとcallの詳細
　　
JavaScriptにはcallとapplyの方法があります.その役割は基本的に同じですが、少し違いがあります.
一、方法の定義
1、コールの方法
文法:call([thisObj],arg 1[,arg 2[,argN]]])
引数thisObjはオプションできます.現在のオブジェクトとして使用されます.arg 1,arg 2,argN オプションを選択します.転送される方法のパラメータ系列を指定します.
説明コール方法は、他のオブジェクトの代わりに一つの方法を呼び出すために使用されてもよい.call方法は、関数のオブジェクトコンテキストを初期のコンテキストから、thisObjによって指定された新しいオブジェクトに変更することができる. thisObjパラメータが提供されていない場合、GlobalオブジェクトはthisObjとして使用される.白点とは、オブジェクトの内部ポインタを変更すること、オブジェクトのthisの方向を変更することです.これはオブジェクト指向のjsプログラミングの過程で時々有用である.
2、アプリ方法
文法:appy([thisObj[,argAray]) 定義:オブジェクトを別のオブジェクトに置き換える方法を適用します. 説明: もしargArayが有効な配列ではないか、またはargmentsオブジェクトではないなら、TypeErrorを引き起こすことになります. argArayおよびthisObjのいずれかのパラメータが提供されていない場合、GlobalオブジェクトはthisObjとして使用され、任意のパラメータを伝達することができない.
二、常用例
実例1:callアプリケーションの例
ネット上のコードの部分を引用して、運行後自然にその道理が分かります.　　
＜input type=「text」id=「myText」 value=「input text」>

<script>
   function Obj(){this.value="  ！";}
   var value="global   ";
   function Fun1(){alert(this.value);}

   window.Fun1();   //global   
   Fun1.call(window);  //global   
   Fun1.call(document.getElementById('myText'));  //input text
   Fun1.call(new Obj());   //  ！
   window.Fun1(); //global   
</script>

call関数とapplyメソッドの最初のパラメータは、現在のオブジェクトや関数の内部に入るthisです.後ろのパラメータは現在のオブジェクトに渡すパラメータです.
次のコードを実行します.
＜スクリプト＞

  var func=new function(){this.a="func"}
  var myfunc=function(x){
       var a="myfunc";
       alert(this.a);
       alert(x);
   }
   myfunc.call(func,"var");
</script>

それぞれfuncとvarがポップアップされていることが分かります.まずfunc関数を呼び出して、myfuncのthis.aをthis.a="func"で置換します.そして、「var」を方法myfuncに渡すパラメータxは、それぞれfuncとvarを弾いていることがわかる.
applyとcallの両方については役割は同じですが、両者はパラメータに違いがあります.
最初のパラメータは同じ意味です.二つ目のパラメータ:appyは一つのパラメータ配列、つまり複数のパラメータを組み合わせて一つの配列にして入ってきます.コールはコールのパラメータとして入ってきます.func.call(func 1,var 1,var 2,var 3) 対応するappyは、func.apply(func 1,var 1,var 2,var 3)と表記されていますが、同時にappyを使う利点は、現在の関数のargmentsオブジェクトを直接appyの2番目のパラメータとして導入することができます. 　　
実例2:引き継ぎのデモンストレーション
//
継承デモ

function base() {
    this.member = " dnnsun_Member";
    this.method = function() {
        window.alert(this.member);
    }
}
function extend() {
    base.call(this);
    window.alert(member);
    window.alert(this.method);
}

上記の例では、コールした後、extedはベースの方法と属性を継承することができます.
ちなみに、javascriptフレームワークprototypeではappyを使って定義タイプのパターンを作成していますが、現代コードは以下の通りです.
var
クラス=
{

  create: function () {
    return function () {
      this.initialize.apply(this, arguments);
    }
  }
}

解析:コードから見ると、オブジェクトは一つの方法しか含まれていません.Createは関数、すなわちクラスを返します.しかし、これは同じクラスのコンストラクタでもあります.initializeを呼び出します.この方法はクラス作成時に定義される初期化関数です.この方法によって、prototypeのクラス作成モードを実現することができます.
例:
var
vehicle=
Class.creat();

vehicle.prototype={
    initialize:function(type){
        this.type=type;
    },
    showSelf:function(){
        alert("this vehicle is "+ this.type);
    }
}
var moto=new vehicle("Moto");
moto.showSelf();

運転結果は:this vehicle is Moto
実例3:
機能
add(a,b)

{
  alert(a + b);
}
function sub(a, b)
{
  alert(a - b);
}
add.call(sub, 3, 1);

出力結果は:4
この例ではsub,add.call(sub,3,1)==add(3,1)をaddで置換するという意味ですので、実行結果は:alert(4)です. 注意:jsの関数はオブジェクトであり、関数名はFunctionオブジェクトへの参照です.
実例4:
機能
アニマル(){

  this.name = 'Animal';
  this.showName = function () {
    alert(this.name);
  }
}
function Cat() {
  this.name = 'Cat';
}
var animal = new Animal();
var cat = new Cat();
//  call apply  ，     Animal   showName()      cat    。  
//     "Cat"  
animal.showName.call(cat, ',');
//animal.showName.apply(cat,[]);

出力結果は:cat
callとはanimalの方法をcatに置いて実行するという意味ですが、元々はcatはshowNameの方法がないので、今はanimalのshowNameの方法をcatに置いて実行していますので、this.nameはCatであるべきです.
実例5:継承の実現
機能
アニマル

  this.name = name;
  this.showName = function () {
    alert(this.name);
  }
}
function Cat(name) {
  Animal.call(this, name);
}
var cat = new Cat('Black Cat');
cat.showName();

出力結果は:Black Cat
アニマル.callとは、アニマルオブジェクトをthisオブジェクトの代わりに使用するという意味で、アニマルのすべての属性と方法がCatにあるのではないでしょうか?
実例6:複数の継承を実現する
var
s 1=
機能
(name){

  this.name = name;
}

var s2 = function(sex){
  this.sex = sex;
}

var s3 = function(age){
  this.age = age;
}

var Student = function(name,sex,age,score){
  s1.call(this,name);
  s2.call(this,sex);
  s3.call(this,age);
  this.score = score;
}

Student.prototype.construction = Student;
var s = new Student('jack','male','12','100');
console.log(s.name); //  :jack
console.log(s.sex);  //  :male 
console.log(s.age);  //  :12
console.log(s.score);//  :100

このように、それぞれの機能モジュールによって、別々のプログラマが独立して開発し、最後に統合して、複数の継承を実現することができます.

JavaScriptにおけるthisバインディングの詳細解