-
2022-06-24 11:43:30
箭头函数的this指向所在对象所处于的环境。
听起来有点绕,简单理解,箭头函数住哪儿,它里面的this就是指向它住所所处于的地方,而不是指向它的住所。
比如我住在房子里,房子在某某小区。那么就说我在某某小区,而不能说我在房子里。同理把我理解成箭头函数的this,就很好理解了。
来看第一个例子:
let obj={ init:()=>{ console.log(this)//window } }
上面这个例子中,箭头函数住在obj里面,obj就是住所或者房子,那么房子又在哪呢?房子在window环境里,那么箭头函数的this指向window。
箭头函数->obj->window,箭头函数指向window
再来看第二个例子:
var obj = { x:100, show(){ setTimeout( ( )=>{console.log(this.x) } , 500 ) } }
这个例子中的箭头函数住在show()里面,而show()方法在obj环境里面,所以箭头函数指向obj
箭头函数->show()->obj,箭头函数指向obj
注:父级作用域=所在外部环境
更多相关内容 -
箭头函数中的this指向
2021-04-25 11:13:45箭头函数中的this指向一、this二、普通函数1. 定义2. 实例三、箭头函数1. 定义2. 实例四、两者混用 一、this this作为关键字,它的作用就是引用,并且它通常只写在函数内部就是函数体内,在js中this的引用对象随着...一、this
this作为关键字,它的作用就是引用,并且它通常只写在函数内部就是函数体内,在js中this的引用对象随着函数的使用环境变化而变化。这里我们探讨一下普通函数和箭头函数中的this
二、普通函数
1. 定义
个人理解:普通函数的this与其定义位置无关,谁调用这个函数,this就指向谁。
2. 实例
在全局中:
window.name = 'window' function demo1() { console.log(this.name) } let a = {} a.name = 'a' a.speak = demo1 demo1() // window a.speak() // a
直接执行demo1函数,虽然看上去没有其他东西去调用demo,实际上是window在调用,所以this指向window,第二次我们用a去调用,则this指向a
在对象属性中:let demo2 = { name: 'demo2', speak1:function () { console.log(this.name); } } let b = { name: 'b', speak2: demo2.speak1 } demo2.speak1() // demo2 b.speak2() // b
同理,demo2调用时this指向demo2,b调用时this指向b
类中:
class Person { speak1 = function () { console.log(this.name); } } let c = new Person() c.name = 'c' let d = { name: 'd' } c.speak1() // c d.speak1 = c.speak1 d.speak1() // d
同理,实例c调用时this指向实例c,对象b调用时this指向对象b
三、箭头函数
1. 定义
个人理解:箭头函数的this跟调用者无关,定义位置所在的作用域的this(函数作用域)是谁,箭头函数的this就指向谁
2. 实例
在全局中:
window.name = 'window' let demo1 = () => { console.log(this.name); } demo1() // window let a = { name: 'a', speak: demo1 } a.speak() // window
demo1定义所在的作用域是全局,而全局的this指向window,所以无论是直接调用(使用window调用)还是用对象a调用,最终this都是window
在对象属性中:
window.name = 'window' let demo2 = { name: 'demo2', speak1: () => { console.log(this.name); } } let b = { name: 'b', speak2: demo2.speak1 } demo2.speak1() // window b.speak2() // window
箭头函数speak1定义在对象demo2中,但是对象demo2的this仍然指向window,所以无论是demo2调用还是b调用,最终this都是指向window
在类中:
class Person { speak1 = () => { console.log(this.name); } } let c = new Person() c.name = 'c' let d = { name: 'd' } c.speak1() // c d.speak1 = c.speak1 d.speak1() // c
箭头函数speak1定义在类Person中,Person的this指向它的实例化对象,即实例对象c。所以无论是使用c调用还是d调用,最终this都指向c
四、两者混用
普通函数是谁调用this指向谁,而箭头函数的this指向定义所在作用域的this。所以如果我们将箭头函数定义在普通函数内部,那箭头函数中的this将指向普通的this,即谁调用普通函数就指向谁
具体案例:window.name = 'window' let demo = { name: 'demo', speak1:function () { console.log(this.name); }, speak2: ()=> { console.log(this.name); }, speak3: function () { return (()=> { console.log(this.name); })() } } demo.speak1() // demo demo.speak2() // window demo.speak3() // demo
如果理解了这个案例,那么应该就理解了普通函数和箭头函数this指向的区别了
-
ES6 箭头函数及this指向
2022-04-20 21:09:26ES6 中箭头函数及this指向1.箭头函数
用箭头 => 定义函数
var fn = function(num){ return num; } var fn1 = (num)=>num; var fn3 = ()=>1; var fn4 = (num1,num2,num3)=>num
如果箭头函数的代码块部分有多条语句,就要使用大括号将它们括起来,并且使用 return 返回。
var func = (a,b)=>{ return a+b; }
由于花括号{} 被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外添加上花括号,否则会报错。
var func = (a,b)=>{name:a,age:b} //报错 var func4 = (a,b)=>{ return { name: a, age :b } } // 不报错
箭头函数还有一个更主要的作用: 解决this的指向问题。
2.this指向
先说一下普通函数中的this,普通函数中的this表示调用此函数时的对象。而箭头函数是没有自己的this的,箭头函数里面的this会继承自外部的this。或者用代码
块的概念解释会更加直观:箭头函数中的this就是外层代码块的this。举一个例子:
-
js箭头函数/函数this指向
2021-10-13 21:59:29一、函数的this指向 this是每一个函数都 一定有的关键词 this本质上是一个对象数据结构 用于指向数据 通过this关键词,可以调用操作这个 数据 1、this指向window 声明式函数 匿名函数 定时器 延时器 forEach...一、函数的this指向
this是每一个函数都 一定有的关键词
this本质上是一个对象数据结构 用于指向数据
通过this关键词,可以调用操作这个 数据
1、this指向window 声明式函数 匿名函数 定时器 延时器 forEach循环
2、this指向事件源 事件绑定中,事件处理函数 this指向默认是事件源,也就是绑定事件的标签对象
3、this指向数组/对象 数组/对象 中存储的函数this指向是这个数组/对象
二、箭头函数的this指向
箭头函数的this指向 是 父级程序的this指向
如果没有父级程序 或者 父级程序没有指向 箭头函数的this指向是window
(1)匿名函数绑定的事件处理函数 this指向默认是事件源 也就是div标签对象
oDiv.addEventListener('click' , function(){
console.log(this);
})
(2)箭头函数的this指向,是父级程序的this指向,下面的箭头函数没有父级程序,所以this指向是window
oDiv.addEventListener('click' , ()=>{
console.log(this);
})
(3)对象中定义的函数 和箭头函数
const obj = {
name:'张三',
age:18,
sex:'男',
// 对象中定义的函数 this指向是这个对象本身
fun1:function(){
console.log(this)
},
// 箭头函数,this指向是父级程序
// 当前箭头函数,父级程序是对象
// 对象是没有this的,箭头函数this指向是window
fun2:()=>{
console.log(this)
},
fun3:function(){
// 定义在对象中的函数fun3,this指向是对象本身
// 函数fun4是一个箭头函数
// 存储在 函数fun3 中 父级程序就是函数fun3
// 函数fun3的this指向是存储fun3的对象obj
// 箭头函数fun4 的this指向 和 父级程序fun3的this指向相同
// 也就是 obj对象本身
const fun4 = ()=>{
console.log(this);
}
fun4();
}
};
三、改变this指向 ==>通过JavaScript提供的函数方法
1、调用执行函数时 改变this指向
call
函数调用.call(参数1,参数2,参数3......)
参数1:要改变的指向
之后的参数2,参数3......是原始函数需要的数据
apply
函数调用.apply(参数1,[参数2,参数3....])
参数1:要改变的this指向
之后的所有参数以数组的形式赋值 原始函数需要的数据
call和apply执行程序的原理、结果都完全一致,只是给原始函数赋值参数的语法形式不同
2、【生成新的函数】时 改变this指向
bind
函数.bind(参数1,参数2,参数3....)
参数1:新的this指向
之后所有的参数 参数2,参数3......都是原始函数需要的参数数据
-
ES6箭头函数的this指向(适合小白理解)
2019-12-06 22:40:22ES6箭头函数的this指向(适合小白理解) 1.箭头函数适用的场景 作为一个值存在: var fn = ()=>{ console.log("HELLO") } fn() //HELLO 作为事件存在: document.onclick = ()=>{ console.log(1) }; //1 ... -
箭头函数this指向以及改变this指向的方法
2019-10-30 20:34:02箭头函数this指向以及改变this指向的方法 call apply bind 总结 相同点: 都可以改变函数内部的this指向 不同点 : 1.call和apply会调用函数,并且改变函数内部this的指向 2.call和apply传递的参数不一样,call传递... -
ES6对象方法声明对象时,箭头函数this的指向问题
2021-01-08 11:00:36没有this、super、arguments 和 new.target 绑定 不能通过 new 关键字调用 没有 prototype 不可以绑定this 的绑定 不支持argument 不支持重复命名参数 疑问 // 第一种 用 var 定义 value var value = '小明' ... -
箭头函数及其this的指向
2022-07-13 19:08:04目录一、箭头函数1、 基础语法 2、箭头函数简写 二、箭头函数的 this1、全局函数下的 this2、对象方法里面的 this3、构造函数的this4、 call()、apply()、bind()调用时的 thisES6中引入了箭头函数。箭头函数允许我们... -
箭头函数及其this指向
2022-04-05 11:10:22箭头函数 ...1、普通函数this指向: 指向它的调用者,如果没有调用者则默认指向window 2、箭头函数指向: 指向箭头函数定义的时候所处的对象,而不是其所使用的时候所处的对象,默认指向父级的this 综上: -
js中this指向的四种规则+ 箭头函数this指向
2021-01-20 23:31:44js中this指向的四种规则+ 箭头函数this指向 四种规则分别是:默认、隐式、显式(call、apply、bind)、new 对象 -
箭头函数与this指向详解
2022-07-16 17:52:12箭头函数以及箭头函数中this的指向问题 -
箭头函数this的指向及其改变
2022-03-17 11:06:55箭头函数this的指向及其改变 -
箭头函数的this指向
2021-06-03 23:57:11箭头函数的this指向 箭头函数 箭头函数为以下形式的函数 const func = (paramList) => { // 函数体 } 按照习惯,将箭头函数作为单独一个函数来使用的情况并不多,往往是当要传入的参数是函数时才使用箭头函数 /... -
js中的箭头函数以及它的this指向
2021-05-27 18:49:36箭头函数的5种形式 没有返回值的,没参数的 function a (){ console.log(111) } var a = () => console.log(111); a() 没有返回值的,有参数的 function a (name){ console.log(name) } var a = ... -
JS中普通函数this的指向,和箭头函数this的指向
2022-05-18 15:35:30JS中普通函数this的指向,和箭头函数this的指向 -
vue2知识点:箭头函数和普通函数的this指向问题
2022-06-24 16:19:59vue2知识点:箭头函数和普通函数的this指向问题 -
普通函数与箭头函数的this指向
2022-01-03 21:47:59在这里简单的说一下本身对this指向的浅薄理解 欢迎各位大佬补充!! 1.先简单的铺垫一个非常非常简单的知识点: 声明全局变量或普通函数 本质上其实是在给顶层对象window自定义属性和方法 这一点大家应该没什么... -
this指向 箭头函数中的this call、apply和bind方法的用法以及区别
2021-01-08 10:02:402.箭头函数的this: 指向箭头函数定义时所处的对象,而不是箭头函数使用时所在的对象,默认使用父级的this 箭头函数的父级还箭头还是 就从父级开始 向上查找 直到有(实际上箭头函数里并没有 this,如果你在箭头函数... -
箭头函数:this指向问题
2022-04-16 11:24:03箭头函数的this指向是静态的,始终指向函数声明时所在作用域下的this值。一篇解决你所有困惑。 -
箭头函数里的this指向问题
2022-01-23 18:01:29箭头函数的基础指向问题,简单易懂!!! -
1分钟搞懂箭头函数this指向问题
2020-03-23 23:10:57在网上看到很多关于箭头函数this指向的博客和问题解答,但是基本写的都不准确,有的甚至是错误的,在其他博客网站得到的答案基本就是“箭头函数在定义时this指向谁那么之后就一直指向谁”,这句话虽然不错,但是这不... -
为什么在vue中的methods中箭头函数的this指向undefined
2020-04-27 10:29:21先声明,本文站在巨人...1.箭头函数的this是在定义函数时继承了其父级作用域的this,不是在执行过程中绑定的。 2.vue默认开启了严格模式。 3.全局作用域下的函数中使用this,在严格模式下this指向undefined 以上... -
ES6——箭头函数以及this指向
2021-09-23 10:30:35ES6箭头函数的写法: const sum =(num1,num2)=>{ return num1 + num2; } 更简化的写法 const sum = (num1, num2) => num1 + num2; 简单理解的办法就是将function简化为const, sum(num1,num2)简化... -
彻底搞懂箭头函数 this 的指向问题
2022-05-18 17:56:51箭头函数没有this,它的this取决于作用域链上的this,它不可以通过 bind 等方法改变this 指向。 const obj = { a: () => { console.log(this) } } obj.a() // 1 .window const obj = { a: function() { ... -
关于箭头函数中的this的指向
2018-03-30 10:28:30普通函数中的this:1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window ... -
js箭头函数this的指向
2021-04-11 13:29:50箭头函数this指向最近作用域中的this 普通函数this指向调用他的对象, 箭头函数this指向最近作用域中的this(如果最近作用域没有this再向外一层一层的找直到找到最近的this) let obj = { aaa(){ console.log... -
JS箭头函数this指向问题
2020-04-20 16:44:47JS箭头函数this指向问题 鄙人简单认为箭头函数中的this指向即为包含箭头函数的那个函数的指向 如有错误,望大牛们多多指教 参考以下文章 链接: https://zhuanlan.zhihu.com/p/57204184. ... -
箭头函数 改变this指向
2020-04-09 22:55:571.箭头函数 <div>我是div</div> <script> const oDiv = document.querySelector('div'); // 普通函数 oDiv.addEventListener('click' , function(){ cons... -
普通函数和箭头函数this指向问题
2021-08-19 16:06:39箭头函数this指向:反之箭头函数的this是在定义的时候就确定了 例子1: 因为normalButton的点击事件绑定了normalFunction这个函数,所以函数里面的this动态指向了normalButton 箭头函数的this是函数... -
JS 箭头函数的this指向
2021-11-08 22:13:36箭头函数是ES6中的新增特性,他没有自己的this,其this指向从外层代码库继承。 使用箭头函数时要注意一下几点: 箭头函数不能用作构造函数,用的话会抛出一个错误 无法使用arguments参数,如果要用的话就用rest ...