箭头函数中的this指向

最近做的项目中遇到了在箭头函数里使用this时报错的问题,把箭头函数的写法改成function()后,this的指向才达到预期。关于这个问题值得研究一下。

在箭头函数出现之前的ES5时代,this指向它的调用者。是哪个对象调用了这个属性或方法,this就指向这个对象。这有点像“我”这个人称代词,是从谁的嘴里说出了“我”,这个“我”就指代了谁。

一个简单的例子:

// 用var定义的变量,this指向window
// 调用sayName()等于调用this.sayName()等于调用window.sayName()
var name = 'window';
var sayName = function(){
  return this.name
}
console.log(sayName())          //window
console.log(this.sayName())     //window
console.log(window.sayName())   //window

// 用obj调用的sayName方法,其中this指向调用它的obj
var obj = {
  name : 'obj',
  sayName : function(){
    return this.name
  }
}
console.log(obj.sayName())      //obj

后来ES6规范中的箭头函数里面的this是在定义它时绑定的,指向它的父级作用域,而不是调用它对象,这个this的指向是不能通过call和apply改变的。

箭头函数在对象字面量中的this指向:

// 用var定义的变量,this指向window
// 虽然展现结果和上例一样,但是this的指向绑定的时机是有区别的,箭头函数在定义时已经绑定,普通函数只会在调用时确定
var name = 'window';
var sayName = () => {
  return this.name;         //this指向window
};
console.log(sayName());         //window
console.log(this.sayName());    //window
console.log(window.sayName());  //window

//同样用obj调用的sayName方法,this指向父级作用域window
var obj = {
  name: 'obj',
  sayName: () => {
    return this.name;
  }
};
console.log( obj.sayName() );     //window
console.log( obj.sayName() === window.sayName() );     //true

这是箭头函数this指向在对象字面量中的行为。多说一句,在用对象实例调用时会有所差别。

看下面的例子:

var name = 'window'

function Obj(name){     //构造函数Obj
  this.name = name;
  this.s1 = function(){
    return this.name;   //普通函数方法,this指向Obj
  }
  this.s2 = () => {
    return this.name;   //箭头函数方法,this还是指向Obj,因为构造函数function Obj(name)形成了一级作用域
  };
}
Obj.prototype.s3 = function(){
  return this.name;     //原型链上的普通方法,this指向实例obj1的构造函数Obj
}
Obj.prototype.s4 = () => {
  return this.name;     //原型链上的箭头函数,定义它的时候,这个箭头函数的父级作用域是window
}

//实例化对象
const obj1 = new Obj('obj');

console.log(obj1.s1());  //obj
console.log(obj1.s2());  //obj
console.log(obj1.s3());  //obj
console.log(obj1.s4());  //window
  • s2()箭头函数会去找定义它时的父级作用域,因为构造函数Obj也是个函数,它会形成自己的作用域。定义s2()的时候父级作用域变成了构造函数Obj所在的域
  • s4()和s2()的区别是s4()挂载到构造函数的原型上了,定义s4()的时候,这个箭头函数的父级作用域是window,所以用实例调用方法会输出了 ‘window‘

原文地址:https://www.cnblogs.com/sonicwater/p/12028929.html

时间: 2024-10-08 08:49:19

箭头函数中的this指向的相关文章

箭头函数中 的this指向

在javscript中,this 是在函数运行时自动生成的一个内部指针,它指向函数的调用者. 箭头函数有些不同,它的this是继承而来, 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象. var name = "window"; var test = { name:"demo", // 传统函数 getName1: function(){ console.log(this.name); // demo var that = this; setTimeo

区别ES3ES5和ES6this的指向问题。区分普通函数和箭头函数中this的指向问题

ES3 ES5this的指向问题 this指的是该函数被调用的对象 var foo = function () { this.a = 'a', this.b = 'b', this.c = { a: 'new a', b: function () { //new a 此时this指的是该函数被调用的对象 return this.a; } } } console.log(new foo().c.b()); //new a ES6的箭头函数 箭头函数的this指的是定义时this的指向,b在定义时,

深入理解ES6箭头函数中的this

简要介绍:箭头函数中的this,指向与一般function定义的函数不同,箭头函数this的定义:箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定. (1)一般函数this指向在执行是绑定  当运行obj.say()时候,this指向的是obj这个对象. var x=11; var obj={ x:22, say:function(){ console.log(this.x) } } obj.say(); //console.log输出的是22 (2)所谓的定义时候绑定,就

JavaScript箭头函数中的this详解

前言 箭头函数极大地简化了this的取值规则. 普通函数与箭头函数 普通函数指的是用function定义的函数: var hello = function () { console.log("Hello, Fundebug!"); } 箭头函数指的是用=>定义的函数: var hello = () => { console.log("Hello, Fundebug!"); } JavaScript箭头函数与普通函数不只是写法上的区别,它们还有一些微妙的不

箭头函数中的this

箭头函数中的this 箭头函数根据外层(函数或者全局)作用域来决定this 这样this就像其他面向对象的语言,在哪里定义就指向哪里 function foo() { return (x) => { console.log(this); } } var obj1 = { x: 1 }; var obj2 = { x: 2 }; var bar = foo.call(obj1); bar(); //=> { x: 1 } bar.call(obj2); //=> { x: 1 } foo(

改变函数中的 this 指向——神奇的call,apply和bind及其应用

在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这三个方法进行详细的讲解,并列出几个经典应用场景. 1.call(thisArgs [,args...]) 该方法可以传递一个thisArgs参数和一个参数列表,thisArgs 指定了函数在运行期的调用者,也就是函数中的 this 对象,而参数列表会被传入调用函数中.thisArgs 的取值有以下4

进阶路上有你我-相互相持篇之ES6里箭头函数里的this指向问题

首先复习下普通函数里的this指向: 1 function test(){ 2 console.log(this) 3 } 4 test() 你会秒杀的毫无疑问的回答:window,针对普通函数:谁调用了函数  函数里的this就指向谁,test()等价于window.test(),所以是window 1 var name="outername" 2 var o={ 3 name:"innername", 4 getname:function(){ 5 consol

关于箭头函数里this的指向

es6箭头函数里this的指向和普通的this还是有区别的,它是创建的时候就确定的, 其实我发现箭头函数的指向就是同级下的console.log(this)里的this,这样的话就能比较简单的理解多层嵌套情况下箭头函数里this的指向问题了 var f1 = { f2: { f3: { f6: console.log(this),//window f4: () => console.log(this) } } }; f1.f2.f3.f6;//window 相当于,在f4同级下放一个consol

js闭包中的this(匿名函数中的this指向的是windows)

1.普通函数中的this指向的是对象,匿名函数中的this指向的是windows,和全局变量一样 2.让匿名函数中的this指向对象的两种方法 可以使用对象冒充强制改变this:call().apply()        将this赋值给一个变量,闭包可以访问这个变量 一.this问题 匿名函数的执行环境具有全局性,因此其this对象通常指向window(当然,在通过call()或者apply()改变函数执行环境的情况下,this就会指向其他对象) 为什么匿名函数没有取得其包含作用域(或外部作用