前端中的this指向问题

简介: 前端中的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



相关文章
|
9月前
|
前端开发 JavaScript
前端基础 - JavaScript之this关键字
前端基础 - JavaScript之this关键字
32 0
|
2月前
|
前端开发 JavaScript
【前端面试】this的指向_不爱吃糖的程序媛夏天,web前端面试项目中的问题包括
【前端面试】this的指向_不爱吃糖的程序媛夏天,web前端面试项目中的问题包括
|
2月前
|
前端开发 JavaScript
【Web 前端】说一下this指向?
【4月更文挑战第22天】【Web 前端】说一下this指向?
|
2月前
|
前端开发 JavaScript 网络架构
前端this指向详解
前端this指向详解
45 0
|
11月前
|
前端开发
前端学习笔记202305学习笔记第三十四天-js-独立函数调用this之2
前端学习笔记202305学习笔记第三十四天-js-独立函数调用this之2
34 0
|
11月前
|
前端开发
前端学习笔记202307学习笔记第五十九天-react源码-callback函数内部this指向2
前端学习笔记202307学习笔记第五十九天-react源码-callback函数内部this指向2
33 0
|
2月前
|
JavaScript 前端开发
前端面试题-this.$nextTick
前端面试题-this.$nextTick
|
10月前
|
前端开发
前端经典面试题 | this相关问题
前端经典面试题 | this相关问题
|
11月前
|
前端开发
前端学习笔记202305学习笔记第三十四天-js-箭头函数-箭头函数中的this
前端学习笔记202305学习笔记第三十四天-js-箭头函数-箭头函数中的this
40 0
|
11月前
|
前端开发
前端学习笔记202306学习笔记第三十五天-js-箭头函数-箭头函数中的this之1
前端学习笔记202306学习笔记第三十五天-js-箭头函数-箭头函数中的this之1
45 0