【ES6复习笔记】Class类(15)

介绍

ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过 class 关键字,可以定义类。基本上,ES6 的 class 可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

js 复制代码
class shouji {
    constructor(brand,price) {
        this.brand=brand;
        this.price=price
    }

    call(){
        console.log('我可以打电话')
    }
}

let A = new shouji('1+',1999);
console.log(A)

知识点:

  1. class 声明类
  2. constructor 定义构造函数初始化
  3. extends 继承父类
  4. super 调用父级构造方法
  5. static 定义静态方法和属性
  6. 父类方法可以重写

静态成员

js 复制代码
class Person{
    static name='手机'
}
let nokia = new Person();
console.log(nokia.name);

构造函数继承

js 复制代码
function Phone(brand,price){
    this.brand=brand;
    this.price=price;
}
Phone.prototype.call=function (){
    console.log("我可以打电话");
}
function SmartPhone(brand,price,color,size){
    Phone.call(this,brand,price);
    this.color=color;
    this.size=size;
}

//设置子级构造函数原型
SmartPhone.prototype=new Phone;
SmartPhone.prototype.constructor=SmartPhone;

//声明子类方法
SmartPhone.prototype.photo = function (){
    console.log('我可以玩游戏');
}
const chuizi = new SmartPhone('锤子',2499,'黑色','5.5inch')
console.log(chuizi);

Class 的类继承

js 复制代码
class Phone{
    constructor(brand,price) {
        this.brand=brand;
        this.price=price;

    }
    //父类的成员属性
    call(){
        console.log('我可以打电话')
    }
}
class SmartPhone extends Phone{
    constructor(brand,price,color,size) {
        super(brand,price);
        this.color=color;
        this.size=size;
    }
    photo(){
        console.log('拍照');
    }

    playGame(){
        console.log('打游戏');
    }
}
const xiaomi=new SmartPhone('小米',1999,'黑色','4.7inch')
xiaomi.call();
xiaomi.photo();
xiaomi.playGame();

子类对父类方法的重写

js 复制代码
class Phone{
    constructor(brand,price) {
        this.brand=brand;
        this.price=price;

    }
    //父类的成员属性
    call(){
        console.log('我可以打电话')
    }
}
class SmartPhone extends Phone{
    constructor(brand,price,color,size) {
        super(brand,price);
        this.color=color;
        this.size=size;
    }
    photo(){
        console.log('拍照');
    }

    playGame(){
        console.log('打游戏');
    }

    //重写!
    call(){
        console.log('我可以进行视频通话')
    }
}
const xiaomi=new SmartPhone('小米',1999,'黑色','4.7inch')
xiaomi.call();
xiaomi.photo();
xiaomi.playGame();

get 和 set 设置

js 复制代码
class Phone{
    get price(){
        console.log("价格被读取了")
        return 'I LOVE YOU'
    }

    set price(val){
        console.log('价格被修改了')
        return val;
    }
}

//实例化对象
let s = new Phone();
s.price=12  
// console.log(s.price)   //其实是调用price方法
相关推荐
左耳咚15 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
D_C_tyu15 小时前
Vue3 + Element Plus 实现前端手动分页
javascript·vue.js·elementui
黑云压城After15 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript
せいしゅん青春之我16 小时前
【JavaEE初阶】网络原理——TCP报文结构、确认应答机制
网络·笔记·网络协议·tcp/ip·java-ee
charlie11451419117 小时前
2D 计算机图形学基础速建——2
笔记·学习·线性代数·教程·计算机图形学
用户479492835691517 小时前
从 58MB 到 2.6MB:我是如何将 React 官网性能提升 95% 的
前端·javascript
该用户已不存在17 小时前
7个让全栈开发效率起飞的 Bun 工作流
前端·javascript·后端
芙蓉王真的好118 小时前
Angular CDK 响应式工具指南:从基础到自适应布局应用
前端·javascript·angular.js
9ilk18 小时前
【仿RabbitMQ的发布订阅式消息队列】--- 模块设计与划分
c++·笔记·分布式·后端·中间件·rabbitmq
明仔的阳光午后19 小时前
React 入门 01:快速写一个React的HelloWorld项目
前端·javascript·react.js·前端框架·reactjs·react