JavaScript类和对象

目录

1、面向对象与面向过程

1.1 面向过程编辑POP(Process-oriented programming)

1.2 面向对象编程OOP(Object Oriented Programming)

2、类和对象

2.1 对象

2.2 类 class

2.3 创建类

2.4 构造函数 constructor

3、类的继承

3.1 super关键字

3.2 类的继承extends

3.3 ES6中的类和对象


1、面向对象与面向过程

1.1 面向过程编辑POP(Process-oriented programming)

面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。面向过程,就是按照我们分析好的步骤,按照步骤解决问题。

1.2 面向对象编程OOP(Object Oriented Programming)

面向对象是把事务分解成一个个对象,然后由对象之间分工与合作。是以对象功能来划分问题,而不是步骤。

面向对象编辑具有灵活、代码可复用、容易维护和开发的优点。

面向对象的三大特征:封装性、继承性、多态性

优点:易维护、易复用,易扩展,可以设计 出低耦合的系统,使系统更灵活、更加易于维护。

缺点:性能比面向过程低。

2、类和对象

2.1 对象

万物皆对象,对象是一个具体的事物,看得见摸得着的实物。例如:一本书、一个人可以是对象,一个数据库、一个远程服务器的连接也可以是对象。

在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,使用数据、数组、函数等。

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

  • 属性:事物的特征,在对象中用属性来表示(常用名词)
  • 方法:事物的行为,在对象中用方法来表示(常用动词)

2.2 类 class

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

抽象了对的公共部分,它泛指某一大类(class)

对象特指某一个,通过类实例化一个具体的对象

2.3 创建类

创建实例:类必须使用new 实例化对象

const obj=new name()

new在执行时会做四件事性

  1. 在内存中创建一个新的空对象
  2. 让this指向这个新的对象
  3. 执行构造函数里的代码,给这个新对象添加属性和方法
  4. 返回这个新对象(所以构造函数里面不需要return) 

2.4 构造函数 constructor

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

1 通过class关键字创建类,首字母大写

2 constructor函数,可以接受传递过来的参数,同时返回实例对象

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

4 生成实例,new 不能省略

5 创建类,类名后不加小括号,生成实例 类名后面要加小括号,构建函数不需要function

3、类的继承

3.1 super关键字

super 用于访问和 调用对象父类上的函数。可以调用父类的构造函数,也可以调用父类的普通函数

const Person = {
  name: '名字',
  age: 18,
  funStr() {
    console.log(`姓名:${this.name},年龄:${this.age}`);
  },
};
const Son = {
  __proto__: Person,
  //重写覆盖父类方法
  funStr() {
    console.log(`重写姓名:${this.name},年龄:${this.age + 1}`);
  },
};
Son.name = '刘德华';
Son.funStr();// 重写姓名:刘德华,年龄:19

 上面的代码可以用class重构

    class Person {
        // 构造函数,
        constructor(name, age) {
          this.name = name;
          this.age = age;
        }
        // 普通函数
        funStr() {
          console.log(`姓名:${this.name},年龄:${this.age}`);
        }
      }
      class Son extends Person {
        constructor(name, age) {
          super(name, age);
        }
      }
      var son = new Son('刘天王', 22);
      son.funStr();

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

2. 继承中,如果子类里没有,就去找父类有没有这个方法,就执行父类的这个方法

3. 可以通过super直接调用父类的方法

3.2 类的继承extends

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

class Person {
  constructor(name, age) {
    this.name = name;
  }
}
class Student extends Person {
  // 子类继承父类
  constructor(name, other) {
    super(name); // 调用父类的constructor
    this.other = other; // 定义子类的属性
  }
}

3.3 ES6中的类和对象

1.在ES6中类没有变量提升,所以必须先定义类,才能通过类实例化对象

2.类里面的共有属性和方法一定要加this使用

3.类里面的this指向问题

4.consturctor里面的this指向实例对象,方法里的this指向这个方法的调用者

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值