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()?是一种静态方法,第一个参数是源对象,第二个参数是覆盖对象中的特定属性和方法。

相关推荐
深蓝海拓1 分钟前
使用@property将类方法包装为属性
开发语言·python
雨雨雨雨雨别下啦11 分钟前
Vue3——RabbitShopping
前端·javascript·vue.js
xiaoye-duck14 分钟前
【C++:unordered_set和unordered_map】 深度解析:使用、差异、性能与场景选择
开发语言·c++·stl
BumBle15 分钟前
从声明式到命令式:Vue3 弹窗组件的工厂模式重构
前端
恋猫de小郭22 分钟前
你的蓝牙设备可能正在泄漏你的隐私? Bluehood 如何追踪附近设备并做隐私分析
android·前端·ios
zjjsctcdl29 分钟前
java与mysql连接 使用mysql-connector-java连接msql
java·开发语言·mysql
格林威33 分钟前
Baumer相机锂电池极片裁切毛刺检测:防止内部短路的 5 个核心方法,附 OpenCV+Halcon 实战代码!
开发语言·人工智能·数码相机·opencv·计算机视觉·c#·视觉检测
顶点多余43 分钟前
线程互斥+线程同步+生产消费模型
java·linux·开发语言·c++
Albert Edison44 分钟前
【ProtoBuf 语法详解】更新消息|保留字段|未知字段
开发语言·c++·protobuf
feifeigo1231 小时前
近场声全息(NAH)数据与MATLAB实现
开发语言·matlab