首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

箭头函数与this指向探究

——柴陵郁禅师 今天研究了下箭头函数与this,发现了一些挺好玩的特性 首先,我们在控制台输入上这段js var handler = { name :'handler', init...// init4: {name: 'handler', init: ƒ} } init3.apply(); }, }; handler.init(); 可以明显的看到,箭头函数是锁定了...this指向的,这里的箭头函数中的this都指向这个handler对象 而使用function声明的函数中的this永远指向外部的window对象 我们再到webpack构建的vue项目中尝试 printThis...options: {…}, _renderProxy: Proxy, _self: VueComponent, …} print6.call(); }; print5(); } 可以看到这里的箭头函数中的...this都为undefined 而使用function声明的函数仍然指向当前Vue组件实例 了解这个特性,能清楚this的具体指向,方便后续前端开发

41810

重走前端路JS进阶篇:This 指向箭头函数

this 是js 给函数的一个绑定值。...如果打开严格模式 则为 udnefined this 的绑定规则如下: 绑定一:默认绑定 PS: 没有绑定到任何对象时 & 函数定义在对象中但是被独立调用 对象也是 window 绑定二:隐式绑定 PS:由JS..."obj2" }; obj1.foo(); (obj2.foo = obj1.foo)(); **情况三:**箭头函数 箭头函数不会绑定this、arguments属性 箭头函数不能作为构造函数来使用..." }) 箭头函数 基本写法 ():函数的参数 {}:函数的执行体 var foo3 = (name, age) => { console.log("箭头函数的函数体")...是踏入JS的敲门砖,如果不先系统了解之后使用的时候可能会出现奇怪的错误 使用ES6的语法 箭头函数 提前熟悉ES6语法可以提升开发效率

66730

ES6箭头函数中this指向谁?

ES6箭头函数中this (1)默认指向定义它时,所处上下文的对象的this指向。...即ES6箭头函数里this的指向就是上下文里对象this指向,偶尔没有上下文对象,this就指向window (2)即使是call,apply,bind等方法也不能改变箭头函数this的指向 一些实例加深印象...(1)hello是全局函数,没有直接调用它的对象,也没有使用严格模式,this指向window function hello() { console.log(this); // window...obj,setTimeout箭头函数,this指向最近的函数的this指向,即也是obj const obj = { num: 10, hello: function () { console.log...perimeter是箭头函数,this应该指向上下文函数this的指向,这里上下文没有函数对象,就默认为window,而window里面没有radius这个属性,就返回为NaN。

1.7K10

Js箭头函数

Js箭头函数 箭头函数是ES6新增的语法,提供了一种更加简洁的函数书写方式,类似于匿名函数,并且简化了函数定义。 完整写法 完整写法类似于匿名函数,省略了function关键字。...由于箭头函数没有自己的this指针,使用apply、call、bind仅能传递参数而不能动态改变箭头函数的this指向。...this指向,所以指向Window s2为普通函数,可以改变this指向,所以this指向了调用者 */ var contextObj = { e: function() {...this指向,所以指向contextObj对象 s2为普通函数,可以改变this指向,所以this指向了调用者 */ 利用箭头函数的this指向特点可以解决一些问题,例如常见的回调函数中this指向问题...this指向箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。

4.9K20

还在受JS的this指向问题困扰?来看看Es6的箭头函数

箭头函数 基本语法 (x,y)=>{ ...函数体 } //es6 let res = (x,y)=>{ console.log(x,y) } res(2,3); //es5 let...,箭头函数还有一个很重要的特性,箭头函数内部的this是由上下文决定的,什么意思?...console.log(this.sex); }, 2000) } person.show();//undefind 结果返回undefind,设置因为普通函数会改变this指向的问题...} person.show();//undefind 可以看到this由person变成了window所以最后结果是undefind 没有接触Es6之前我们或许会这样解决this指向的问题...this,箭头函数的this不是在调用时决定的,而是在定义的时候处在的对象就是他的this 箭头函数看外出是否有函数,如果有外出函数的this就是箭头函数的this 如果没有this指向window

19710

面试官:箭头函数和普通函数的区别?箭头函数的this指向哪里?

一、箭头函数更直观、简洁 箭头函数为匿名函数 let a = () => {} 有一个参数可省略(),多个的话不能省略(),用 ,号分开 let a = m => {} let b = (m, n...people = { name: 'xiaoming', fn: () => { console.log(this.name) // 没有返回值 console.log(this, '箭头函数的...arguments,值是有外围非箭头函数所决定的 // 报错 let a = (m) => { console.log(arguments) } a(1,2,3) // arguments is...not defined // 值是有外围非箭头函数所决定的 function fn(){ let f = ()=> { console.log(arguments) } f();...Generator函数,不能使用yield关键字 箭头函数的this指向为其上下文的this,一级一级往上找,直到找到 window 当然箭头函数与普通函数的区别还有很多,小编总结的也不是很齐全,有想法的

50430

javascript基础修炼(8)——指向FP世界的箭头函数

箭头函数 箭头函数是ES6语法中加入的新特性,而它也是许多开发者对ES6仅有的了解,每当面试里被问到关于“ES6里添加了哪些新特性?”这种问题的时候,几乎总是会拿箭头函数来应付。...箭头函数,=>,没有自己的this , arguments , super , new.target ,“书写简便,没有this”在很长一段时间内涵盖了大多数开发者对于箭头函数的全部认知(当然也包括我自己...如果你也曾以为【函数式编程】就是“用箭头函数把函数写的精简一些”,如果你也被各种复杂的this绑定弄的晕头转向,那么就一起来看看这个胖箭头指向的新世界——Functional Programming吧!...因为只有这样,我们才不必在对函数进行传递和组合的时候小心翼翼,生怕在某个环节弄丢了this的指向,如果this直接报错还好,如果指向了错误的数据,程序本身在运行时也不会报错,这种情况的调试是非常令人头疼的...Rx.js和Immutable.js 事实上笔者自己也还没有进行到这个阶段的学习,Rx.js是隶属于Angular全家桶的,Immutable.js是隶属于React全家桶的,即使在自己目前的工作中没有直接使用到

45430

JS中的this指向问题

第一个参数是undefined或者null,非严格模式下,是指向window。严格模式下,就是指向第一个参数。后文详细解释。 经常有这类代码(回调函数),其实也是普通函数调用模式。...根据参数thisArg的描述,可以知道,call就是改变函数中的this指向为thisArg,并且执行这个函数,这也就使JS灵活很多。严格模式下,thisArg是原始值是值类型,也就是原始值。...箭头函数中没有this绑定,必须通过查找作用域链来决定其值。 如果箭头函数被非箭头函数包含,则this绑定的是最近一层非箭头函数的this,否则this的值则被设置为全局对象。...this是缓存的该箭头函数上层的普通函数的this。...this指向问题可以考察new、call、apply、bind,箭头函数等用法。从而扩展到作用域、闭包、原型链、继承、严格模式等。

1.3K30
领券