js中的this和箭头函数中的this
一、ES6 允许使用“箭头”(=>)定义函数。
// var f = v => v;
// 上面的箭头函数等同于:
// var f = function(v) {
// return v;
// };
// 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
// 由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。
箭头函数可以与变量解构结合使用。
const full = ({ first, last }) => first + ' ' + last;
// 等同于
function full(person) {
return person.first + ' ' + person.last;
}
箭头函数使得表达更加简洁。
const isEven = n => n % 2 == 0;
const square = n => n * n;
箭头函数的一个用处是简化回调函数。
// 正常函数写法
[1,2,3].map(function (x) {
return x * x;
});
// 箭头函数写法
[1,2,3].map(x => x * x);
下面是 rest 参数与箭头函数结合的例子。
const numbers = (...nums) => nums;
numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]
const headAndTail = (head, ...tail) => [head, tail];
headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]
// 箭头函数有几个使用注意点。
// (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
// (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
// (3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
// (4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
// 上面四点中,第一点尤其值得注意。this对象的指向是可变的,但是在箭头函数中,它是固定的。
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 });
// id: 42
// 上面代码中,setTimeout的参数是一个箭头函数,这个箭头函数的定义生效是在foo函数生成时,而它的真正执行要等到 100 毫秒后。如果是普通函数,执行时this应该指向全局对象window,这时应该输出21。但是,箭头函数导致this总是指向函数定义生效时所在的对象(本例是{id: 42}),所以输出的是42。
// 箭头函数可以让setTimeout里面的this
// ,绑定定义时所在的作用域,而不是指向运行时所在的作用域。
// 下面是另一个例子。
function Timer() {
this.s1 = 0;
this.s2 = 0;
// 箭头函数
setInterval(() => this.s1++, 1000);
// 普通函数
setInterval(function () {
this.s2++;
}, 1000);
}
var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0
// 上面代码中,Timer函数内部设置了两个定时器,分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域(即Timer函数),后者的this指向运行时所在的作用域(即全局对象)。所以,3100 毫秒之后,timer.s1被更新了 3 次,而timer.s2一次都没更新。
// 实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数。
// 请问下面的代码之中有几个this?
function foo() {
return () => {
return () => {
return () => {
console.log('id:', this.id);
};
};
};
}
var f = foo.call({id: 1});
var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1
// 上面代码之中,只有一个this,就是函数foo的this,所以t1、t2、t3都输出同样的结果。因为所有的内层函数都是箭头函数,都没有自己的this,它们的this其实都是最外层foo函数的this。
// 除了this,以下三个变量在箭头函数之中也是不存在的,指向外层函数的对应变量:arguments、super、new.target。
二、
<script type="text/javascript">
window.val = 1;
var obj = {
val: 2,
dbl: function () {
val = 3;//加上这句话则为6,4,12,12
// var val = 3;//加上这句话则为6,4,6,2
alert(this.val);//2
alert(val);//1
this.val *= 2;
val *= 2;
console.log(val);
console.log(this.val);
}
};
// 说出下面的输出结果
obj.dbl();
var func = obj.dbl;
func();
//2,4,8,8
//严格模式下的this
function test() {
'use strict';
console.log(this);
}
test();
//箭头函数中的this
var obj = {
say: function () {
setTimeout(() => {
console.log(this)
});
}
}
obj.say(); // obj
var obj = {
say: function () {
console.log(this); //obj
setTimeout(function(){
console.log(this); //在又嵌套的setTimeout函数中为window
});
}
}
obj.say(); // obj
//复杂情况: 普通函数和箭头函数混杂嵌套
var obj = {
say: function () {
var f1 = function () {
console.log(this); // window, f1调用时,没有宿主对象,默认是window
setTimeout(() => {
console.log(this); // window
})
};
f1();
}
}
obj.say();
//都是 window,因为 箭头函数在定义的时候它所处的环境相当于是window, 所以在箭头函数内部的this函数window
// 严格模式下的混杂嵌套
var obj = {
say: function () {
'use strict';
var f1 = function () {
console.log(this); // undefined
setTimeout(() => {
console.log(this); // undefined
})
};
f1();
}
}
obj.say()
// 结果都是undefined
// 说明: 严格模式下,没有宿主调用的函数中的this是undefined!!!所以箭头函数中的也是undefined!
// 总结:
// 使用箭头函数,可以让我们解决一些在匿名函数中 this指向不正确的问题; 但是要注意在和普通函数混合的时候,this的指向可能是window !
</script>
js中的this和箭头函数中的this的更多相关文章
- js 从两道面试题加深理解闭包与箭头函数中的this
壹 ❀ 引 在本文之前我已经花了两个篇幅专门介绍了JavaScript中的闭包与this,正好今早地铁上看到了两道面试题,试着做了下发现挺有意思,所以想单独写一篇文章来记录解析过程.若你对于闭包与t ...
- js中this指向、箭头函数
普通函数:this指向分为4种情况,1. obj.getName();//指向obj2.getName();//非严格模式下,指向window,严格模式下为undefined3. var a = ne ...
- ES6 箭头函数中的 this?你可能想多了(翻译)
箭头函数=>无疑是ES6中最受关注的一个新特性了,通过它可以简写 function 函数表达式,你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”. ...
- es6箭头函数中this
普通函数: $scope.$on('$stateChangeSuccess',function(){this.list = this.getList();}); 箭头函数: $scope.$on('$ ...
- 普通函数跟箭头函数中this的指向问题
箭头函数和普通函数的区别如下. 普通函数:根据调用我的人(谁调用我,我的this就指向谁) 箭头函数:根据所在的环境(我再哪个环境中,this就指向谁) 一针见血式总结: 普通函数中的this: 1. ...
- 关于node中的global,箭头函数的this的一个小问题
this一直是一个JS中的困扰问题,这次在跑JS精粹的代码的时候顺带发现了Node里面全局变量的问题 var x = 1; var myObj = { x: 2 }; myObj.func = fun ...
- JavaScript深入浅出第1课:箭头函数中的this究竟是什么鬼?
<JavaScript 深入浅出>系列: JavaScript 深入浅出第 1 课:箭头函数中的 this 究竟是什么鬼? JavaScript 深入浅出第 2 课:函数是一等公民是什么意 ...
- JavaScript箭头函数中的this详解
前言 箭头函数极大地简化了this的取值规则. 普通函数与箭头函数 普通函数指的是用function定义的函数: var hello = function () { console.log(" ...
- 深入理解ES6箭头函数中的this
简要介绍:箭头函数中的this,指向与一般function定义的函数不同,比较容易绕晕,箭头函数this的定义:箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定. 1.何为定义时 ...
随机推荐
- SSH防爆破脚本
github地址:https://github.com/demonxian3/LittleScript/blob/master/SSHprotecter.sh 使用方法: 1.给足脚本权限,chmod ...
- 【端-iOS】给iOS开发入门者编码的一点建议
规范编码可以提高代码的可读性,降低维护成本.作为一个程序员,要对自己写的代码负责,虽然bug无可避免,但是写代码时最基本的编码规则还是应该遵守的,否则不是坑自己就是坑别人,因为代码肯定是要维护的. 下 ...
- ThinkPHP5+小程序商城 网盘视频
ThinkPHP5+小程序商城 网盘视频 有需要联系我 QQ:1844912514
- 分享给有需要的你,精选了10套web开发免费视频教程~~
在这里给大家精选百度传课里的一些比较好的视频教程,比较适合新手们,有需要的可以收藏着学习!! 蓝鸥微信小程序全方位深度解析 链接:http://www.chuanke.com/v4702151-19 ...
- h5学习笔记:vuethink 配置
vuethink 是一款基于PHP TP5和Vuejs 结合的后台框架,设计起来是使用较为前沿.在使用的过程,需要对这款开源的后台做一些调整和面对一些细节的坑.前段时间也因为有项目需求,所以下载了玩了 ...
- sha1() 函数
sha1() 函数计算字符串的 SHA-1 散列. sha1() 函数使用美国 Secure Hash 算法 1. 来自 RFC 3174 的解释 - 美国 Secure Hash 算法 1:SHA- ...
- 优化表单数据的JS校验
在平常的web开发中,我经常需要在客户端对表单的数据进行验证.比如,我们验证表单输入的内容不为空: ? <form action="" method="post&q ...
- Hadoop问题:chmod 0700 of directory /var/lib/apt/lists/
问题描述: apt-get update W: chmod of directory /: Operation not permitted) E: Could not open : Permissio ...
- J.U.C atomic AtomicInteger解析
很多情况下我们只是需要简单的,高效,线程安全的递增递减方法.注意,这里有三个条件:简单,意味着程序员尽可能少的底层或者实现起来比较简单:高效,意味着耗用资源要少,程序处理速度要快: 线程安全也非常重要 ...
- linux 动态库的符号冲突问题
最近,给同事定位了一个符号表的冲突问题,简单记录一下. A代码作为静态链接库,被包含进了B代码,然后编译成了动态链接库,B.so A代码同时作为静态链接库,被编译进入了main的主代码. main函数 ...