形参的默认值 es6
形参不需要声明 声明的时候 会报错 重复声明
为什么会是NaN?
因为val2接受不到实参里面传来的数据,val和val2相加,数据不匹配,所以会报错
function zhuque(val,val2){
console.log(val + val2); //NaN
}
zhuque(1)
为什么会等于12?
因为实参里面第二项有数据,会优先选择实参里面的数据,val2=2默认值则无效,所以1+5+6=12
function zhuque(val,val2 = 2,...rest){
console.log(val + val2 + rest[0]); //12
}
zhuque(1,5,6)
为什么会等于10?
因为函数里面修改了val的值,第一次修改的是12,第二次修改的是10,js执行的顺序是从上到下的,后置覆盖前面,所以val等于10
function zhuque(val,val2 = 2){
val = 12;
val = 10 //修改val的值
console.log(val); //10
}
zhuque(1,5)
为什么会有return?return是干什么的
如果你想把里面的值给外面用,这样会不会很麻烦呢?于是就诞生了return
return
返回值 决定了函数执行之后 将要抛出的东西 比如 一个函数内部运算好的值 处理得数据
函数如果没有手动 定义return的内容 那么 函数执行完毕 默认return undefined
let num = 0
function zhuque(val,val2){
// 传参 实参 1
console.log(val + val2); //3
num = val + val2
}
zhuque(1,2)
console.log(num); //3
使用return的注意事项
1.如果你要使用return,那么return后面的语句将不会在执行
function zhuque(val,val2){
let num = val + val2
return num
console.log("哈哈哈"); //不会执行
}
let value = zhuque(1,2)
console.log(value); //3
2.return后面跟了好几条数据,但它只会返回最后一条数据
function zhuque(val,val2){
let num = val + val2
return 1, "雀雀", "雀雀我爱你"
console.log(123456);
}
let value = zhuque(1,2)
console.log(value); //雀雀我爱你
3.如果你需要返回多条,就需要把数据存放在数组和普通对象里面
function zhuque(val,val2){
let num = val + val2
return [1, "雀雀", "雀雀我爱你"]
}
let value = zhuque(1,2)
console.log(value);
4.return后面会接运算,会运算到简单的结果,再把结果返回出去
function zhuque(val,val2){
let num = 0;
return num === 0 ? 3 : 0
}
let value = zhuque(1,2)
console.log(value);//3
5.return可以返回任意的数据类型
function zhuque(val,val2){
let num = 0;
return function fn(){console.log("fn");}
// return function (){console.log("fn");} //匿名
}
let value = zhuque(1,2)
console.log(value); //ƒ fn(){console.log("fn");}
function zhuque(val,val2){
let num = 0;
return function fn(){console.log("fn");}
// return function (){console.log("fn");} //匿名
}
zhuque(1,2)() //fn
为什么指向window?
this就近指向调用函数的对象,如果没有调用函数的对象,则指向window
跟函数在哪声明没有关系, 而是和调用环境 调用者有关
调用时就看 函数地址存在谁身体里 就近 不看爷爷 只看爸爸
事件函数里的this 指向事件的触发者
a = 1
console.log(window.zhuque);
function zhuque() {
console.log(this); //window
function fn() {
console.log(this); //window
}
fn()
}
zhuque()
修改this指向
call 第一个参数为 this将要修改指向的对象 有参数时 后面, 一一跟上即可
可以主动的执行函数
apply 第一个参数为 this将要修改指向的对象 有参数时 数组包一下 可以主动的执行函数
bind 第一个参数为 this将要修改指向的对象 有参数时 后面, 一一跟上即可,不会主动执行函数
但会return函数本体 再加一个括号即可执行
window.a = 0
let obj1 = {
a:1
}
let obj2 = {
a:2
}
function fn(num1,num2,num3){
console.log(this);
}
fn(1,2,3)
fn.call(obj1,1,2,3)
fn.apply(obj2,[1,2,3])
fn.bind(obj2,1,2,3)()
es6箭头函数
(形参)=>{代码块} 就算没有形参,括号也要必须写
只有一个形参,可以不写括号,
let fn = val => console.log(val);
fn(10086) //10086
多个形参的话,必须要写括号
let fn = (val,val2) => console.log(val,val2);
fn(10086,100) //10086
只需要一个return的话,可以省略{}和return
// let fn = val => {return val * 2}
let fn = val => val * 2
console.log(fn(100));
如果有其他代码,必须加上{},如果需要return时,这时,也必须写上return
let fn = val =>{
console.log(val);
return val * 2
}
console.log(fn(100));
箭头函数根本没有this, 指向外层的this,如果外层也没有this,则指向window 顶层对象
let obj = {
fn2:()=>{
console.log(this);
}
}
obj.fn2()
此时的this,则指向外层的this
let obj = {
fn2:()=>{
console.log(this);
},
fn3:function(){
console.log(this); //obj
let fn4 = ()=>{
console.log(this); //obj
}
fn4()
}
}
obj.fn2()
obj.fn3()
es6写法 函数在对象内的简洁写法
let obj2 = {
zhuque(){},
tongxuemen(){},
fn1008(){}
}
obj2.zhuque()
obj2.tongxuemen()
obj2.fn1008()
// 写法过于复杂
let obj2 = {
zhuque:function(){},
tongxuemen:function(){},
fn1008:function(){}
}