彻底搞懂前端this指向

什么是this

this是javaScript中的一个关键字，是一个指针型变量,它动态指向当前函数的运行环境，this会执行上下文绑定一个对象，如何绑定一个对象呢？在不同条件下绑定的对象，这也是很多刚接触this的开发者捉摸不定的地方。

一，this指向

this在全局作用域下指向什么？

• 这个也是很简单，在全局this指向window
• 所以在全局作用域下，我们可以认为this指向window

consoe.log(this)  //window
var name=“zhangyy”
console(this.name) //zhangyy
console.log(window.name) //zhangyy

但是在我们开发中基本不会直接全局作用域下直接使用this，通常我们都是在函数中使用，但是在函数中使用，函数被调用时，都会创建一个执行上下文。

• 我们先来看一个简单的代码
  window

function fn(){
   console.log(this)
}
//1,直接调用
fn() //打印 window

//2，使用call/apply调用
   fn.call("zhangyy") // String {"zhangyy"}对象
//3，使用对象调用
   var obj={
   name:"zhangyy",
   age:28
   }
obj.fn() //obj对象

上面案例可以得出以下几点

• 1，函数在调用是，javaScript会默认给this绑定一个值
• this绑定和编写位置无关
• this的绑定和调用方式有关
• this在在运行是绑定

二，this绑定规则

2.1默认绑定

• 函数直接被调用,函数默认绑定时，函数中this指向全局对象window

//案例1
  function fn(){
   	console.log(this)  //window
  }
  fn() //window


//案例2
  function fn1(){
  	console.log(this)
  	fn2()
  }	
  function fn2(){
  	console.log(this) //window
  }
  fn1()	

//案例3
  fn3(){
  console.log(this) 
  }
   var obj={
   	name:"zhangyy",
   	fn:fn3
   }
   var obj1=obj.fn
   obj1() //window

//案例4
  function fn4() {
    function fn5() {
      console.log(this)
    }
    return fn5
  }
  
  var fn6 = fn4()
  fn6() // window

• 从以上案例我们可以得出，打印出来都是window，为什么呢？
• 因为我们可以看调用函数的位置，没用进行任何对象的绑定，都是单独调用

2.2隐式绑定

• 函数调用位置中，是通过某个对象发起的函数调用

 //案例1
   function fn(){
       console.log(this)
   }
   var obj={
   	name:"zhangyy",
   	age:28
   	}
   obj.fn() //obj对象
 //案例2
     var obj1 = {
     name: "obj1",
     fn() {
       console.log(this.name)
     }
   }
   
   var obj2 = {
     name: "obj2",
     bar: obj1.fn
   }

   obj1.fn()//obj1
   obj2.bar() //obj2

• 从以上案例我们可以得出，谁调用函数，this就绑定谁
• 2.显示绑定 apply/call/bind
• -显示绑定后，this就会明确的指向绑定的对象

	function fn() {
	  console.log(this)
	}
	var obj={
		name:"zhangyy"
		age:"28"
	}
	fn.call(obj) //obj
	fn.apply(obj)//obj
	fn.apply("apply")//String {"apply"}
	var newFn = fn.bind("newFn")
	newFn() //String {"newFn"}

三，new绑定

function Person(name, age) {
 this.name = name
 this.age = age
}

var p1 = new Person("zhangyy", 29)
console.log(p1.name, p1.age)

var p2 = new Person("jiangjj", 29)
console.log(p2.name, p2.age)

四，this绑定优先级

• 默认规则的优先级最低
• 显示高于隐式绑定 //例如：obj.fon.call(“zhangyy”) 结果//String {“zhangyy”}
• new高于隐式绑定
• new高于显示绑定