【js学习笔记十三】前端中的this指向问题

目录

前言

导语

情况1 默认this指向

情况2 箭头函数方式

注意

情况3 bind绑定

注意

情况4 new绑定  

注意

apply用法

call用法

注意

注意

情况5 对象.

注意

注意

情况6 直接调用

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

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

编辑

情况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