JS(第二十七课)JavaScript的面向对象思想

简介: JS(第二十七课)JavaScript的面向对象思想

JS(第十课)JS中的对象_星辰镜的博客-CSDN博客

1 对象的创建方式

方式一

var people = {
    // 对象的属性
    id: "789678200010090987",
    name: "王者荣耀",
    age: 78,
    sex: "男",
    height: "189",
}
console.log(people)

方式二

function Student(id, name, sex, age, height) {
    this.id = id;
    this.name = name;
    this.sex = sex;
    this.age = age;
    this.height = height;
}
let Students = new Student("1", "我是数据", "男", 23, "190") //对象的实例化
console.log(Students)

2 创建一个类名

// 创建一个类名
class Dog {
    // 共同有的属性放在里面
    constructor(id, name, sex, age, sleep) {
        this.id = id;
        this.name = name;
        this.sex = sex;
        this.age = age;
        this.sleep = sleep;
    }
}
// 利用new关键字创建对象
let dog1 = new Dog("1002", "小胡", "男", 16, "睡觉")
console.log(dog1)

class Duck {
    constructor(id, name, sex, age, sleep) {
        this.id = id;
        this.name = name;
        this.sex = sex;
        this.age = age;
        this.sleep = sleep;
    }
    sing(song) {
        console.log(this.name + `叫` + song)
    }
}
let duck1 = new Duck("1003", "小民", "男", 1, "睡觉")
console.log(duck1)
duck1.sing('dog呀听话不要狗叫')

1. 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写

2. 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象

3. constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数

4. 多个函数方法之间不需要添加逗号分隔

5. 生成实例 new 不能省略

6. 语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function

3 类的继承

class Object {
    constructor(x, y, z) {
        this.x = x;
        this.y = y;
        this.z = z;
    }
    sum() {
        // 累加
        console.log(this.x + this.y + this.z)
    }
    Accumulation() {
        // 累*
        console.log(this.x - this.y - this.z)
    }
}

//子元素继承父类
class Son extends Object {
    constructor(x, y, z) {
        //使用super调用了父类中的构造函数
        super(x, y, z)
    }
}
let son = new Son(10, 10, 20);
son.sum();
son.Accumulation()

1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的


2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)


3. 如果子类想要继承父类的方法,同时在自己内部扩展自己的方法,利用super 调用父类的构造函数,super 必须在子类this之前调用

4 父类有加法方法

 // 父类有加法方法
 class Father {
    constructor(x, y) {
    this.x = x;
    this.y = y;
    }
    sum() {
    console.log(this.x + this.y);
    }
  }
  // 子类继承父类加法方法 同时 扩展减法方法
  class Son extends Father {
    constructor(x, y) {
    // 利用super 调用父类的构造函数 super 
    // 必须在子类this之前调用,放到this之后会报错
    super(x, y);
    this.x = x;
    this.y = y;
   }
   subtract() {
   console.log(this.x - this.y);
   }
 }
 var son = new Son(5, 3);
 son.subtract(); //2
 son.sum();//8

5 这个函数要实例化

class Father {
    // 这个函数要实例化
    constructor(money, cars, house, company) {
        this.money = money;
        this.cars = cars;
        this.house = house;
        this.company = company;
    }
    manage() {
        console.log("我是管理manage的思想方法")
    }
}
class Son extends Father {
    constructor(money, cars, house, company) {
        // 利用super 调用父类的构造函数
        super(money, cars, house, company);
    }
}
let Sum = new Son("100", "红旗110", "南昌", "1109")
console.log(Sum)
Sum.manage()

 

 

相关文章
|
15天前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
62 32
|
2月前
|
JavaScript 前端开发
【JavaScript】——JS基础入门常见操作(大量举例)
JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象
|
3月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
3月前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
3月前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API
|
4月前
|
Web App开发 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具
|
自然语言处理 JavaScript 前端开发
学习javaScript必知必会(2)~js词法分析、介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)
学习javaScript必知必会(2)~js词法分析、介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)
165 0
学习javaScript必知必会(2)~js词法分析、介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)
|
JavaScript 前端开发
Javascript之旅——第七站:说说js的调试
原文:Javascript之旅——第七站:说说js的调试      最近比较吐槽,大家都知道,现在web前端相对几年前来说已经变得很重了,各种js框架,各种面对对象,而且项目多了,就会提取公共模块, 这些模块的UI展示都一样,不一样的就是后台逻辑,举个例子吧,我们做企业差旅的时候,通常都有一个成本中心的js公共模块,客户在预定机票 的时候来填写这个成本中心,而这种成本中心分布在online,offline和app等预定端,这样也是方便后期和客户公司进行月结算。
834 0
|
3月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
49 1
JavaScript中的原型 保姆级文章一文搞懂

热门文章

最新文章

  • 1
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    23
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    53
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    55
  • 8
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    71
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62