day0319

参数

形参和实参

//a,b形参
//执行fn1(3,4)  3,4是实参
function fn1(a,b){
    

}

fn1(3,4);

注意传入参数为普通类型与引用类型的区别

普通类型：给个相同值
引用类型：指向同一地址

如果实参数量小于形参数量，那么最后没有赋值的形参则是undefined
如果形参属性小于实参数量，那么多出阿来的实参无法从形参上获取（对应不上）

function fn1(a,b,c,d){
    

}
fn1(3,4,5);


function fn1(a, b, c, d) {
    

}
fn1(3, 4, 5, 6, 7);

此处未给函数的形参b传参，b为undefined，但是函数可执行不报错，数值+undefined为NaN

function sum(a,b){
        
console.log(res);
console.log(a);
console.log(b);
console.log(1+undefined);
var res = a + b;    
console.log(String(res));
console.dir(res);
return true;    
return res; 
} 

var res = sum(1); 

alert(res)

形参初始值，当实参没有传入对应的值，默认是形参初始值（实参是undefined），如果传入则是传入值

必要的形参定义在函数的前面，非必要的形参定义在后面，大多数的初始值都是针对非必要的形参

形参中ES5是不能设置形参初始值，ES6中形参可以设置初始值

严格模式 之后再说

以为js是弱引用类型，所以参数是不需要设置类型的

如果封装的函数被比如人使用时，别人传入的参数不一定类型相同，会造成函数不可预期的错误

ES6中…arg

ES6中调用所有参数
传入不定数量的参数时会被放在arg这个数组中

function fn1(...arg){
    
console.log(arg);
}

fn1(1,2,3,4,5)

…arg必须放在形参的最后

function fn1(fn,...arg){
    
    console.log(arg);
}

ES5中 arguments

arguments 是一个类数组对象。代表传给一个function的参数列表

ES5 函数内部arguments 参数列表 实参列表

arguments 对象只能在函数内使用

function fn1(){
    
    var s=0;
    for(var i=0;i<arguments.length;i++){
    
        s+=arguments[i];
    }
    return s;
}

var sum=fn1(1,2,3,4,5,6);
console.log(sum);

arguments.length 在函数内是当前函数传入的 实参数量
fn1.length通过获取函数的length可以获取到函数的 形参数量

function fn1(a,b,c,d){
    
    console.log(arguments.length);
    console.log(fn1.length);
}
fn1(1,2,3,4,5,6,7);

arguments的属性

arguments.length 传递给函数的参数数量
arguments.callee 指向参数所属的当前执行的函数 英文含义 被召者
arguments.callee.caller 当前函数的环境外（上下文）函数，不是函数显示null 召唤者

function fn1(fn){
    
console.log(arguments.callee);//就是当前函数
console.log(arguments.callee.name);//就是当前的名字
console.log(arguments.callee.caller);//调用当前函数的环境外（上下文）函数，不是函数显示null
}
function fn2(){
    
    fn1();
}

fn1();
fn2();

callee 是 arguments 对象的一个属性。它可以用于引用该函数的函数体内当前正在执行的函数。这在函数的名称是未知时很有用，例如在没有名称的函数表达式 (也称为“匿名函数”)内。

使用arguments.callee实现匿名递归

function fn1(fn){
    
    fn(0);
}

fn1(function(a){
    
    a++;
    console.log(a);
    if(a>3) return;
    arguments.callee(a);
})

return

遇到return，跳出函数，不再执行return后面的语句

function fn1(){
    
    var a=1;
    console.log(a+5);
    return;
    console.log(a);
}

fn1();

使用return返回一个运行结果，或者一个值，仅能返回一个值
返回的结果可以在函数执行时赋值给变量

function fn1(){
    
    var a=1;
    var b=2;
    return a+b;
}

var s=fn1();
console.log(s);

用return进行限制

限定函数传入参数类型或者其他的范围，来判断是否继续执行该函数还是跳出

function fn1(a){
    
    if(!a) return;
    var s=a+5;
    console.log(s);
}

fn1(5);
fn1();

用return多分支条件退出

输入数值转中文：用到数组

function getChineseNumber(n){
    
	if(n>=1000) return;
	if(n<11) return arr[n];
	if(n<20) return "十"+arr[n%10];
	if(n%10===0 && n<100) return arr[n/10]+"十";
	if(n<100) return arr[parseInt(n/10)]+"十"+arr[n%10];
	if(n%100===0) return arr[n/100]+"百";
	if(n%10===0) return arr[parseInt(n/100)]+"百"+arr[n/10%10]+"十";
	if(parseInt(n/10)%10===0) return arr[parseInt(n/100)]+"百零"+arr[n%10];
	return arr[parseInt(n/100)]+"百"+arr[parseInt(n/10)%10]+"十"+arr[n%10];
}
var str=getChineseNumber(265);
console.log(str);

运算：

function getSum(type){
    
    var s;
    switch(type){
    
        case "+":
        s=arguments[1];
        for(var i=2;i<arguments.length;i++)s+=arguments[i];
        return s;
        case "-":
        s=arguments[1];
        for(var i=2;i<arguments.length;i++)s-=arguments[i];
        return s;
        case "*":
        s=arguments[1];
        for(var i=2;i<arguments.length;i++)s*=arguments[i];
        return s;
        case "/":
        s=arguments[1];
        for(var i=2;i<arguments.length;i++)s/=arguments[i];
        return s;
    }
}

var s=getSum("+",5,6,7);
console.log(s);

可以用数组简化：

function getArrSum(arg,type){
    
var s=arg[0];
for(var i=1;i<arg.length;i++){
    
    switch(type){
    
        case "+":
        s+=arg[i];
        break;
        case "-":
        s-=arg[i];
        break;
        case "*":
        s*=arg[i];
        break;
        case "/":
        s/=arg[i];
        break;
    }
}
return s;
}

var s=getArrSum([5,6,7],"+");
console.log(s);

return和break的区别：

break跳出循环，执行函数中循环后的语句
return 跳出函数，直接从循环中跳出函数

function fn1(){
    
    var s=0;
    for(var i=0;i<10;i++){
    
        s+=i;
        if(i===7) return s;
    }
    console.log("aaa");
}

var s=fn1();
console.log(s);

return限定范围实现开关

点击实现向右运行/停止

var bool=false;
var x=0;
var div1=document.getElementById("div1");
div1.onclick=function(){
    
   bool=!bool;//点击切换true/false
}

setInterval(function(){
    
   if(!bool) return;//true时才执行
   x++;
   div1.style.left=x+"px";
},16);

return返回结果

单例模式 单独的唯一的实例 起源：

var o;
function fn1(){
    
    return o||(o={
    });
}
var a=fn1();
var b=fn1();
console.log(a==b);

相当于

var o;
function fn1(){
    
    if(!o) o={
    };
    return o;
}

var a=fn1();
var b=fn1();
console.log(a==b);

工厂模式 起源：

function fn1(name,age,sex){
    
    return {
    
        name:name,
        age:age,
        sex:sex
    }
}

对象的属性名如果和值的变量名相同，可以直接带入，上面可以简写为：

function fn1(name,age,sex){
    
   return{
    name,age,sex}; //对象的属性名如果和值的变量名相同，可以直接带入
}
var o=fn1("张三",30,"男");
var o1=fn1("李四",20,"女");
console.log(o,o1);

return返回多个数据

用数组、对象
返回数组：

function fn1(a,b){
    
    a++;
    b*=2;
    return [a,b];
}
    var arr=fn1(1,2);
    console.log(arr);

返回对象;

function fn1(a,b){
    
    a++;
    b*=2;
    return {
    a,b};
}

var o=fn1(3,5);
console.log(o);

return返回一个函数： 闭包

函数返回一个函数就是闭包？？

返回匿名函数：

function fn1(a){
    
    return function(b){
    
        console.log("aaaa");
    }
}

var f=fn1()
f();

fn1(3)(4);//调用外部再调用内部 两个参数

return返回函数运行的结果

function fn1(a){
    
    a++;
  return fn2(a);
}

function fn2(a){
    
    a*=2;
   return fn3(a);
}

function fn3(a){
    
    a+=10;
    return a;
}

var s=fn1(5);
console.log(s);

function fn1(a){
    
    a++;
  return fn2(a)+fn3(a);
}

function fn2(a){
    
    a*=2;
   return a;
}

function fn3(a){
    
    a+=10;
    return a;
}

var s=fn1(5);
console.log(s);

return返回回调函数返回的值

function fn1(a,fn){
    
    a++;
  return fn(a);
}

var s=fn1(5,function(n){
    
    return n*2;
});
console.log(s);

this

对象中的函数叫方法，是匿名函数

写在对象方法中的this一般指向当前对象（调用时对象已经创建完）

写在对象属性中的this是指向当前上下文环境中this指向（创建此属性时对象未创建完）

之后再详细讲

var a=10;
var obj={
    
    a:1,
    c:this.a,//创建到c时obj未创建完，创建未完成时this无法指向obj，指向window（当前上下文）
    b:function(){
    
        console.log(obj.a);//obj指向变为o指向，obj中不再有a属性
        console.log(this.a);//当前的对象,堆中的，谁指向的无所谓
    }
}

var o=obj;//将obj指向地址给o
obj={
    c:10};//obj指向新地址

o.b();
console.log(o);

return this

通过return this ,来让对象中的方法可以实现连缀

var obj={
    
  	a:1,
   	run:function(){
    
       console.log("run");
       return this;
   	},
  	 play:function(){
    
       console.log("play");
       return this;
   	}
}

obj.run();
obj.play();

obj.run().play();
obj.play().run();

回调函数

将函数作为参数传入并调用，被作为参数传入的函数叫做回调函数

将一个函数以参数的形式传入到另一个函数中并且被调用执行

目的就是不关注要执行谁，执行就行了

function fn1(fn){
    
    fn();
}

function fn2(){
    
    console.log("aaa");
}
function fn3(){
    
    console.log("bbb");
}

fn1(fn2);
fn1(fn3);

通过插入不同的函数，解决不同的问题

function fn1(a,b,fn){
    
    return fn(a,b);
}

function fn2(a,b){
    
    return a+b;
}
function fn3(a,b){
    
    return a-b;
}
function fn4(a,b){
    
    return a*b;
}
function fn5(a,b){
    
    return a/b;
}

var s=fn1(3,5,fn5);
console.log(s);

function fn1(fn){
    
    for(var i=0;i<10;i++){
    
         fn(i);
     }
}

function fn2(a){
    
    console.log(a);
}

fn1(fn2);

相当于使用下面匿名函数：

function fn1(fn){
    
    for(var i=0;i<10;i++){
    
        fn(i);
    }
}

fn1(function(a){
    
    console.log(a)
})

桥接模式 累加 起源：

function fn1() {
    
    var fn = arguments[arguments.length - 1];
    var s = arguments[0];
    for (var i = 1; i < arguments.length - 1; i++) {
    
        s = fn(s, arguments[i]);
    }
    return s;
}

var a = fn1(1, 2, 3, 4, 5, 6, function (s, n) {
    
    return s + n;
})
console.log(a);

var b = fn1(1, 2, 3, 4, 5, 6, function (s, n) {
    
    return s * n;
})
console.log(b);

setTimeout与setInterval

setInterval()方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。
语法：
var intervalID = scope.setInterval(func, delay, [arg1, arg2, …]);

var i=0;
var ids=setInterval(function(a,b,c){
    
    i++;
    console.log(a,b,c);
    if(i>3) clearInterval(ids);
},16,1,2,3);

console.log(ids);

ids=setInterval(回调函数,间隔时间,参数1,参数2…)

ids就是这个时间间隔 标识id，可以通过clearInterval(ids)解除当前时间间隔设定

回调函数会被在间隔时间达到时调用，参数1，参数2就是向回调函数传参的方式

时间间隔如果设置为0或者不设置，则默认为1毫秒后？？还是10？

var i=0;
var ids=setInterval(function(a,b,c){
    
    i++;
    console.log(a,b,c);
    if(i>3) clearInterval(ids);
},16,1,2,3);
console.log(ids);
 
clearInterval(ids);

瞬间执行完的循环是同步的，而延迟执行的是异步的，在异步执行时，同步时的变量可能早就变化了

var ids;
for(var i=0;i<10;i++){
    
    ids=setInterval(function(){
    
        console.log(i)
    },1000)

每秒输出10个10

将当时的i传进去延时执行

var ids;
for(var i=0;i<10;i++){
    
    ids=setInterval(function(n){
    
        console.log(n)
    },1000,i)//将当时的i传进去延时执行
}

每秒输出一轮0-9

用setTimeout重构setInterval

function setInterval_1(fn,time){
    
    setTimeout(function(n){
    
        fn(n);
        setInterval_1(fn,time,n);
    },time,arguments[2]);
}


setInterval_1(function(n){
    
    console.log(n);
},1000,5)

红绿灯案例：

回调地狱：

setTimeout(function () {
    
    console.log("红");
    setTimeout(function () {
    
        console.log("黄");
        setTimeout(function () {
    
            console.log("绿");
        }, 2000)
    }, 2000)
}, 2000);

递归解决：

function fn1(color,time){
    
setTimeout(function(){
    
    console.log(color);
    if(color==="红"){
    
        fn1("黄",time);
    }else if(color==="黄"){
    
        fn1("绿",time);
    }else if(color==="绿"){
    
        fn1("红",time);
    }
},time)
}

fn1("红",1000);

异步回调使用：

function redColor(fn1,fn2){
    
	 var ids=setTimeout(function(){
    
	       console.log("红色")
	       clearTimeout(ids);
	       fn1(fn2,redColor);
	   },2000);
}

function yellowColor(fn1,fn2){
    
    var ids=setTimeout(function(){
    
        console.log("黄色")
        clearTimeout(ids);
        fn1(fn2,yellowColor);
    },2000);
}

function greenColor(fn1,fn2){
    
    var ids=setTimeout(function(){
    
        console.log("绿色")
        clearTimeout(ids);
        fn1(fn2,greenColor);
    },2000);
}

redColor(yellowColor,greenColor);

之后还有更简单的方法

礼拜一再讲

回调循环

function fn1(fn,n){
    
	if(n===undefined) n=0;
	n++;
	return fn(fn1,n);
}

function fn2(fn,n){
    
    n++;
    if(n===10) return n;
    return fn(fn2,n);
}

var s=fn1(fn2);
console.log(s);//10

递归函数

函数自己调用自己

命名函数递归

通过函数名调用

匿名函数递归

通过匿名函数内部arguments实现

重构map 之后讲
原型 this 回调

下周讲
递归
数组 方法重构全讲2天

周三开始
内建对象1

周四周五
DOM BOM 2

快的话
讲事件2 ES6 1 正则1
动画
下下周周四开始项目
class面向对象开发