前端中的this指向问题目录前言导语情况1 默认this指向情况2 箭头函数方式注意情况3 bind

前言

导语

情况1 默认this指向

前言

我是歌谣歌谣的意志是永恒的放弃很容易但是坚持一定很酷

导语

大家好我是歌谣对于平时中的一些问题还是有必要自己总结有时候自己不总结很难了解全部

编辑

情况1 默认this指向

console.log(this,"geyao") //window

直接在浏览器中直接打印找出this的指向是指向window

情况2 箭头函数方式

  //箭头函数
   geyao=()=>{
     console.log(this,"geyao")//window
   }
   geyao();

箭头函数的指向指向外层的this

注意

 //箭头函数
   geyao=()=>{
     console.log(this,"geyao")//window
   }
  //  geyao();
   //箭头函数不能作为构造函数
   new geyao()

箭头函数不能作为构造函数报错 Uncaught TypeError: geyao is not a constructor

情况3 bind绑定

 //bind绑定
  function geyao() {
    console.log(this)//geyao
  }
  geyao.bind("geyao").bind("fangfang")()

bind绑定以第一次绑定为准

注意

// 箭头函数
   geyao=()=>{
     console.log(this,"geyao")//window
   }
   geyao.bind("geyao").bind("fangfang")()

箭头函数中的this不会被修改

情况4 new绑定

function geyao() {
    console.log(this,"geyao") //geyao{}
  }
  new geyao()

new 对象的this指向当前的geyao对象

注意

  //new优先级大于bind
  function geyao() {
    console.log(this,"geyao") //geyao{}
  }
  fangfang= geyao.bind("fangfang")
  new fangfang();

new 的优先级大于bind

apply用法

  //apply用法
  function geyao(a,b){
  return a+b;  
}
function fangfang(a,b){
  return a-b;  
}
console.log(geyao.apply(fangfang,[4,2]));　　//fangfang调用geyao的方法 6
console.log(fangfang.apply(geyao,[4,2])); //geyao 调用fangfang的方法 2

call用法

  function geyao(a,b){
  return a+b;  
}
function fangfang(a,b){
  return a-b;  
}


//call用法
var a1 = geyao.call(sub,4,2);//6

区别在于通过 apply 调用时实参是放到数组中的，而通过 call 调用时实参是逗号分隔的

注意

//箭头函数的指向不会被apply改变
geyao=()=>{
     console.log(this,"geyao")//window
   }
   geyao.apply("fangfang")

箭头函数的指向不会被apply影响

注意

 function geyao(){
     console.log(this,"geyao")//fangfang
   }
  fangfang= geyao.bind("fangfang")
  fangfang.apply("geyao")

bind中this不会被改变

情况5 对象.

function geyao() {
  console.log(this.fangfang) //fangfang
}

obj = { fangfang: "fangfang" }
obj.geyao = geyao
obj.geyao()

注意

geyao=()=>{
  console.log(this.fangfang) //window undefined
}

obj = { fangfang: "fangfang" }
obj.geyao = geyao
obj.geyao()

箭头函数的优先级更高

注意

function geyao() {
  console.log(this) //fangfang
}

obj = { fangfang: "fangfang" }
obj.geyao = geyao.bind("geyao")
obj.geyao()

bind的优先级比对象.高

情况6 直接调用

function geyao() {
  console.log(this) //windows
}

geyao()

全局调用直接指向windows