問答

1.apply、call 有什么作用，什么區(qū)別

關鍵句：this指的是調用函數(shù)的那個對象。
apply,call都可以設置函數(shù)執(zhí)行環(huán)境（就是所處執(zhí)行環(huán)境，傳入對象直接替代window的環(huán)境），這是設置this值的作用。
區(qū)別：
兩者的參數(shù)設置不一樣，在call中第一個參數(shù)是設置this的值，而如果該函數(shù)如含有若干個參數(shù)，就以參數(shù)列表的形式去寫入，如：

var obj={
        name:'xiaoming',
        fn:function(name,age){
            this.name=name;
            this.age=age;
            console.log(this);
        }
    }
    var fn2=obj.fn;
    fn2.call(obj,'xiaohong','20');
    console.log(obj);

Paste_Image.png

apply同樣的第一個參數(shù)是設置this的值，但想將參數(shù)傳入的寫法則是以一個參數(shù)數(shù)組的方式寫入。

var obj={
        name:'xiaoming',
        fn:function(name,age){
            this.name=name;
            this.age=age;
            console.log(this);
        }
    }
    var fn2=obj.fn;
    fn2.apply(obj,['xiaohong',20]);
    console.log(obj);

Paste_Image.png

代碼

1.以下代碼輸出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func; //john對象里面設置屬性sayHi，屬性值為函數(shù)func
john.sayHi();   //彈出"John: hi!"，因為是john對象調用func函數(shù)，所以this指的是john

2.下面代碼輸出什么，為什么?

func()   // 彈出object window，等同于window.func();
function func() { 
  alert(this)
}

3.下面代碼輸出什么？

function fn0(){
    function fn(){
        console.log(this);
    }
    fn();
}
fn0();   //window  因為是window調用了fn0()函數(shù)

document.addEventListener('click', function(e){
    console.log(this);  // document DOM中誰綁定，this就是誰
    setTimeout(function(){
        console.log(this);  //setTimeout及setInterval里的this均指window
    }, 200);
}, false);

4.下面代碼輸出什么，why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)  //// alert("Jhon"),因為call的第一個參數(shù)就是設置this的指向。

5. 代碼輸出？

var john = { 
  firstName: "John",
  surname: "Smith"
}

function func(a, b) { 
  alert( this[a] + ' ' + this[b] )
}
func.call(john, 'firstName', 'surname') 
//alert( "Jhon  Smith");  因為this指代的是Jhon

6.以下代碼有什么問題，如何修改

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this)   //this指的是$btn
      this.showMsg();  //由于$btn 沒有showMsg方法
    })
  },
  
  showMsg: function(){
    console.log('饑人谷');
  }
}
//沒有調用，因此，不會報錯，也不會執(zhí)行。

//修改  用一個變量保存this，此時this指的是module，然后在引入函數(shù)里面
var module= {
            bind: function(){
                var box=this; //這里this就指代的是module
                $btn.on('click', function(){
                    console.log(box); 
                    box.showMsg();
            })
        },
      
        showMsg: function(){
            console.log('饑人谷');
        }
    } 
module.bind();//需要調用才能執(zhí)行

7.代碼輸出？

var leng = 3;
    function fa() {
      console.log(this.leng);
      console.log(this);
    }

    var obj = {
      length: 2,
      doSome: function (fn) {
        fn();
        console.log(arguments);
        arguments.leng  = 123;  //類數(shù)組上綁定屬性leng和值
        arguments[0]();
        console.log( arguments.length );
      }
    }

    obj.doSome(fa)

Paste_Image.png

1.執(zhí)行obj.doSome(fa)時，fa()這個函數(shù)作為參數(shù)傳入doSome中, 因此執(zhí)行fn()就是執(zhí)行fa()。而fa()是在window環(huán)境下執(zhí)行的，我們定義了var length = 3，所以輸出3。
2.arguments是函數(shù)內參數(shù)的列表（是一個類數(shù)組對象，存了傳入函數(shù)的參數(shù)），因此arguments[0]()，就相當于執(zhí)行arguments.fa()。此時fa()的this是arguments對象

參考