函数的变身

目录

函数常见模样

匿名函数

 构造函数

构造函数与普通函数的区别

在对象中使用(函数)方法

箭头函数

 回调函数

---

函数常见模样

        fn ----函数名称 

         a,b,c,d是形参  (形参不要使用""包含,会报错)

        1,2,3,4是实参(实参可以使用"")

function fn(a,b,c,d){
            console.log(a,b,c,d);
        }
fn(1,2,3,4)    //输出1 2 3 4

        函数调用:函数名()   例如: "fn()"

                        只函数名 则  ''fn调用整个函数体''

匿名函数

let n = function(name,age){
            console.log(name,age);
        }
n('张三',18)

 构造函数

        自己声明构造函数：

                New 一个构造函数时，如果其内部有对象返回，则直接返回。

                如果构造函数内部没有对象，js会自动生成一个对象进行返回。

                为了区别普通函数,构造函数的名字一般都大写。

        function Person(name,age){
            let obj = {};
            obj.name = name;
            obj.age = age;
            return obj;
        }
        let p1 = new Person('zs',18);
        console.log(p1);    //Object  age:18  name:"zs"

        构造函数内部没有返回对象，JS会系统生成对象，会让构造函数中的this指向这个对象. 

        构造函数的this指向实例化对象

构造函数与普通函数的区别

        构造函数与普通函数没有什么大的区别,只是在以下几个方面有所区分:

                1. 构造函数的函数名建议首字母大写

                2. 构造函数通过New进行调用,普通函数通过函数名()调用

                3. 普通函数this指向Window,构造函数this指向实例化对象

        (构造函数与普通函数没有区别,普通函数通过New调用就变成构造函数)

在对象中使用(函数)方法

// 对象只有属性和方法
let obj ={
      name:'zs',
      say:function(){
          console.log('one two three go');
      },
      // 在ES6中新定义对象方法写法,可以省略:与function
      info(){
          console.log('1,2,3');
      }
   }
   obj.say();  //输出one two three go
   obj.info();  //输出1,2,3

箭头函数

        语法:

        (参数1,参数2,...,参数N) => {函数体}

case1

        单个参数可以省略() 没有参数则不能省略()

case2

        函数体内只有一个语句可以省略{},省略{}会自动返回,如果有{}需要返回要么log等输出,要么加return.

case3

        只有一个函数,函数体只有一个语句时可以同时省略()与{}

ps:

1. 箭头函数是不能new的，它的设计初衷就跟构造函数不太一样.
2. 箭头函数如果要返回一个JSON对象，必须用小括号包起来var test = ()=>({id:3, val=20}),  箭头函数的花括号不要省略.
3. 函数的可读性增加了很大的难度.

        // 多个参数
        let fn = (name,age,sex) =>{
            console.log(name,age,sex)
        }
        fn('zs',18,'女')   //输出'zs',18,'女'

        // 单个参数
        let fn1 = name =>{
            console.log(name);
        }
        fn1('...')  //输出...

        // 没有参数
        let fn2 =() =>{
            console.log('今天是香香的小金~');
        }
        fn2();   //输出今天是香香的小金~
        fn2;   //fn2是变量,这样书写什么输出也没有
        console.log(fn2);  //输出箭头函数体  () =>{console.log('今天是香香的小金~');}

        // 单个参数单个语句
        let fn3 = name => console.log(name);
        fn3('棣棣')  //输出棣棣

ps:

        箭头函数中的this没有明确的指向。this指向不可以修改。如果在箭头函数中使用this, 会向上一级作用域中进行查找this,即宿主对象中查找。

 回调函数

        当一个函数作为参数传入另一个参数中，并且它不会立即执行，只有当满足一定条件后该函数才可以执行，这种函数就称为回调函数。

function cd(){}
function fn(p){
     p()
}
fn(cb)   //将函数cb作为实参传给形参p  调用函数参数cb,则使用p()即可


//常见的回调函数的使用比如定时器与延时器
//直接将函数体作为形参写入执行
steTimeout(function(){
    console.log('延时器')
},time)

回调函数实例:

        //封装一个函数,用延时器模拟
        // 以箭头函数为形参
        function buy(goods = () => {}){
            const time = Math.floor(Math.random()*4000 + 1000);
            //延时器,不固定在1-5秒内执行延时器
            setTimeout(() => {
                console.log('采购完成,本次用时:' + time + 'ms');

                //执行goods
                goods()
            },time)
        }

        //执行封装函数  以function(){console.log('water')函数体为实参传入
        buy(function(){console.log('water');})   //控制台在time时间后输出采购完成,本次用时:time ms    water

回调函数缺点:

        当嵌套过多时,会出现回调地狱,会导致代码的可维护性和可读性降低.

        为解决这一缺点ES6新引入一个一步解决方案-----promise.