箭头函数中this的指向问题

DDreach 发布于2019-08-22 13:53 / 2828人阅读

摘要：箭头函数中指向等箭头函数箭头函数的，总是指向定义时所在的对象，而不是运行时所在的对象。关键字通常不能在箭头函数中使用除非是嵌套在允许使用的函数内。参考资料的博客可以说很厉害了图解指向什么阮一峰关于箭头函数的讨论

箭头函数中this指向等

箭头函数 javascript this

“箭头函数”的this，总是指向定义时所在的对象，而不是运行时所在的对象。

箭头函数位于foo函数内部。只有foo函数运行后(被调用后，内部this确定)，它才会按照定义生成，所以foo运行时所在的对象，恰好是箭头函数定义时所在的对象

function foo() {
  setTimeout( () => {
    console.log("id:", this.id);
  },100);
}

var id = 21; // 箭头函数运行时所在的环境

foo.call( { id: 42 } ); // 箭头函数定义时所在的环境

// 结果是 id: 42

function foo() {
  return () => {
    return () => {
      return () => {
        console.log("id:", this.id);
      };
    };
  };
}

var f = foo.call({id: 1});

var t1 = f.call({id: 2})()();
var t2 = f().call({id: 3})();
var t3 = f()().call({id: 4});

// 结果是： 1，1，1

var obj = {
  field: "hello",
  getField: () => { 
      // 此时箭头函数被定义，this指向obj的this，而obj的this是window，则此箭头函数的this指向window
    console.log(this)
  },
}
obj.getField();

//window

箭头函数里不但没有 this，也没有 arguments, super ……

var arguments = 42;
var arr = () => arguments;

arr(); // 42

function foo() {
  var f = (i) => arguments[0]+i; 
  // foo函数的间接参数绑定
  return f(2);
}

foo(1); // 3

 var f = (i) => arguments; 
 f(1); // arguments is not defined

通过 call 或 apply 调用: 由于 this 已经在词法层面完成了绑定，通过 call() 或 apply() 方法调用一个函数时，只是传入了参数而已，对 this 并没有什么影响

var adder = {
  base : 1,
    
  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2

箭头函数不能用作构造器，和 new一起用会抛出错误。

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

箭头函数没有prototype属性。

var Foo = () => {};
console.log(Foo.prototype); // undefined

yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作生成器。

参考资料

MDN

zhengweikeng的博客

可以说很厉害了,图解javascript this指向什么？

阮一峰es6关于箭头函数 this 的讨论

云服务器 GPU云服务器 this的指向改变this指向指向函数的指针 js中回调函数问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92579.html

关于ES6中箭头函数的this问题

摘要：对象的指向是可变的，但是在箭头函数中，它是固定的。同样的由于箭头函数没有自己的所以传统的显性绑定无效内部的指向外部在的学习中，的指向问题一直是个难点，特别是在对象方法中使用时，必须更加小心。由此箭头函数在很大程度上减少了我们的困扰。什么是箭头函数用法 ES6 允许使用箭头（=>）定义函数测试 var p1 = document.getElementById(test1)...

LeviDing 2019-08-22 10:53 评论0 收藏0
论普通函数和箭头函数的区别以及箭头函数的注意事项、不适用场景

摘要：第二种情况是箭头函数的如果指向普通函数它的继承于该普通函数。箭头函数的指向全局，使用会报未声明的错误。 showImg(https://segmentfault.com/img/remote/1460000018610072?w=600&h=400); 箭头函数是ES6的API，相信很多人都知道，因为其语法上相对于普通函数更简洁，深受大家的喜爱。就是这种我们日常开发中一直在使用的API...

paulquei 2019-08-23 16:15 评论0 收藏0
ES6箭头函数体中this指向哪里？

摘要：注意因为箭头函数内部的是指向外层代码块的最近的，例中的函数的，所以我们可以通过改变外层代码块的的指向从而改变箭头函数中的指向例中使用了函数的方法。一、this关键字小测试 ES6箭头函数体中的this指向哪里？在回答这个问题之前先来揣揣你对this关键字的了解程度：（让我们回到ES6之前）题： var obj = { a: function() { cons...

Half 2019-08-22 15:48 评论0 收藏0
轻松搞定javascript中this的指向

摘要：调用在中，通过的形式调用一个构造函数，会创建这个构造函数实例，而这个实例的指向创建的这个实例。如下例所示，在构造函数内部使用并没有改变全局变量的值。显然，箭头函数是不能用来做构造函数。　　关于javascript中this指向的问题，现总结如下，如有不正确，欢迎指正。　　javascript中，this的指向并不是在函数定义的时候确定的，而是在其被调用的时候确定的。也就是说，函数的...

shinezejian 2019-08-23 12:14 评论0 收藏0
JavaScript 的 this 指向问题深度解析

摘要：而改变了这种状态，虽然定义的类用运算符得到的仍然是，但它不能像普通函数一样直接调用同时，中定义的方法函数，也不能当作构造函数用来调用。而在中，用调用一个构造函数，会创建一个新对象，而其中的就指向这个新对象。 JavaScript 中的 this 指向问题有很多博客在解释，仍然有很多人问。上周我们的开发团队连续两个人遇到相关问题，所以我不得不将关于前端构建技术的交流会延长了半个时候讨论 ...

liuchengxu 2019-08-20 14:22 评论0 收藏0