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())