问答

1.apply、call 有什么作用，什么区别

call和apply都可以调用一个函数，传入函数执行上下文及参数
写法：

fn.call(context, param1, param2...)

fn.apply(context, paramArray)

语法很简单，第一个参数都是希望设置的this对象，不同之处在于call方法接收参数列表，而apply接收参数数组。

代码

1.以下代码输出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi() 

输出： John:hi!
如下图所示:

2.下面代码输出什么，为什么

func() 

function func() { 
  alert(this)
}

输出： window
如下图示：

Paste_Image.png

原因:
在函数func被直接调用时this绑定到全局对象。在浏览器中，window就是该全局对象

3.下面代码输出什么

function fn0(){
    function fn(){
        console.log(this);
    }
    fn();
}

fn0();


document.addEventListener('click', function(e){
    console.log(this);
    setTimeout(function(){
        console.log(this);
    }, 200);
}, false);

输出：
window
点击页面时输出：
document
window
如下图所示:

4.下面代码输出什么，why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john) 

输出：John
结果如下图所示:

原因：
func.call(john)，.call()设置了this对象是john，john.firstName就是John。

5.代码输出？

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

function func(a, b) { 
  alert( this[a] + ' ' + this[b] )
}
func.call(john, 'firstName', 'surname') 

输出：
John Smith
结果如下图所示：

原因:
func.call(john, 'firstName', 'surname')中.call()的第一个参数是john,代表设置this对象是john，后面的几个参数是this对象的参数，即john的几个属性，所以this[a]是John，this[b]是Smith。

6.以下代码有什么问题，如何修改

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指什么
      this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}

问题：
控制台不会输出饥人谷这三个字，因为console.log(this)中的this指的是$btn，不是module对象，所以调用不到showMsg方法。
修改：

var module= {
  bind: function(){
    var  cur=this;//this对象指向module时，存储在一个变量里
    $btn.on('click', function(){
      console.log(this) //this指什么
      cur.showMsg();
    })
  },
  showMsg: function(){
    console.log('饥人谷');
  }
}

7.下面代码输出什么

var length = 3;
function fa() {
  console.log(this.length);
}
var obj = {
  length: 2,
  doSome: function (fn) {
    fn();
    arguments[0]();
  }
}
obj.doSome(fa)

输出：
3
1
结果如图所示：

原因：
obj.doSome(fa)调用obj对象的doSome方法，把fa作为参数传进函数，下一步运行fa()，是window调用了函数fa()，输出的this.length是window.length，length变量默认是window.length，结果是3；
arguments是doSome的参数的集合，doSome有一个参数fn，即arguments[0]()表示fa()，此时arguments[0]的this对象是doSome，doSome的长度是1，输出1。

本文版权归本人和饥人谷所有，转载请注明出处