call()方法、appy()方法とbind()方法を徹底的に理解しました.

2857 ワード

javascriptのそれぞれのスコープにはthisオブジェクトがあり、それは関数を呼び出すオブジェクトを表しています.グローバルスコープでは、thisはグローバルオブジェクト(ウェブブラウザでwindowを指す)を表している.thisを含む関数がオブジェクトである場合、thisはこのオブジェクトを指す.したがって、上記の例では、オブジェクトの名前を直接書くのではなく、thisを使用して、例えば、
var human = {
    name: '   ',
    sayName: function(){
        console.log(this.name);

    }
}

human.sayName();
以下の例では、person.nameを直接使用して、この方法は、方法とオブジェクトとの間の結合度を増加させます(それらの間の依存性が強くなります).このように書くのは問題があります.もし私たちの変数名が変更されたら、方法の変数名を同時に修正しなければなりません.幸い、JavaScriptはこの問題を解決する方法を提供してくれました.
var person = {
        name: '   ',
        sayName: function(){
            console.log(person.name);
        }
    }

    person.sayName();
1.thisを変えるthisは通常、自動的に値が割り当てられますが、thisの方向を変えることができます.JavaScriptは3中提供してくれました. 関数の方法 を選択します.
2.コール方法
この方法の最初のパラメータはthisが指すオブジェクトを表し、後の全てのパラメータは関数のパラメータである.たとえば:
function sayName(label) {

    console.log(label+'--->'+this.name);

}


var name = '  ';

var person1 = {
    name: '  '
};


var person2 = {
    name: '  '

};
sayName.call(window,'global');      //'global--->  '
sayName.call(person1,'person1');    //'person1--->  '
sayName.call(person2,'person2');    //'person2--->  '
3.アプリ()方法
この方法とcall方法の役割は同じです.ただし、パラメータを渡す時には、call方法は複数のパラメータを伝達することができます.
function sayName(label) {

    console.log(label);
    console.log(this.name);

}


var name = '  ';

var person1 = {
    name: '  '
};


var person2 = {
    name: '  '

};
sayName.apply(window,['global']);   //'global--->  '
sayName.apply(person1,['person1']); //'person1--->  '
sayName.apply(person2,['person2']); //'person2--->  '
4.bind()の方法
bind()法の最初のパラメータは関数の中でthisが指し示す対象であり,後のパラメータは関数に与えるべきパラメータバインディングの値である.
var obj = {
              name:'  '
              age:23
            };
function myName(age,gender){
              console.log(this.name,age,gender);
            }
var newName = myName.bind(obj);
            newName();  //   undefined undefined
            
            var newName2 = myName.bind(obj,18);
            newName2();  //   18 undefined
            
            var newName3 = myName.bind(obj,18,' ');
            newName3();  //   18  
            
            var newName4 = myName.bind(obj);
            newName4(18,' ');  //   18