es6 初级之箭头函数

1.先看一个例子：

1 <script>
2         function show() {
3             console.log('aluoha');
4         }
5         show();
6 </script>

2. 改写成简单的箭头函数：

1    var show = () => console.log('箭头:aluoha');
2    show();

3. 1 包含return 的常规函数：

1         function show() {
2             return 10;
3         }
4         console.log(show());

3.2 包含return 的箭头函数：

错误写法：

1      var show = () =>return 10;
2      console.log(show());

运行结果：

正确写法：

1         var show = () => {
2             return 10;
3         };
4         console.log(show());
5

小结：在箭头函数中，有return 返回值时，需要使用{}把函数体包裹起来

4.1 箭头函数的参数

1        var show = val => val;
2        console.log(show(100));

4.2 只有一个参数也可以写成：

1        var show = val => {
2             return val;
3         }
4         console.log(show(10));

4.3 一个参数，也可以加括号（）包含：

       var show = (val) => {return val;}console.log(show(100));

4.4 箭头函数，多个参数：

1        var add = (a, b) => {
2             return a + b;
3         }
4         console.log(add(10, 20));

4.5 箭头函数不可实例化：

1         var show = () => console.log('aluoha');
2         show();
3         new show(); //报错

正常函数可以实例化：

1         function show() {
2             console.log('aluoha');
3         }
4         show();
5         new show();

5.1 this指向：

1         var show = () => {
2             console.log(this); //this->window
3         }
4         show();

5.2 this调用：实际调用 window.a

1         var a = 101;
2         var show = () => {
3             console.log(this.a);
4         }
5         show();

5.3.1 this指向宿主对象：（不传参）

 1         var userName = 'global';
 2         function User(name) {
 3             this.userName = name;
 4
 5             this.showUserInfo = () => {
 6                 return this.userName;
 7             };
 8             this.showName = function() {
 9                 return this.userName;
10             };
11         }
12         var oUser = new User();
13         console.log(oUser.showUserInfo());
14         console.log(oUser.showName());

5.3.2 传参调用：

 1         var userName = 'global';
 2         function User(name) {
 3             this.userName = name;
 4
 5             this.showUserInfo = () => {
 6                 return this.userName;
 7             };
 8             this.showName = function() {
 9                 return this.userName;
10             };
11         }
12         var oUser = new User("aluoha");
13         console.log(oUser.showUserInfo());
14         console.log(oUser.showName());

转载于:https://www.cnblogs.com/huanying2015/p/8301728.html

es6 初级之箭头函数相关推荐

JS ES6中的箭头函数（Arrow Functions）使用
转载这篇ES6的箭头函数方便自己查阅. ES6可以使用"箭头"(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法基础语法 (参数1, 参数2, -, ...
北妈每日一学：ES6语法之箭头函数（附免费学习资料）
北妈每日一学 <北妈每日一学> 北妈每日一学用最短的篇幅 ,最好的排版,最简洁的例子和大家一起学习.总结.入坑. 今天来学风靡网络的- es6箭头函数 ES6 简介 ECMAScript ...
ES6函数相关包含箭头函数
转载地址:https://es6.ruanyifeng.com/?search=%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0&x=0&y=0#docs/fu ...
ES6特性：箭头函数转换，闭包
箭头函数转换箭头函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. // ES6写法 var handler = {id: "123456",init: fu ...
ES6 浅谈箭头函数，双冒号符号
1.箭头函数 ES6 允许使用"箭头"(=>)定义函数. var cat= function (name) { return "tom";}; va ...
撤底理解es6中的箭头函数
本质上是一个函数,是function 是一个被编译层加工过的函数用 babel 编译一下箭头函数看看,如下 //es6 const a = ()=>{ console.log(this) } ...
ES6学习(五) -- 箭头函数
作用函数目的指向性更强,可读性更好,简化代码,提升开发效率特点不用写function关键字: 只能作为函数使用不能new,没有原型: 参数不能重复命名: 返回值可以不写return,但有时需要配 ...
ES6学习（箭头函数详解）
箭头函数(Arrow Function) 箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或 new.target.这些函数表达式更适用于那些本来需要匿名 ...
ES6新语法--箭头函数
箭头函数 /*** 箭头函数:实质就是一个函数固定格式的简写* * 简写的规则* function 改为 => =>读为goesto* 如果只有一个形参,可以省略形参小括号;* 如果有0个 ...

es6 初级之箭头函数

es6 初级之箭头函数相关推荐

最新文章

热门文章