箭头函数和this函数

1.创建函数

①。声明式创建函数

 <script>
   function fun() {
        console.log("我是声明式创建函数");
    }
    fun()
 </script>

②。赋值式函数

     <script>

    let fun1 = function(){
        console.log("我是赋值式函数");
    }
    fun1();
</script>

2. 立即执行函数，只执行一次 () 调用

    <script>
     (function fun() {
        console.log("我是立即执行语句");    
    })();
    </script>

3.箭头函数

    <script>
 let fn=()=>{
       console.log('你好')
   }
   fn()
</script>

使用箭头函数求1-100之间的和

 <script>
  let fun = (n,m) =>{
        let sum = 0;
        for(let i = n;i<=m;i++){
             sum += i
        }
        console.log(sum);
    }
    fun(1,100)
</script>

  <script>

let fun1 = (n,m) =>{
        let sum = 0;
        for(let i = n;i<=m;i++){
             sum += i
        }
        return sum;
   }
   let sums = fun1(1,100);
    console.log(sums);
</script>

4.this

this随处可在 函数内部的另一个对象，this相当于在调用时的作用域

this在不同环境下，不同作用下，表现的也不同

谁调用函数，this就指向谁

1：全局作用下，this指向的是window

2：函数独立调用时，函数内部的this也指向window

3：被嵌套的函数独立调用时，this默认指向了window

4：IIFF自执行函数中内部的this也是指向window

5：构造函数中的this，用于给类定义成员（属性和方法）

箭头函数中没有this指向，如果在箭头函数中有，则会向上一层函数中查找this，直到window

①。全局作用下，this指向的是window

 <script>
 console.log(window);
    console.log(this);
    console.log(window == this);
</script>

②：函数独立调用时，函数内部的this也指向window

    <script>
    function fun() {
        console.log("我是函数体");
        console.log(this);
    }
    fun()
</script>

③。被嵌套的函数独立调用时，this默认指向了window

     <script>
    function fun() {
        function fun2(){
            console.log("我是函数体");
        console.log(this);
        }
        fun2()
    }
    fun()
</script>

④。IIFF自执行函数中内部的this也是指向window

   <script>
(function (params) {
        console.log("立即执行");
        console.log(this);
    })()
</script>

⑤。构造函数中的this，用于给类定义成员（属性和方法）

为什么使用构造函数

创建对象为了统一管理资源，节省内存空间

   <script>
  function fun(uname,usex,usage) {
           this.name = uname;
           this.sex = usex;
           this.age = usage;
           this.hobby = function(){
            //    方法体中我们不建议直接写形参值，
            // 就是写属性
               console.log(`我的姓名是${this.name}性别是${this.sex}年龄是${this.age}`);
           }
       }
    //    构造函数调用时，请使用  new 关键字
       let zs = new fun("张三","男",18);
       let ls = new fun("李四","男",20);
       console.log(zs);
       zs.hobby();
       console.log(ls);
     ls.hobby()
</script>

     <script>
let obj = {
           name:"王二麻子",
           sex:"男",
           age:23,
           hobby:function(){
            console.log(`我的姓名是${this.name}性别是${this.sex}年龄是${this.age}`);
           }
       }
       console.log(obj)
       obj.hobby()
</script>