前端中的this指向问题

​

目录

前言

导语

情况1 默认this指向

情况2 箭头函数方式

注意

情况3 bind绑定

注意

情况4 new绑定  

注意

apply用法

call用法

注意

注意

情况5 对象.

注意

注意

情况6 直接调用

---

前言

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

导语

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

​编辑

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

​