箭头函数里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();

  正如注释说的那样,可以描述出箭头函数里的this定义:

箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象,

定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this

上面的

var f=() => {
			console.log(this); 这一部分,箭头函数定义在了obj1对象里面,所以this指向obj1。

那么我们再来改变一下代码:
var obj1={
	id:4,
	fn:()=>{
		var f=() => {
			console.log(this);
			setTimeout(function() {
				console.log(this);
			});
		}
		f();
	}
}
obj1.fn();

  这里,我们给obj1的fn属性也改成了箭头函数,那么他又会输出什么呢?

没错,放到浏览器运行后,发现this都指向window对象。为什么不是obj1呢?

不是说箭头函数的this由定义的时候的作用域对象决定的吗?

其实是这样的,

var obj1={
	id:4,
	fn:()=>{这里面,obj1是{id:4,fn:()=>{}}这一整个的定义,而obj1是定义在整个代码空间下,或者说window下。所以this继承自window!!

原文地址:https://www.cnblogs.com/YKingcc/p/10230300.html

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

箭头函数里this理解的相关文章

关于箭头函数里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

进阶路上有你我-相互相持篇之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

React:JS中的this和箭头函数

JS中的this和纯面向对象(java,c++)中的this有点不大一样,其原因就是作用域不同,导致JS中的this的指向不明确,在java中的this指当前对象的this或当前类的this,在JS中function(){}里面没有特殊指定this的指向,这里的this时指向Window,但是在严格模式下,function(){return this}里面的this是undefined,箭头函数里面的this反而是Window,我们来看个例子(为了简单点,代码下面的>就是控制台的输入,<就是控

es6箭头函数

1.先来看看es6对函数做了什么:默认值! function add(a=1,b=2) {//默认值 console.log(a+b) } add(5,6); let a=0; if(a==0){ // throw new Error('错误')//手动报错 } //console.log(add.length)//如果给了默认值,那就不计算在必要参数里,也就是得到0了 //好奇的朋友可以打开注释试一试,这个默认参数和必要参数不一样哦,不给默认值的为必要参数,是你必须要传入的,给了默认值的就不用

关于es6的箭头函数使用与内部this指向

特型介绍:箭头函数是ES6新增的特性之一,它为JS这门语言提供了一种全新的书写函数的语法. 'use strcit'; let arr = [1,2,3]; //ES5 let es5 = arr.map(function(n){ return n*2; }); //ES6 let es6 = arr.map(n => n*2); console.log(es5); //[2,4,6] console.log(es6); //[2,4,6] 箭头函数简化了原先的函数语法,不需要再写 functi

ES6笔记② 箭头函数

特性介绍 箭头函数是ES6新增的特性之一,它为JS这门语言提供了一种全新的书写函数的语法. //ES5 function fun(x,y){ return x+y; } console.log(fun(5,10));//15 //ES6 var fun6 = (x,y) => {return x+y;} console.log(fun6(6,10));//16 ES6简化了声明函数,不需要再写 function . 好像除了简化代码,并没有什么新奇的对不对,那我们往下慢慢看. —————————

ES6 箭头函数this指向

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

es6箭头函数讲解

es6箭头函数的用法 箭头函数是es6的一种函数的简写方法. 如下: var f = v = > v; //等同于 var f = function(v){ return v; } var sum = (num1,num2) => num1+num2 ; //等同于 var sum = function(num1,num2){ return num1+num2 } [1,2,3].map(function (x) { return x * x; }); // 箭头函数写法 [1,2,3].ma

ES6箭头函数(节选自《ECMAScript 6 入门》)

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