一篇全——函数的this指向（箭头函数，call，apply，bind方法）

函数的定义

1. 自定义函数（命名函数）
   • function fn() {};
2. 函数表达式（匿名函数）
   • var fun = function() {};
3. 利用 new Function(‘参数1’，‘参数2’，‘函数体’);
   • var f = new Function('a', 'b', 'console.log(a+b)'); f(1,2);//3
4. 所有函数都是Function的实例对象
5. 函数也属于对象

函数的调用(this指向)

​ this一般指向我们的调用者

1. 普通函数 (this指向window)
   function fn() {}
fn(); fn.call()

2. 对象的方法 （this指向该方法所属对象）

   var o = {
   	sayHi:function() {
   		console.log(this)//this指向o这个对象
   	}
   }
   o.sayHi();
   

3. 构造函数 （this指向实例对象，原型对象里面的方法也指向实例对象）
   function Star() {

   console.log(this) //this指向 p 实例对象

   } var p = new Star();

4. 绑定事件函数 （this指向绑定事件对象）
   btn.onclick = function() {};//点击按钮调用

5. 定时器函数（this指向window）
   setInterval(function(){

   console.log(this)

   },1000) //定时器自动一秒调用一次

6. 立即执行函数 （this指向window）
   (function() {console.log(this)})()

7. 箭头函数没有自己的this

函数提升

• foo()//调用函数
  function foo(){
  	console.log('声明之前被调用');
  }
  
  //不存在提升
  bar()//错误
  var bar = function(){
  	console.log('函数表达式不存在提升现象');
  }
  

• 函数表达式不存在提升现象

• 函数提升到当前作用域最前面

箭头函数

• const fn = (i,v) => {return i+v};

• 形参只有一个可以省略小括号，
  函数体只有一句代码且执行结果就是函数的返回值也可以省略大括号

  const fn = v => alert(v);

• 箭头函数没有自己的this，指向定义箭头函数位置中的this

  function fn(){
  	console.log(this);
  	return () => {
  		console.log(this);//箭头函数this指向定义其位置中的this，即指向函数作用域中的this
  	}
  }
  const obj = {name:'Lucy'};
  const result = fn.call(obj);
  result();
  

• 面试题

  var age = 100;
  var obj = {
  	age: 20,
  	say: () => { //由于obj没有作用域，所以箭头函数定义在window身上
  	alert(this.age);//若全局没有age,则弹出undefined
  	}
  }
  obj.say();//100
  

改变函数内部this指向

1. call方法

• 可以调用函数

• 可以改变函数内的this指向

  var o = {
  	name:'Lucy'
  }
  function fn(){
  	console.log(this)
  }
  fn();//this指向window
  fn.call(o,1,2);//this指向o对象
  

• 主要作用可以实现继承

  function Father(uname,age){
  	this.uname = uname,
  	this.age = age
  }
  function Son(uname,age){
  	Father.call(this,uname,age)
  }
  var son = new Son('Lucy',18);
  console.log(son);//Son {uname: 'Lucy', age: 18}
  

2. apply方法

• 可以调用函数

• 改变函数内部的this指向

• 它的参数必须是数组（伪数组）

  function fn(arr){
  	console.log(this);//this指向o
  	console.log(arr);//'pink'
  }
  fn.apply(o,['pink']);//参数不是数组会报错
  

• apply主要应用 求最大最小值
  var arr = [1,66,2,99,3]
Math.max.apply(Math,arr);//99
Math.min.apply(Math,arr);//1

3.bind方法

• 不会调用原来的函数

• 改变原来函数内部的this指向

• 返回的是原函数改变this之后产生的新函数

  var o = {
  	name:'Lucy'
  }
  function fn(a,b){
  	console.log(this);//指向o
  	console.log(a+b);//3
  }
  fn.bind(o,1,2);//不会调用
  //返回新函数
  var f = fn.bind(o,1,2)
  f();
  

• bind应用

  var btns = document.querySelectorAll('button');
  for(var i=0;i<btns.length;i++){
    btns[i].onclick = function(){
  	this.disabled = true;//指向btn
  	setTimeout(function(){
  		this.disabled = false;//用bind改变this指向btn
  	}.bind(this),3000); //这个this指向btn
  }  
  }