This、闭包

apply、call 的作用及区别

• 作用：在指定this值和参数值的前提下去调用函数或方法。
• 区别：A for array,C for comma ! apply方法接受的是一个包含多个参数的数组，而call方法接受的是一个参数列表。
  • theFunction.call( this, arg1, arg2, arg3... )
  • theFunction.apply( this, [arg1,arg2,arg3...] )

小练习

1.以下代码输出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func   // 把 func 拷贝了一份，存在对象john的sayHi属性中
john.sayHi()    // 输出 "john: hi!"  这个函数的拥有者是john这个对象 this指向john

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

func()         // 输出 window对象 这个函数的拥有者是window对象或称全局对象

function func() { 
  alert(this)        
}

3.下面代码输出什么

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

fn0();  // 输出window对象 fn0这个函数的拥有者是window对象 其内部的this指向window对象


document.addEventListener('click', function(e){
  console.log(this);     // 点击 输出document对象 实质是拷贝了一份函数给document的click属性 这个函数属于document对象
  setTimeout(function(){
    console.log(this);   // 200毫秒后 输出window对象 setTimeout是运行在全局环境下的 属于window对象
  }, 200);
}, false);

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

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)  // 输出 "John" call在指定了john作为this的前提下去调用了func

5.代码输出？

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

function func(a, b ) { 
  alert( this[a] + ' ' + this[b] )
}
func.call(john, 'firstName', 'surname')  // 输出 "John Smith" call在指定john作为this的前提下调用了func

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

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指的是btn这个元素 实质拷了一份函数给btn的click属性 函数属于btn
      this.showMsg();  // 报错 这不是一个函数
    })
  },

  showMsg: function(){
    console.log('饥人谷');
  }
}

var module= {
  bind: function(){
    var self=this;
    $btn.on('click', function(){
      console.log(this) 
      self.showMsg(); // 本来我是直接改成module的 看了老师对育薇同学的点评   发现以后改名的话会出问题 其他人不容易发现里面这个东西。。维护太艰难 也意识到工程化模块化的重要性了
    })
  },

  showMsg: function(){
    console.log('饥人谷');
  }
}

7.下面代码输出什么? why

obj = {
  go: function() { alert(this) }
}

obj.go();    // 输出 obj对象 这个函数属于obj

(obj.go)();     // 输出 obj对象 全局中并没有这个函数 函数还是在obj中是属于obj的

(a = obj.go)();     // 输出 window对象 函数被赋值给了全局变量a再遇到括号执行了 这个函数属于window对象

(0 || obj.go)();     // 输出 obj对象 看了同学们的解释才知道 多了一个传递的过程 以一个全局变量做中转来存储结果 所以与上一例相同