网易试题——关于箭头函数与this和arguments的关系

昨天做试题的时候遇到了这个题目

        var a = 1;function fn1() {console.log(this.a)}const fn2 = () => {console.log(this.a)}const obj = {a: 10,fn1: fn1,fn2: fn2}fn1()fn2()obj.fn1()obj.fn2()

哦这该死的网易，怎么出这么简单的题目，答案是：1，1，10，10 对，应该是这样的，吧？

可是再仔细一想，不对啊，我记得箭头函数的this对象好像不是在运行时基于函数的执行环境绑定的，他是有点奇怪的，事后仔细查了资料才知道，原来正确答案应该是：1，1，10，1

一言概之，是因为：箭头函数的this和arguments只会从它自己所在作用域链的上一层继承，不会创建自己的this和argumrnts！！！（只有函数才会有this和arguments属性）

让我再举几个例子给泥们looklook：

//普通函数var obj = {bar: function () {console.log(this); // 被obj调用，this指向{bar: ƒ}bar: ƒ ()__proto__: Object             var x = function() {console.log(this)//Window对象};return x;//闭包，this通常(即不使用箭头函数的情况)默认为全局对象，若在严格模式则为undefined}};var fn = obj.bar();fn() ; //箭头函数
// 创建一个含有bar方法的obj对象，// bar返回一个函数，// 这个函数返回this，// 这个返回的函数是以箭头函数创建的，// 所以它的this被永久绑定到了它外层函数的this。// bar的值可以在调用中设置，这反过来又设置了返回函数的值。var obj = {bar: function () {console.log(this); // {bar: ƒ}bar: ƒ ()__proto__: Object             var x = (() => this);return x;}};// 作为obj对象的一个方法来调用bar，把它的this绑定到obj。// 将返回的函数的引用赋值给fn。var fn = obj.bar();//此时外层函数已经运行完毕，他的this已经绑定到{bar: ƒ}这个环境console.log(fn() === obj); // trueconsole.log(fn()); // {bar: ƒ}bar: ƒ ()__proto__: Object  // 直接调用fn而不设置this，// 通常(即不使用箭头函数的情况)默认为全局对象// 若在严格模式则为undefined// 但是注意，如果你只是引用obj的方法，// 而没有调用它,this没有及时绑定到{bar: ƒ}这个环境var fn2 = obj.bar;// 那么调用箭头函数后，this指向window，因为它从 bar 继承了this。console.log(fn2()() == window); // true/* 此时等于在全局环境中调用 function () {console.log(this); // {bar: ƒ}bar: ƒ ()__proto__: Object             var x = (() => this);return x;}*/

再来一粒，这次带有arguments

  //普通函数var name = "The Window";var object = {name: "My Object",getNameFunc: function () {console.log(arguments[0],'aa')//4console.log(this.name)//"My Object"return function () {//闭包，this通常指向windowconsole.log(arguments[0],'a')//5return this.name;};}};console.log(object.getNameFunc('4')('5'));  // The Window//箭头函数var name = "The Window";var object = {name : "My Object",getNameFunc : function(a) {console.log(this.name)//"My Object"console.log(arguments[0],'aa')//4return (a) => {console.log(arguments[0],'a')//4,这里是继承了上一层的argumentsreturn this.name;    //虽然是闭包，但成功继承了上一层的this};}};console.log(object.getNameFunc('4')('5'));  //"The Object"//函数都是箭头函数var name = "The Window";var object = {name : "My Object",getNameFunc : (a) => {console.log(this.name)//"The Window"//console.log(arguments[0],'aa')//errorreturn (a) => {//console.log(arguments[0],'a')//errorreturn this.name;    };}};console.log(object.getNameFunc('4')('5'));  //"The Window"//此时虽然是object调用了getNameFunc函数，但是箭头函数的this是指向上一层环境，即全局环境，所以this指向Window对象，而Window对象没有arguments，所以会出错

箭头函数还有一个值得注意的特性—— 无法使用call或者apply绑定this值。

由于箭头函数没有自己的this指针，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定this），他们的第一个参数会被忽略。（这种现象对于bind方法同样成立）

          var name = "The Window";var object = {name : "My Object",getNameFunc : function(a) {console.log(this.name)//"outer"console.log(arguments[0],'aa')//4return (a) => {console.log(arguments[0],'a')//4return this.name;    };}};console.log(object.getNameFunc.call({name:'outer'},'4').call({name:'inner'},'5'));  //"outer"

再来一题,也是网易的

        function fun() {return () => {return () => {return () => {console.log(this.name)}}}}var f = fun.call({ name: 'foo' });
f.call({name:'1'})()()//foo
f().call({name:'2'})()//foo
f()().call({name:'3'})//foo

你做对了吗？

网易试题——关于箭头函数与this和arguments的关系相关推荐

ES6-6 - this指向、箭头函数基本形式、rest运算符
一 chrome断点调试观察函数调用栈 // 25min var x = 1; function foo(x, y = function () { x = 2; console.log(2) }) ...
深入理解this机制系列第三篇——箭头函数
前面的话 this机制与函数调用有关,而作用域则与函数定义有关.有没有什么是可以将this机制和作用域联系起来的呢?本文将介绍ES6新增的内容--箭头函数痛点对于闭包的痛点在于,闭包的this默认 ...
ES6箭头函数（节选自《ECMAScript 6 入门》）
基本用法 ES6 允许使用"箭头"(=>)定义函数. var f = v => v; 上面的箭头函数等同于: var f = function(v) {return v ...
箭头函数的this指向谁_高阶函数
NodeJS 系列文章,本篇是第一篇,首先,预计将后续高频使用逻辑串一遍,依次是高阶函数,promise以及事件机制.本篇主要是高阶函数. call.bind.apply call.apply 都是改 ...
button执行onclick函数_千万别再一直无脑使用ES6的箭头函数了，它虽然很有用但并不是万能的...
相信很多小伙伴自从知道了ES6的箭头函数以后,都疯狂得使用,渐渐的淡忘了普通函数的使用.不过确实,箭头函数看起来比较简洁,用起来也舒服,不过它的出现是为了解决某一部分问题的,并不是用来替代普通函数的, ...
ES6函数相关包含箭头函数
转载地址:https://es6.ruanyifeng.com/?search=%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0&x=0&y=0#docs/fu ...
ES6之什么是箭头函数？
箭头函数是匿名函数,ES5匿名函数的语法糖:但又增加了ES5所没有的一些优点,接下来我们一起来看一看箭头: //ES5 var tt = function tt() {return 55 + 99; ...
深入理解JavaScript箭头函数
箭头函数就是个简写形式的函数表达式,并且它拥有词法作用域的this值(即不会新产生自己作用域下的this,arguments,super和new.target等对象).此外,箭头函数总是匿名的. 语法 ...
JavaScript—箭头函数
箭头函数表达式的语法比函数表达式短,并且不绑定自己的 this,arguments,super或 new.target.此外,箭头函数总是匿名的.这些函数表达式最适合非方法函数,它们不能用作构造函数. ...

网易试题——关于箭头函数与this和arguments的关系

网易试题——关于箭头函数与this和arguments的关系相关推荐

最新文章

热门文章