解构赋值箭头函数 this指向问题对象解构赋值

最新推荐文章于 2024-06-17 11:55:39 发布

誰言秋桜

最新推荐文章于 2024-06-17 11:55:39 发布

阅读量341

点赞数

分类专栏：学习笔记 js 文章标签： javascript java 开发语言

本文链接：https://blog.csdn.net/weixin_64948861/article/details/126769649

版权

学习笔记同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

22 篇文章 0 订阅

订阅专栏

# 解构赋值

## 数组解构赋值

```js
        /**
         简介：
            按照一定的模式，从数组和对象中提取值。（对变量的赋值）
    
        */
       //数组的解构赋值
       var ary=["姜维","魏延","诸葛亮"];
        // var [str1,str2,str3]=ary; 
        // console.log(str1);
        // console.log(str2);
        // console.log(str3);

        //解构不成功，变量的值为：undefined
        var [a,b,c,d]=ary;
        console.log(d);
        //不完全解构
        var [n1,n2]=ary;
        console.log(n1);
        //如果等号右边不是数组（确定的说时不能遍历的结构），那么会报错
        var [s1]={};
        var [s1]=1;
        var [s1]="刘备";
        //true,function(){}，undefined,NaN,null
```

## 对象解构赋值

```js
       /**
         * 对象的解构赋值：允许使用变量名，匹配对象中的属性名，匹配成功
         * 会把该属性的值赋值给变量
         *
         * 
        */
       //对象解构赋值第一种方式：
        let obj={
            uname:'张飞',
            age:18
        }
        let {uname,age}=obj;
        console.log(uname);
        console.log(age);
        //对象解构赋值第二种方式：
        let {uname:myName,age:myAge} =obj;
        console.log(myName);
```

# 箭头函数

```js
   /**
     * 箭头函数：
     *  定义函数的语法，简化了函数定义的方式
     * 方式1： 
     * function 函数名(){
     *  }
     * 方式2：箭头函数
     *  语法：(参数1,参数2.....) => {}
     * 特点：
     *      1、在箭头函数中，如果{}里面只有一句代码，并且这个代码是函数的返回值。
     *          那这个{}可以省略,return可以省略
     *       2、如过参数只有1个，可以省略小括号

    */

       const fn= (num1,num2) => {
            return num1+num2
        }

        const fn= (num1,num2) =>  num1+num2
        let sum=fn(2123,123); //调用函数
        console.log(sum);
        const fn1= num => {
            console.log(num)
        }
        fn1(100);
        
        function fn(){
            console.log(this);   // obj
               return () => {
                console.log(this); //obj
            }
        }
        let obj={uname:"孙权"};
        /** 
         * call方法：立即调用函数，并且改变this的指向
         *            this指向谁，由传入的参数决定
         * */
        let fn2= fn.call(obj); 
        fn2();
```

## this指向问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn1">调用普通函数</button>
    <button id="btn2">调用箭头函数</button>
    <script>
      /** 
    注意点：
     *      箭头函数this的绑定的问题？
     *      function(){} 这里面this指向的谁？谁调用我指向谁
     *      箭头函数this指向：箭头函数定义位置中的this
     **/  
    let bnt1=document.getElementById("btn1");
    let bnt2=document.getElementById("btn2");
    btn1.onclick=function(){
        console.log(this);  //btn1
    }
    btn2.onclick= () => {
        console.log(this); //window
    }
    </script>
    </body>
</html>