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});
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});
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();
但如果传入实参,那么就会把预设的覆盖。
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
function getb() {return 10}; function foo(a,b=getb()) { console.log(a+b); // 1+10=11 => 11 } foo(1);
语法:参数=>函数体
// 传统写法(无参数) 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; }
函数体内的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();
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
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
普通函数在初始化的过程中,会产生一个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);
let person = (name)=> { this.name = name; } let p = new person('mm'); // typeerror: person is not a constructor
var id = 10; let obj = { id: 15, fn: function(){ settimeout(()=>{ alert(this.id); },1000) } } obj.fn(); // 15
let person = { name: 'mm', say: ()=>{ console.log(this.name); // 'gg' } } var name = 'gg'; person.say();
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 });
如对本文有疑问, 点击进行留言回复!!
后台管理系统之用bootstrap-validator做表单验证
JavaScript 好题汇总分享(持续更新,看到好题就写)
网友评论