web前端练习15----es6新语法2，箭头函数,bind，函数参数默认值，函数返回对象

零、函数的两种表达形式

1.声明形式创建函数

        // 函数声明的形式创建的函数，会在所有代码执行之前被创建。
        // 所以可以在声明之前调用

        // 先调用 
        fun1();
        
        function fun1() {
            console.log('zhh1');
        }

2.表达式创建函数

        // 表达式创建函数，不会提前被声明
        // 不能再申明前调用
        let fun2 = function () {
            console.log('zhh2');
        }
         
        // 箭头函数 
        let fun3 = () => {
            console.log('zhh3');
        }

        // 后调用       
        fun2();
        fun3();

 

一、箭头函数

百度搜索 mdn 箭头函数
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

例子1，基本语法

//       箭头函数的基本语法
       var method1 =(x,y)=>{
          let z = x+y;
          console.log(z);
          return z;
       }
     method1(1,2);

例子2，this的指向

箭头函数中调用this,指的是箭头函数声明时，作用域的对象

function函数中调用this，谁调用指向谁，例如 ifunction(); 这种调用没有明确的对象来调，指向window

        function Person() {
            var jiantou = () => {
                // this指的是 person 对象
                console.log(this);
            }
           var ifunction= function () {
                // this指的是 Window 对象
                console.log(this);
           } 

           jiantou();
           ifunction();  

        }
       
       new Person();

function函数中的this总结：
1、this是什么?
任何函数本质上都是通过对象来调用的，如果没有直接指定就是window
所有函数内部都有一个变量this
它的值是调用函数的当前对象
2、如何确定this的值
test();  window
p.test(); p
new test(); 新创建的对象
p.call(obj); obj
p.apply(obj); obj
p.bind(obj); obj
 

例子3，箭头函数中调用this,指的是箭头函数声明时，作用域的对象

        // 箭头函数中调用this,指的是箭头函数声明时，作用域的对象
        function Person() {
            this.name = 'zhh';
            let jiantou = () => {
                // 此时的this,指的是 person 对象（因为箭头函数声明时，作用域是Person里面）
                console.log(this);
                console.log(this.name);
            }
            setTimeout(jiantou(), 1000);
        }
        //    调用
        new Person();

  上面的例子也可改成匿名函数

//    箭头函数作为匿名函数回调时，this的指向全局
      function Person(){
          this.name = 'zhh';
//        匿名函数的回调，setTimeout不用对象调用，会自动执行
          setTimeout(()=>{
          console.log(this.name);
          },1000);
      }
//    调用
       new Person();

如果用 function 函数的 this，指向外面变量，则要使用 bind,改变this指向

// es5中使用 bind 让 this 执行全局
      function Person3(){
          this.name ='zhh3';
          setTimeout(function(){
            // 不用bind this.name拿不到
              console.log(this.name);
          }.bind(this),1000);
      }
      new Person3();

例子4，关于this的指向，再举一个例子

        // es6在匿名函数改成箭头函数，直接就能拿到 this.sum
        // 数组方法forEach的匿名函数的回调--------
        let arr2 = [1, 2, 3, 4];
        arr2.name = function () {
            this.sum = 0;
            this.forEach((item) => {
                this.sum = this.sum + item;
                console.log(this.sum);
            });
        }
         arr2.name();

如果用 function 函数的 this，指向外面变量，则要使用 bind,改变this指向

        // 匿名函数中的 this 指向全局===========
        // es5中匿名函数中的要拿到 this.sum,要通过bind改变this的指向
        // 数组方法forEach的匿名函数的回调---------
        let arr1 = [1, 2, 3, 4];
        arr1.name = function () {
            this.sum = 0;
            this.forEach(function (item) {
                this.sum = this.sum + item;
                console.log(this.sum);
            }.bind(this));
        }
        arr1.name();

例子5：bind() 创建新函数，指定this的指向

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

        // bind()创建一个新的函数，
        // 在bind()被调用时，这个新函数的this被bind的第一个参数指定
        var module = {
            x: 42,
            getX: function () {
                console.log(this);
            }
        }
        
        // module.getX.bind(window) bind 创建新函数，并指定新函数的this指向window
        var method1 = module.getX.bind(window);
        // 调用新函数
        method1();
        // 调用老函数
        module.getX();

上面的简易写法，直接在函数后面调用bind(),改变this指向

     let obj = {
         method:function(){
             console.log(this);
         }.bind(window)
     }
     obj.method();

二、函数默认参数值

百度搜索 mdn 默认参数值

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Default_parameters

例子1

 // 函数形参的扩展用法,默认参数==================
        let fangfa = function (a, b = 10, c = 10) {
            d = a + b + c;
            console.log(d);
        }
        fangfa(0);

例子2，使用扩展运算符，实现多个参数，扩展运算符实际上操作数组，b当做一个数组就可以了

        // 使用扩展运算符...实现多个参数-----
        let fangfa2 = function (a = 0, ...b) {
            // b传进来就是一个数组
            let x = a
            for (let i = 0; i < b.length; i++) {
                x += b[i];
            }
            console.log(x);

        }
        fangfa2(1, 2, 3, 4, 5);

三、函数返回对象

      //返回对象=======================
      function duixiang (){
          let x = '我是x';
          let y = '我是y'
          return{x,y};
      }
      console.log(duixiang())