js中的class解构

最新推荐文章于 2025-02-12 08:30:00 发布

原创最新推荐文章于 2025-02-12 08:30:00 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

js 专栏收录该内容

19 篇文章

订阅专栏

本文深入探讨JavaScript中的类和对象，包括类的构造函数、实例继承、原型方法、私有方法和静态方法。还介绍了解构赋值的用法、默认值的设定以及字符串模板的使用。通过实例代码详细解析了这些概念，帮助开发者更好地理解和应用JavaScript中的面向对象特性。

1.没有写 constructor 会隐士执行constructor函数;

construcor(形参参数接收){} new 类名（实参传入）

默认 return this ；this 代表着class类

2.实例会继承原型上的方法和属性，获取返回的类对象

 <script>
        class Person {
            constructor(name,food){ // 接收参数
                // 设置属性特征
                this.name = name;
                this.food = food;

                // return this 默认 
            }
            // 原型
            add(){
                console.log(this.name + "喝" + this.food);
            }
      
        }
        // 实例
        let result = new Person("大哥","奶茶")  // 大哥
        


    </script>

1.class类

class 表达式 let 变量名 = class {}

class内部怎么调用其他原型函数 this.函数名()

 let Person = class  {
            constructor(name,food){
                this.name = name;
                this.food = food;
            }
            add(){
                // class内部怎么调用其他原型函数 this.函数名()
                console.log(this.name + "喝" + this.food);
            }
            add1(){
                this.food = "珍珠" + this.food
            }
        }
        // 实例
        let result = new Person("大哥","奶茶")  // 大哥
        let result1 = new Person("夏栀","咖啡")  // 夏栀

2.其他class（杂项）

私有方法

只能在class类的内部使用 this.#add1()

#方法(){}

#属性 #sss = 100

静态方法

构造函数和 class类是一样的

new Person() 构造函数通过new 调用函数就是构造函数

static add2(){ 将函数放置类上面

console.log("123");

<script>
        
        let Person = class  {
            constructor(name,food){
                this.name = name;
                this.food = food;
            }
            add(){
                console.log(this.name + "喝" + this.food);
            }
            #add1(){
                console.log(1); // 
                this.food = "珍珠" + this.food
            }
            #sss = 100

            // 静态方法  放在了类上面
            static add2(){
                console.log("123");
            }
        }
        // 实例
        let result = new Person("大哥","奶茶")  // 大哥

3.解构赋值

解构赋值

一定的模式，模式匹配；复制操作，接收数据操作都可以使用机构赋值

数组解构

[变量]=[数据]

变量名和数据是一一对应的;变量都是一个新的变量

对象的解构{}={}

变量名需要与对象的属性名一样；变量都是一个新的变量

对象真正的匹配

属性名赋值给对应属性名

等号左边的属性名再次赋值给数组变量名

位置随意只要属性名正确

let{name:a,age:b,sex:c}={name:"夏栀",age:18,sex:"女"}

ES6简化

let{name,age,sex}={name:"夏栀",age:18,sex:"女"}

属性名和数值名一样可以只写一个

字符串解构和数组一样

let [a,b]="我"

console.log(a,b);

  <script>
        // let{age,sex,name1}={name1:"夏栀",age:18,sex;"女"}
        // console.log(age,sex,name1);
        // let [a,b]="我"
        // console.log(a,b);
        let obj ={
            name:"夏栀",
            food:"奶茶",
        }
        function add({name,food}){
            console.log(name,food);
        }
    </script>

4.默认值

函数默认值==解构默认值

解构默认值

当你的变量名值为undefined是，默认值就会生效

变量名=赋值

设置默认值

当你的变量名值为undefinded时默认值就会生效

 <script>
        //解构默认值
        let{qwe=100}={name1:"夏栀",age:18,sex:"女",qwe:"默认值"}
        console.log(qwe);

        let[a,c,e="我要优质"]=[1,2,6]
        console.log(a,c,e);
        //函数默认值
        function add(a,c=33){
            console.log(a,c);
        }
        add(1,22)
    </script>

5.字符串模板

es6的字符串模板``

被``包裹的内容都是字符串

${变量名}

${计算}

${函数执行}

${判断}

<script>
        let name ="小冯是"
        let num=1;
        let str=`${true ?`qwe`:add()}我大哥排名第${num+10}位`;
        function add(){
            return name;
        }
        

    </script>