JS详解-class-类的核心语法关于ES6与ES5

class基本核心语法:

javascript 复制代码
         //定义类
        class Person{
            //公有属性(推荐此处定义)
            name
            // 定义属性并设置默认值
            price = 100
            //构造函数
            constructor(name,age){
                // 构造函数内部的this实例化对象
                this.name = name
                this.age = age
                // 动态添加属性(不推荐,查找麻烦)
                this.rank = 'QSHQDG'
            }
            //定义方法(公有)
            sayHello(){
                console.log('hello')
            }
        }
         // 类实例化
        const p = new Person('ian',18)

class实现继承:

javascript 复制代码
        //定义类
        class Person{
            //公有属性(推荐此处定义)
            name
            // 定义属性并设置默认值
            price = 100
            //构造函数
            constructor(name,age){
                // 构造函数内部的this实例化对象
                this.name = name
                this.age = age
            }
            //定义方法(公有)
            sayHello(){
                console.log('papa said hello')
            }
        }
        // 子类继承
        class Student extends Person {
            age
            constructor(name,age){
                super(name)
                this.age = age
            }
            sayHi(){
                console.log('son said hi')
            }
            // 就近原则,也可以实现构造函数的重写(多态)
            // sayHello......
        }
        const s = new Student('ian',18)

class静态属性和私有属性

静态属性:定义:使用static关键字;使用:直接用类来调用

私有属性:定义:#开头;使用:带上#且只能在声明该静态属性内部使用

注意:外部不可以直接调用私有属性,但可以通过类中的方法调用私有属性或私有方法,在外部实例化该类后调用方法,间接使用私有属性(浏览器调试工具可以直接调用)

javascript 复制代码
        class Test {
            // 静态属性和方法
            static stInfo = 'static sx'
            static stMethod(){
                console.log('static')
            }
            //私有属性和方法
            #prInfo = 'prInfo'
            #prMethod(){
                console.log('prMethod')
            }
            testPr(){
                console.log(this.#prInfo)
                this.#prMethod()
            }
        }

        Test.stMethod()
        console.log(Test.stInfo)
        const t = new Test()
        t.testPr()

ES5寄生组合继承:

解释为什么叫寄生组合:

1、组合式继承用到构造函数和原型链

2、在父类原型中有子类构造函数

javascript 复制代码
         // 父类
        function Person(name){
            this.name = name
        }
        Person.prototype.sayHello = function(){
            console.log('papa said hello')
        }
        // 组合式寄生
        function Student(name){
            Person.call(this,name)
        }
        // 通过原型链继承方法
        const proto = Object.create(Person.prototype,{
            constructor: {
                value: Student,
            }
        })
        //创造的原型,赋值给子类的原型
        Student.prototype = proto
        const s = new Student('ian')    

何为Object.create()?是一种静态方法,第一个参数是源对象,第二个参数是覆盖对象中的特定属性和方法。

相关推荐
明月_清风3 分钟前
Meta 开源了一个 AI Native 组件库:Astryx,150+ React 组件,专为 AI Agent 而设计
前端·人工智能·ai编程
用户8508692761524 分钟前
秒杀系统中 Shell 脚本并发控制 Bug:究竟哪里出了
前端
qq_406981032 小时前
c++拷贝构造函数
开发语言·c++
程序员大阳2 小时前
HTML+CSS+JS对话式实战(3)-活动管理页实现查询、新增、删除API后端接口
javascript·css·html·实战·删除·查询·新增
爱喝雪碧的可乐2 小时前
MATLAB
开发语言·算法·matlab
炫酷的大高个3 小时前
6 亿播放的闪身步,我用前端算出 15 倍重心差
前端·javascript
不可能片场3 小时前
内容运营自动化 配图折行别把词切两半
前端·electron
Lank_M3 小时前
HEIC转JPG统一转sRGB,P3高饱和色就回不来了
前端
补码缩写3 小时前
sharp默认转JPG颜色没错,ICC和EXIF却全没了
前端
用户7783366132113 小时前
SerpBase AI Overview 引用卡片:React 组件实战
前端