es6 类和 对象

作者: 杜先生 | 发表于 2021-07-06 12:32 | 分类 js | 阅读 412 | 评论 0

面向过程

面向过程就是解决问题,实现某种功能的时候按照我们自己罗列的步骤去解决问题

总结下来就八个字 自顶向下,逐步细化

面向对象

面向对象更贴近我们的实际生活,可以使用面向对象描述现实世界事物,但是事物分为具体的事物和抽象的事物

手机 抽象的(泛指的)

iphone 具体的手机

面向对象的思维特点:

1. 抽取(抽象)对象公用的属性和行为组织(封装)成一个类(模版)
2. 对类进行实例化,获取类的对象

面向对象编程我们考虑的是有那些对象,按照面向对象的思维特点,不断的创建对象,指挥对象做事情。

1. 对象

现实生活中:万物皆对象,对象是一个具体的事物,看得见摸得着的实物,例如,一本书,一辆汽车,一个人都可以是“对象”,一个数据库,一张网页,一个与远程服务器的连接也可以是“对象”。

在 js中,对象是一组无序的相关属性和方法的集合,例如字符串,数字,数组,函数等

对象是由属性和方法组成的:

  • 属性:事物的特征,在对象中用属性来表示
  • 方法:实物的行为,在对象中用方法来表示

2. 类 class

在 es6 中新增加了类的概念,可以使用class关键字声明一个类,之后以这个类来实例化对象

类抽象了对象的公共部分,它泛指某一大类(class)
对象特指某一个,通过类实例化一个具体的对象

3. 创建类

语法:

class name {
    // class body
}

创建实例:

var xx = new name()

注意:类必须使用new 实例化对象

4. 类constructor 构造函数

constructor() 方法是类的构造函数(默认方法),用于传递参数,返回实例对象,通过new命令生成对象实例时,自动调用该函数,如果没有定义,类内部会自动给我们创建一个constructor()

在类中所有的函数都不需要 function

class People{
    constructor(username,age){
    <!-- 可以接收我们传递过来的参数-->
        this.username = username
        this.age = age
    }
    eat(food){
        console.log(this.name+"吃的" + food)
    }
}

var zs = new Star("张三", 20)

console.log(zs.username)
zs.eat("回锅肉")
  • 通过class 关键字创建类,类名我们还是习惯性定义首字母大写,
  • 类中有constructor 函数,可以接收传递过来的参数,同时返回实例对象
  • constructor 函数 只要new生成实例时,就会自动调用这个函数,如果我们不写这个函数,类也会自动生成这个函数
  • 生成实例 new 不能省略
  • 注意语法规范,创建类,类名后面不要加小括号,生成实例,类名后面加小括号,构造函数不需要加function,类中的函数都不需要加function
  • 多个函数之间不需要添加逗号分隔

5.1 类的继承

现实中的继承,子承父业,比如我们都继承了父亲的姓

在程序中的继承,子类可以继承父类的一些属性和方法。

语法:

class Father {
    // 父构造函数
}
class Son extends Father {
    // 子构造函数
}

实例:

class Father {
    constructor(){
        
    }
    money(){
        console.log(100)
    }
}
class Son extends Father {
    
}
var son = new Son();
son.money()

实例1:

class Father {
    constructor(x,y){
        this.x = x
        this.y = y
        
    }
    sum(){
        console.log(this.x + this.y)
        //只有父类中的x和y才能想加
    }
}
class Son extends Father {
    constructor(x, y){
        this.x = x
        this.y = y
    }
}
var son = new Son();
son.sum()
<!-- 报错-->

5.2 super 关键字

super 关键字用于访问和调用父类上的函数,可以调用父类的构造函数,也可以调用父类的普通函数

实例1调用父类的构造函数:

class Father {
    constructor(x,y){
        this.x = x
        this.y = y
        
    }
    sum(){
        console.log(this.x + this.y)
        // 只有父类中的x和y才能想加
    }
}
class Son extends Father {
    constructor(x, y){
       super(x,y); // 调用了父类中的构造函数
    }
}
var son = new Son();
son.sum()
<!-- 报错-->

实例2调用父类的普通函数

class Father{
    say(){
        console.log("我是爸爸")
        return "我是爸爸"
    }
}
class Son extends Father{
    say(){
        // console.log("我是儿子")
        console.log(super.say() + "的儿子")
        // super.say() 就是调用父类中的普通函数 say
    }
}
var son = new Son();
son.say();

继承中的属性或者方法查找原则:就近原则

  • 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
  • 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)

案例3 继承父类方法 扩展自己的方法

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(x,y) // 子类在构造函数中使用super,必须放到this前面,(必须先调用父类的构造函数方法,再使用子类构造函数方法)
        this.x = x
        this.y = y
      //  super(x, y) // 调用父类的构造函数
    }
    substract(){
        console.log(this.x - this.y)
    }
}
var son = new Son(x, y)
son.substract()
son.sum()

子类在构造函数中使用super,必须放到this前面,(必须先调用父类的构造函数方法,再使用子类构造函数方法

总结注意点:

<button>点击</button>
<script>
var self;
    class People{
        constructor(name,age){
            this.name = name
            this.age = age
            this.say();
            this.btn = document.querySelector("button")
            this.btn.onclick = this.sing
            // this 指的是创建的实例对象
            self = this
        }
        say(){
        // this 指向btn
            console.log(this)
            console.log(self.name) // self 里面存储的是constructor里面的this
        }
        run(){
            console.log(this)
        }
    }
    var zs = new People("张三", 20)
    console.log(self = zs)
    console.log(zs.run)
    console.log(zs.say)
</script>
  • 在 ES6中类没有变量提升,所以必须先定义类,才能通过类实例化对象
  • 类里面的共有的属性和方法一定要加 this 使用
  • 类中this指向问题

评论:

温馨提示

  • 请确保输入的邮箱地址正确,以便及时收到回复邮件
  • 评论内容需要合规合法,任何不符合国家法律和不健康的内容将会被删除