箭头函数this指向面试题

2024-09-03

深入理解ES6箭头函数的this以及各类this面试题总结

ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性,俘获了大批粉丝儿它也可能是面试中的宠儿, 我们关键要搞清楚箭头函数和普通函数中的this 一针见血式总结: 普通函数中的this: 1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window (约定俗成) 3.在严格模式下,没有直接

ES6 箭头函数 this 指向

ES6 箭头函数 this 指向箭头函数有几个使用注意点: 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误. 不可以使用arguments对象,该对象在函数体内不存在.如果要用,可以用 Rest 参数代替. 不可以使用yield命令,因此箭头函数不能用作 Generator 函数. 上面四点中,第一点尤其值得注意.this对象的指向是可变的,但是在箭头函数中,它是固定的. function foo(

ES6 箭头函数this指向问题

箭头函数this指向问题

this指向本质箭头函数this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this.正是因为它没有this,所以也就不能用作构造函数. 箭头函数转成 ES5 的代码如下: // ES6 function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } // ES5 function foo() { var _this

es6箭头函数 this 指向问题

es5中 this 的指向 var factory = function(){ this.a = 'a'; this.b = 'b'; this.c = { a:'a+', b:function(){return this.a} } }; console.log(new factory().c.b()); // a+ 通过es5的语法调用,返回的是 a+ ,this 的指向是该函数被调用的对象,也就是说函数被调用的时候,这个 this 指向的是谁,哪个对象调用的这个函数,这个 this 就是谁.

5. 箭头函数_this 指向_es6 常用语法

1. 箭头函数函数的简写方式 () => {} 只有一个参数时,可以省略() ---- x => {} 只有一条语句时,可以省略{},此时这点语句的结果会作为函数的返回值返回 () => console.log('hello'); 特点: 箭头函数没有自己的 this,与离他最近的一层包裹它的函数的 this 一致,如果没有函数就指向 window 箭头函数没有 prototype 属性,有 __proto__ 属性箭头函数不能 new 调用箭头函数不能强制修改 this 指向

typescript 属性默认值使用箭头函数 this指向问题

今天注意到前端小伙伴用react 定义component class的方法的时候是通过箭头函数的方式,表示好奇. class Test extends React.Component { public fun1 = () => { console.log(this); }; fun2() { console.log(this); } } 如上代码中fun1的定义方式.于是感到好奇,fun1中的this是什么. 如果我们套用箭头函数的概念,我们可能认为,这中间的this是否会指向环境变量globa

ES6箭头函数this指向

普通函数中的this: 1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj 2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window (约定俗成) 3.在严格模式下,没有直接调用者的函数中的this是 undefined 4.使用call,apply,bind(ES5新增)绑定的,this指的是绑定的对象箭头函数中的this 箭头函数没有自己的this,

箭头函数中可改变this作用域，回调函数用箭头函数this指向page，自定义事件用箭头函数this指向undefined

1.回调函数中,用箭头函数改变this的作用域 success: (res)=>{ this.setData({ //此时,this指向page页面 ... }) } 2.自定义事件中,如果使用箭头函数,则箭头函数中的this指向undefined,不指向page onLike: (event)=>{ likeModel.like(this.data.classic.id) //报错,this指向undefined }, 需要修改成传统函数形式 onLike: function(event){

js中箭头函数及针对箭头函数this指向问题引出的单体模式

ES6允许使用“箭头”(=>)定义函数 var f = a = > a //等同于 var f = function(a){ return a; } 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分. //无形参 var f = () => 2; // 等同于 var f = function () { return 2 }; //多个形参 var sum = (a, b) => a + b; // 等同于 var sum = function(a, b) { r

ES6 箭头函数this指向

箭头函数有几个使用注意点. (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误. (3)不可以使用arguments对象,该对象在函数体内不存在.如果要用,可以用Rest参数代替. (4)不可以使用yield命令,因此箭头函数不能用作Generator函数. 上面四点中,第一点尤其值得注意.this对象的指向是可变的,但是在箭头函数中,它是固定的. function foo() { setTi

严格模式下顶层箭头函数this指向的是全局对象

我们知道普通函数调用,this在非严格模式下指向全局对象,在严格模式下是undefined.那箭头函数呢?我们知道,箭头函数没有自己的this,它的this是最近外层非箭头函数的this,那直接在顶层用的箭头函数的this在严格模式下是什么呢?不太好解释,我们看下代码 <body> <script type="text/javascript"> 'use strict' // x = 3 var a = { name1: 'gg', say: () =>

箭头函数 this指向问题

1.为什么要用箭头函数简洁易用固定this 指向(箭头函数在this定义时候生效) 2.箭头函数分析this指向 1.this指向调用函数的对象情况1 var obj={ a:"1", b:function(){//this指向这个function局部作用域这个作用域的调用对象是obj 所以this指向obj return ()=>{ console.log(this); //obj console.log(this.a) //'1' } } } obj.b()();

js 从两道面试题加深理解闭包与箭头函数中的this

壹 ❀ 引在本文之前我已经花了两个篇幅专门介绍了JavaScript中的闭包与this,正好今早地铁上看到了两道面试题,试着做了下发现挺有意思,所以想单独写一篇文章来记录解析过程.若你对于闭包与this有所了解,不妨先看自己的理解是否正确,若你对于这部分知识欠缺,还是建议先阅读我前面的两篇文章,链接在下: 一篇文章看懂JS闭包,都要2020年了,你怎么能还不懂闭包? js 五种绑定彻底弄懂this,默认绑定.隐式绑定.显式绑定.new绑定.箭头函数绑定详解那么本文开始. 贰 ❀ 题一 /

this 指向详细解析（箭头函数）

前言 this 指向问题是入坑前端必须了解知识点,现在迎来了ES6时代,因为箭头函数的出现,所以感觉有必要对 this 问题梳理一下,遂有此文在非箭头函数下, this 指向调用其所在函数的对象,而且是离谁近就是指向谁(此对于常规对象,原型链, getter & setter等都适用):构造函数下,this与被创建的新对象绑定:DOM事件,this指向触发事件的元素:内联事件分两种情况,bind绑定, call & apply 方法等, 容以下一步一步讨论.箭头函数也会穿插其中进行讨论.

[转载]this 指向详细解析（箭头函数)

本文转自:http://www.cnblogs.com/dongcanliang/p/7054176.html 为了以后更方便的查看,便做了转载前言 this 指向问题是入坑前端必须了解知识点,现在迎来了ES6时代,因为箭头函数的出现,所以感觉有必要对 this 问题梳理一下,遂有此文在非箭头函数下, this 指向调用其所在函数的对象,而且是离谁近就是指向谁(此对于常规对象,原型链, getter & setter等都适用):构造函数下,this与被创建的新对象绑定:DOM事件,this指

this指向问题（箭头函数没有this）

全局环境下,指向windows console.log(this.document === document); // true 函数上下文调用 function f1(){ return this; } f1() === window; // true 对象中的this 对象内部方法的this指向调用这些方法的对象,函数的定义位置不影响其this指向, 1. this指向只和调用函数的对象有关. 2. 多层嵌套的对象,内部方法的this指向离被调用函数最近的对象(window也是对象,其内

箭头函数里this理解

先来看代码: var obj1={ id:4, fn:function(){ var f=() => { console.log(this); //object,f()定义在obj1对象中,this就指向obj1,这就是箭头函数this指向的关键 setTimeout(function() { console.log(this);//window,非箭头函数的情况下还是要看宿主对象是谁,如果没有被对象调用,函数体中的this就绑定的window上 }); } f(); } } obj1.fn()

ES6-你不知道的箭头函数

一谈到ES6的箭头函数,大家可能想到的优点就是语法更简洁,因为去掉了return.function.{}等输入. 但是设计者果真就是出于简洁的目的推出的箭头函数吗?显然不是. => 箭头函数this设计的主要目的,以特定的方式改变this的行为特性,解决this相关编码的一个常见的痛点. => 箭头函数this设计的主要目的,以特定的方式改变this的行为特性,解决this相关编码的一个常见的痛点. => 箭头函数this设计的主要目的,以特定的方式改变this的行为特性,解

js this问题和es6箭头函数this问题

JS中this的四种用法 1.在一般函数方法中使用 this 指代全局对象 function test(){ this.x = 1; alert(this.x); } test(); //1 2.作为对象方法调用,this 指代上级对象 function test(){ alert(this.x); } var o = {}; o.x = 1; o.m = test; o.m(); // 1 3.作为构造函数调用,this 指代new 出的对象 function test(){ this.x =

vue 之箭头函数与对象的单体模式

箭头函数基本语法: ES6允许使用“箭头”(=>)定义函数 var f = a = > a //等同于 var f = function(a){ return a; } 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分. //无形参 var f = () => 5; // 等同于 var f = function () { return 5 }; //多个形参 var sum = (num1, num2) => num1 + num2; // 等同于 var s

箭头函数this指向面试题

热门专题