ES6学习--箭头函数
1. 箭头函数基本形式
let func = (num) => num;
let func = () => num;
let sum = (num1,num2) => num1 + num2;
[1,2,3].map(x => x * x);
2. 箭头函数基本特点
(1). 箭头函数this为父作用域的this,不是调用时的this
箭头函数的this永远指向其父作用域,任何方法都改变不了,包括call,apply,bind。
普通函数的this指向调用它的那个对象。
let person = {
name:'jike',
init:function(){
//为body添加一个点击事件,看看这个点击后的this属性有什么不同
document.body.onclick = ()=>{
alert(this.name);//?? this在浏览器默认是调用时的对象,可变的?
}
}
}
person.init();
上例中,init是function,以person.init调用,其内部this就是person本身,而onclick回调是箭头函数,
其内部的this,就是父作用域的this,就是person,能得到name。
let person = {
name:'jike',
init:()=>{
//为body添加一个点击事件,看看这个点击后的this属性有什么不同
document.body.onclick = ()=>{
alert(this.name);//?? this在浏览器默认是调用时的对象,可变的?
}
}
}
person.init();
上例中,init为箭头函数,其内部的this为全局window,onclick的this也就是init函数的this,也是window,
得到的this.name就为undefined。
(2). 箭头函数不能作为构造函数,不能使用new
//构造函数如下:
function Person(p){
this.name = p.name;
}
//如果用箭头函数作为构造函数,则如下
var Person = (p) => {
this.name = p.name;
}
由于this必须是对象实例,而箭头函数是没有实例的,此处的this指向别处,不能产生person实例,自相矛盾。
(3). 箭头函数没有arguments,caller,callee
箭头函数本身没有arguments,如果箭头函数在一个function内部,它会将外部函数的arguments拿过来使用。
箭头函数中要想接收不定参数,应该使用rest参数...解决。
let B = (b)=>{
console.log(arguments);
}
B(2,92,32,32); // Uncaught ReferenceError: arguments is not defined let C = (...c) => {
console.log(c);
}
C(3,82,32,11323); // [3, 82, 32, 11323]
(4). 箭头函数通过call和apply调用,不会改变this指向,只会传入参数
let obj2 = {
a: 10,
b: function(n) {
let f = (n) => n + this.a;
return f(n);
},
c: function(n) {
let f = (n) => n + this.a;
let m = {
a: 20
};
return f.call(m,n);
}
};
console.log(obj2.b(1)); // 11
console.log(obj2.c(1)); // 11
(5). 箭头函数没有原型属性
var a = ()=>{
return 1;
} function b(){
return 2;
} console.log(a.prototype); // undefined
console.log(b.prototype); // {constructor: ƒ}
(6). 箭头函数不能作为Generator函数,不能使用yield关键字
(7). 箭头函数返回对象时,要加一个小括号
var func = () => ({ foo: 1 }); //正确
var func = () => { foo: 1 }; //错误
(8). 箭头函数在ES6 class中声明的方法为实例方法,不是原型方法
//deom1
class Super{
sayName(){
//do some thing here
}
}
//通过Super.prototype可以访问到sayName方法,这种形式定义的方法,都是定义在prototype上
var a = new Super()
var b = new Super()
a.sayName === b.sayName //true
//所有实例化之后的对象共享prototypy上的sayName方法 //demo2
class Super{
sayName =()=>{
//do some thing here
}
}
//通过Super.prototype访问不到sayName方法,该方法没有定义在prototype上
var a = new Super()
var b = new Super()
a.sayName === b.sayName //false
//实例化之后的对象各自拥有自己的sayName方法,比demo1需要更多的内存空间
因此,在class中尽量少用箭头函数声明方法。
(9). 多重箭头函数就是一个高阶函数,相当于内嵌函数
const add = x => y => y + x;
//相当于
function add(x){
return function(y){
return y + x;
};
}
ES6学习--箭头函数的更多相关文章
- ES6 学习 -- 箭头函数(=>)
(1).只有一个参数且只有一句表达式语句的,函数表达式的花括号可以不写let test = a => a; // 只有一个参数a,这里的表达式相当于 "return a" ( ...
- ES6中箭头函数的作用
我们知道在ES6中,引入了箭头函数,其本质就是等同有ES5中的函数.类似于下面的写法: let test1=() => “abc”; let test2=() => { return “a ...
- Es6中箭头函数与普通函数的区别
Es6中箭头函数与普通函数的区别? 普通function的声明在变量提升中是最高的,箭头函数没有函数提升 箭头函数没有属于自己的this,arguments 箭头函数不能作为构造函数,不能被new,没 ...
- es6的箭头函数和es5的function函数区别
一.es6的箭头函数es6箭头函数内部没有this,使用时会上朔寻找最近的this不可以做构造函数,不能使用new命令,因为没有this函数体内没有arguments,可以使用rest参数代替不能用y ...
- 关于ES6 用箭头函数后的 this 指向问题
最近写完小程序后, 开始学习React, 因为有编译器, 就直接用ES6 新语法了, 中间自然离不开 () => { console.log('箭头函数的this是指向哪的问题')}; var ...
- Es6 之箭头函数 初学
不积跬步,无以至千里;不积小流,无以成江海! // ES5 var selected = allJobs.filter(function (job) { return job.isSelected() ...
- 关于es6的箭头函数使用与内部this指向
特型介绍:箭头函数是ES6新增的特性之一,它为JS这门语言提供了一种全新的书写函数的语法. 'use strcit'; let arr = [1,2,3]; //ES5 let es5 = arr.m ...
- ES6笔记② 箭头函数
特性介绍 箭头函数是ES6新增的特性之一,它为JS这门语言提供了一种全新的书写函数的语法. //ES5 function fun(x,y){ return x+y; } console.log(fun ...
- 进阶路上有你我-相互相持篇之ES6里箭头函数里的this指向问题
首先复习下普通函数里的this指向: function test(){ console.log(this) } test() 你会秒杀的毫无疑问的回答:window,针对普通函数:谁调用了函数 函数 ...
随机推荐
- postgresql----数组类型和函数
postgresql支持数组类型,可以是基本类型,也可以是用户自定义的类型.日常中使用数组类型的机会不多,但还是可以了解一下.不像C或JAVA高级语言的数组下标从0开始,postgresql数组下标从 ...
- ubuntu16.04下安装sublime_text
1 在终端输入: sudo add-apt-repository ppa:webupd8team/sublime-text-3 添加sublime text3的软件源: 2 sudo apt-get ...
- ubuntu常用技巧积累
1.修改root密码,一般与用户密码不同 python@ubuntu:~$ sudo passwd[sudo] password for python: 输入新的 UNIX 密码: 重新输入新的 UN ...
- 2016江苏省CPC省赛 I - Itinerary Planning
Description Mike moved to a new city. There are bus stations in the city, each has a unique name. Ea ...
- jmxtrans
jmxtrans more tomcat.json { "servers" : [ { "port" : "12345", ...
- iOS开发tableView去掉顶部上部空表区域
tableview中的第一个cell 里上部 有空白区域,大概64像素 在viewDidLoad中加入如下代码 self.automaticallyAdjustsScrollViewInsets = ...
- 20144306《网络对抗》Web安全基础实践
1 实验内容 SQL注入攻击 XSS攻击 CSRF攻击 2 实验过程记录 2.1WebGoat说明与安装 关于WebGoat WebGoat是OWASP组织研制出的用于进行web漏洞实验的应用平台 ...
- POJ3468 a simple problem with integers 分块
题解:分块 解题报告: 是个板子题呢qwq 没什么可说的,加深了对分块的理解趴还是 毕竟这么简单的板子题我居然死去活来WA了半天才调出来,,,哭了QAQ 还是说下我错在了哪几个地方(...是的,有好几 ...
- 从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]
原文:http://blog.csdn.net/sinat_17775997/article/details/58585142 之前用Vue做了一个基础的组件 vue-img-inputer ,下面就 ...
- 一致性 hash 算法(转)
add by zhj:介绍了什么是一致性hash,以及实现一致性hash的一种算法. 原文:http://my.oschina.net/u/195065/blog/193614 目录[-] 一致性 h ...