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.何为定义时 ...
随机推荐
- [国嵌笔记][010][TFTP与NFS服务器配置]
交叉开发 嵌入式软件产生的平台称为宿主机,运行嵌入式软件的平台称为目标机 宿主机一般通过串口.网络.USB.JTAG等方式将软件下载到目标机 网络下载 一般有TFTP和NFS两种方式 tftp服务器 ...
- 同一台电脑使用 gitlab 和 github 配置
Git 客户端与服务器端的通信支持多种协议,ssh 最常用.ssh的公钥登录流程,用户将自己的公钥存储在远程主机,登录时,远程主机会向用户发送一条消息,用户用自己的私钥加密后,再发给服务器.远程主机用 ...
- screen乱码问题
在 .screenrc下设置: defencoding gbk encoding gbk gbk detatch+reattach后,设置失效,这时可以直接用命令来配置: ctrl+a :defenc ...
- Tomcat配置虚拟路径访问容器外的硬盘资源
问题: 如果tomcat中上传了很多的图片,会导致tomcat启动的时候会慢,所以应该把图片上传到tomcat容器外部 那么,问题来了: tomcat出于安全考虑,禁止了直接访问外部硬盘资源. 解决: ...
- 通过JiaThis API接口自定义分享功能按钮实现分享功能本地化
http://www.mdaima.com/jingyan/20.html 最早李雷博客采用的是百度分享插件,为此还发过博文讲解如何在一个页面调用多个按钮分享不同的文章,感兴趣的朋友可以在本站搜索一下 ...
- putty 与winscp 区别
https://zhidao.baidu.com/question/377968180.html putty 与winscp 有什么区别, 装了 winscp 可以由 putty 替换么 ? 具体用法 ...
- Web API (四) 特性路由(Attribute Route)
特性路由 是Web API 2 中提出的一种新的类型的路由,正如其名称那样,它是通过特性(Attribute) 来定义路由的,相比之前的基于模式(Convertion Based)的路由,特性路由 能 ...
- iOS关闭键盘的两种简单方法
方法一: //1 [[[UIApplication sharedApplication] keyWindow] endEditing:YES]; ,为了关闭弹出的软键盘要遍历然后调用resig ...
- es6重点笔记:Symbol,Set,Map,Proxy,Reflect
一,Symbol 原始数据类型,不是对象,它是JavaScript第七种数据类型,表示独一无二的值.Symbol是通过Symbol函数生成的: let s = Symbol(); typeof s / ...
- Android 双卡获取当前使用流量在线卡的信息
最近接触了一个项目,需要获取在线流量卡的信息,下面的方式,可以获取大部分手机的正确手机卡信息. 一 获取获取IMEI public static String getDeviced(int solt ...