ES6中的函数(函数参数、默认值、箭头函数)
程序员文章站
2022-06-24 09:35:32
一、函数参数的解构赋值 二、函数默认参数 2.1 基本方式 2.2 可以预设实参 2.3 预设实参的覆盖 但如果传入实参,那么就会把预设的覆盖。 2.4 默认值可以是函数 三、箭头函数 语法:参数= 函数体 单行语句可以省略花括号,如果还是return语句,还可以省略return关键字。 多行语句不 ......
一、函数参数的解构赋值
function foo([a,b]) { console.log(a+b); // 3 } foo([1,2]); function bar({c,d}) { console.log(c+d); // 7 } bar({c:3,d:4});
二、函数默认参数
2.1 基本方式
function foo(a,b=10) { console.log(a+b); // 1+10=11 => 11 } foo(1); function bar([a,b=10]) { console.log(a+b); // 3+10=13 => 13 } bar([3]); function fn({a,b=10}) { console.log(a+b); // 5+10=15 => 15 } fn({a:5});
2.2 可以预设实参
function bar([a,b=10] = [20]) { console.log(a+b); // 20+10=20 => 20 } bar(); function fn({a,b=10} = {a:20}) { console.log(a+b); // 20+10=30 => 30 } fn();
2.3 预设实参的覆盖
但如果传入实参,那么就会把预设的覆盖。
function bar([a,b=10] = [20]) { console.log(a+b); } bar([100]); // 100+10 => 110 bar([100, 200]); // 100+200 => 300 function fn({a,b=10} = {a:20}) { console.log(a+b); } fn({a:100}); // 100+10 => 110 fn({a:100,b:200}); // 100+200 => 300
2.4 默认值可以是函数
function getb() {return 10}; function foo(a,b=getb()) { console.log(a+b); // 1+10=11 => 11 } foo(1);
三、箭头函数
语法:参数=>函数体
- 单行语句可以省略花括号,如果还是return语句,还可以省略return关键字。
- 多行语句不可以省略花括号。
- 一个参数可以省略圆括号,多个参数不可以省略圆括号。
// 传统写法(无参数) let fn = function() {return 1;} // 箭头函数写法 let fn = ()=>(1); let fn = ()=>1; // 传统写法(一个参数) let bar = function(a) {return 2}; // 箭头函数写法 let bar = (a)=>2; let bar = a=>2; // 传统写法(多个参数) let fn = function(a,b) {return a+b}; // 箭头函数写法 let fn = (a,b)=>a+b; // 多行语句时不可省略花括号 let br = function(a,b) { let res = a+b; return res; } let br = (a,b)=>{ let res = a+b; return res; }
四、箭头函数的特点
4.1 箭头函数内的this固定化
函数体内的this对象是固定的,就是定义时所在的对象,而不是使用时所在的对象。
- 普通函数内的this情境
var id = 10; let obj = { id: 15, fn: function(){ settimeout(function(){ alert(this.id); // 10 },1000) } } obj.fn();
分析:1秒后执行window.settimeout(),this指向window,因此返回的结果是全局下的id:10
如果想要获取obj内的id,一般采用_this = this的办法。
var id = 10; let obj = { id: 15, fn: function(){ _this = this; // 调用后,这里的this指向obj settimeout(function(){ alert(_this.id); // 15 },1000) } } obj.fn();
- 箭头函数内的this情境(1)
var id = 10; let obj = { id: 15, fn: function(){ settimeout(()=>{ alert(this.id); },1000) } } obj.fn(); // 15 obj.fn.call({id:123}); // 123
分析:settimeout()中用了箭头函数,因此箭头函数内的this对象就固定在父级作用域下的this上。(这里就是函数fn)
也就是说,fn函数内的this指向了谁,箭头函数的this就指向了谁。
当被obj调用时,fn函数的this指向了obj,所以返回obj下的id:15
当被对象{id:123}调用时,fn函数的this指向了{id:123},所以返回该对象下的id:123
- 箭头函数内的this情境(2)
var id = 10; let obj = { id: 15, fn: ()=>{ settimeout(()=>{ alert(this.id); },1000) } } obj.fn(); // 10 obj.fn.call({id:123}); // 10
分析:当obj下的fn方法也用箭头函数,那么就会沿着作用域链往上找它的父级作用域的this,这里找到的是全局window。
于是this就固定在了window上,不管谁去调用它,它都只会返回window下的id:10
4.2 箭头函数没有arguments对象
普通函数在初始化的过程中,会产生一个arguments对象用来保存实参。
但是在箭头函数中是不存在的,如果要使用实参列表,那么用rest参数来代替。
// 普通函数 let fn = function(a,b,c) { console.log(arguments); } fn(1,2,3); // 箭头函数 let bn = (...args)=> { console.log(args); } bn(1,2,3);
4.3 箭头函数不可以用new实例化
let person = (name)=> { this.name = name; } let p = new person('mm'); // typeerror: person is not a constructor
4.4 箭头函数不可以使用yield命令
五、箭头函数的使用场景
- 当我们要维护一个this上下文环境时,就可以用箭头函数。
var id = 10; let obj = { id: 15, fn: function(){ settimeout(()=>{ alert(this.id); },1000) } } obj.fn(); // 15
- 定义对象方法,且要用到this时,不要用箭头函数!
let person = { name: 'mm', say: ()=>{ console.log(this.name); // 'gg' } } var name = 'gg'; person.say();
- 监听dom事件时,不要用箭头函数!
let box = document.getelementbyid('box'); box.addeventlistener('click', function(){ if(this.classlist!='red') { this.classlist = 'red'; }else { this.classlist = 'green'; } console.log(this); // box }); box.addeventlistener('click', ()=>{ if(this.classlist!='red') { this.classlist = 'red'; }else { this.classlist = 'green'; } console.log(this); // window });
六、总结
- 函数参数也可以解构赋值。
- 函数参数可以设置默认值,可以预设实参。
- 函数参数的默认值可以是函数调用。
- 箭头函数的语法:参数=>函数体
- 箭头函数的this是固定的,指向了父级作用域的this。
- 箭头函数没有arguments,可以用rest参数代替。
- 箭头函数不可以new实例化。
- 箭头函数不可以使用yield命令
上一篇: python-修行第一天
下一篇: Oracle 索引 index
推荐阅读
-
【PHP】array_walk_recursive ― 对数组中的每个成员递归地施用用户函数
-
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析_PHP
-
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码_PHP
-
PHP中ob_start函数的使用说明_PHP教程
-
FreeBSD inet_network() 函数中的单字节溢出漏洞
-
php中ob_start系列函数的使用
-
php中echo()和print()、require()和include()等易混淆函数的区别
-
php中过滤html代码的函数 提高程序安全性_PHP
-
opencv中像素重映射操作(remap函数的使用)
-
smarty中assign()这个函数是怎么定义的