基础学习:
第三课:
箭头函数
使用"箭头"(=>)定义函数
var f = v =>v;
箭头函数特性:
*1.函数体内的this值,绑定的定义时所在的作用域的this
2.不可当作构造函数
3.不可以使用arguments对象
用法eg:
fuction fn(){} //语法: var f=()=> {}
1.var add = () => 2;
2.var add = a => a+2; add(2);
3.var add = (a,b) => a+b;
4.var add = (a,b) => ({num:a+b}) 返回一个对象需要加()
5.var add = (a,b) => {
if(a>b){
a = 1;
}
return a+b
} 需要手动返回
this指向eg:
1.document.onclick=function(){
/* var that = this;
setTimeout(function(){
console.log(this);
},1000);*/
console.log(this);
//箭头函数中的this帮定所定义的作用域中的this document
setTimentout(()=>{
cosnole.log(111);
},1000
}
2.document.onclick=()=>{
// this 在window定义
setTimentout(()=>{
cosnole.log(111);
},1000
}
3.function fn(){}
fn()// this 指向window
document.onclick = fn //this指向doucment
函数的扩展
· 函数的参数默认值
给形参直接赋值
注意:在函数体中,不能用let或const再次声明,否则会报错
· reset参数
reset参数(形式为...变量名),用于获取函数的多余参数,放在数组中可取代arguments
1.function fn(a=10){
//let a = 100;// 错误用法,不能重复声明
//a的默认值为10
//a = a || 10
console.log(a);
}
fn(1)
2. functon fn(...arr){//rest参数
console.log(arguments);
//arguments = [1,2,3]
//arguments.push() 错误用法
cosnole.log(arr);
//arr=[1,2,3];真实数组
//arr.push() 正确用法
}
3. functon fn(a,...arr){//rest参数
console.log(a);//1
console.log(arr);//[2,3]
}
fn(1,2,3);
对象的扩展
· 简洁表示法
变量名和属性名相同,可直接写入变量名
函数可省略function关键字
· Object.assign(目标对象,[要合并的对象1,要合并的对象2,...])
用户合并对象,待对象的所有可枚举属性,复制到目标对象
省略function
1.var miaov = 10;
var o={
//miaov:miaov
miaov
}//{miaov:10}
2.var miaov = (function(){
function add(){}
function isFunction(){}
function isArray(){}
return {
add,
isFunction,
isArray
}
})();
3.var o={
fn(){}//相当于 fun:function(){}
}
Object.assign()
var o = {a:1};
var o1 = {b:2};
var o2 = {c:3};
Object.assign(o,o1,o2);//o={a:1,b:2,c:3}
function fn(option){
let defaults ={
a:'默认1',
b:'默认2',
c:'默认3'
}
}
fn({
a:1,
b:2,
c:3
})
Object.assign(defaults,option);