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()

 

 

相关文章
|
1月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
74 32
|
3月前
|
JavaScript 前端开发
【JavaScript】——JS基础入门常见操作(大量举例)
JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象
|
4月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
4月前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
4月前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API
|
5月前
|
Web App开发 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具
|
存储 JavaScript 前端开发
JavaScript与PHP中正则
有个在线调试正则的工具,点击查看工具。下面的所有示例代码,都可以在codepen上查看到。
JavaScript与PHP中正则
|
JavaScript 前端开发 PHP
|
4月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
57 1
JavaScript中的原型 保姆级文章一文搞懂
|
8月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
147 2

热门文章

最新文章