What's this?

一、apply、call 有什么作用，什么区别？

1.二者都属于function.prototype的一个方法，以另一个对象替换当前对象。
2.区别：

function.prototype.call()方法可以指定函数内部this的指向,即函数执行时所在的作用域。

var obj={};
var fn=function(){
   return this;
}
fn()===this; //true
fn.call(obj)===this; //false
fn.call(obj)===obj; //true

fn()执行时所在的作用域是全局环境,所以this是window,而fn.call(obj)则是在对象obj环境下执行的,所以此时的this指向obj。

funciton.prototype.apply()方法的作用与call方法类似，也是改变this指向，然后再调用该函数。唯一的区别就是，它几首一个数组作为函数执行时的参数。

function fn(x,y){ 
    return x+y;
}
fn.call(null,1,1); //2
fn.apply(null,[1,1]); //2

fn函数本来接收两个参数,使用apply方法之后,就变成可以接收一个数组作为参数。

二、以下代码输出什么?

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

结果：Johb:hi!

三、下面代码输出什么，为什么？

func();
function func() { 
  alert(this);
}

结果：[object Window]
原因：因为该函数是在全局环境window下执行的。

四、下面代码输出什么

function fn0(){
    function fn(){
        console.log(this); //输出的是window，因为this是在window下调用的
    }
    fn();
}
fn0();
document.addEventListener('click', function(e){
    console.log(this); //输出的是document，因为这个是事件绑定，所以this指的是事件源DOM对象
    setTimeout(function(){
        console.log(this); //输出的是window
    }, 200);
}, false);

五、下面代码输出什么，why？

var john = { 
  firstName: "John" 
}

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

结果：John
原因：函数实例func调用的call方法，使其执行环境在对象john下。所以函数func内部的this指向john对象。

六、代码输出？

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

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

结果：John Smith

七、以下代码有什么问题，如何修改？

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指什么? 输出的是&btn的dom对象
      this.showMsg();  //报错,因为这里的this指向的还是&btn的dom对象,在dom对象中找不到showMsg(),所以报错
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}

修改方法：

<body>
    <button class="btn">点击</button>
    <script>
        var $btn=$(".btn");
        var module={
            bind:function(){
                $btn.on("click",function(){
                    console.log(this);
                    module.showMsg();
                })
            },
            showMsg:function(){
                console.log("饥人谷");
            }
        }
        module.bind();
    </script>
</body>