ES6 类和对象

旧巷老猫 提交于 2020-01-30 03:57:18

基本编程思想

面向过程

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

面向过程就是按照我们分析好的步骤,按照步骤解决问题

面向对象

面向对象是把事物分解为一个个对象,然后对象之间分工合作

面向对象是以对象来划分问题,而不是步骤

特点

  • 封装性
  • 继承性
  • 多态性

举例:将大象装进冰箱

面向过程做法:

1.打开冰箱
2.将大象放进去
3.关上冰箱门
在这里插入图片描述
面向对象做法:

1.大象对象

  • 进去

2.冰箱对象

  • 打开
  • 关闭

3.使用大象和冰箱的功能

对比

面向过程

  • 优点:性能别面向对象高,适合跟硬件联系紧密的东西,例如单片机就采用的面向过程编程
  • 缺点:没有面向对象易维护、易复用、易扩展

面向对象

  • 优点:易维护、易复用,由于面向对象有封装、继承、多态性的特性、可以设计出低耦合的系统,使系统更加灵活、更加易于维护
  • 缺点:性能比面向过程低

ES6中的类和对象

对象

js中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。

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

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

类 class

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

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

面向对象的思维特点
1.抽取(抽象)对象共用的属性和行为组织(封装)成一个类(模板)
2.对类进行实例化,获取类的对象

创建类

class Person {
  //constructor() 方法是类的构造函数(默认方法),用于传递参数,返回实例对象
  // 通过 new 命令生成对象实例时 ,自动调用该方法
  // 如果没有显示定义, 类内部会自动给我们创建一个constructor()  
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  say() {
    console.log('My name is ' + this.name);
  }
  run() {
    console.log('I can run!');
  }
}
var person1 = new Person('aaa', 19);
person1.say(); //My name is aaa
person1.run(); // I can run!

类的继承

用法:

class Father {
  //
}
class Child extends Father {
  //
}

关键字 super

super 关键字用于访问和调用对象父类上的函数

可以调用父类的构造函数,也可以调用父类的普通函数

子类在构造函数中使用super, 必须放到 this 前面

class Father {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  sum() {
    console.log(this.x + '+' + this.y);
    console.log(this.x + this.y);
  }
  say() {
    console.log('father');
  }
}
class Child extends Father {
  constructor(x, y) {
  	//子类在构造函数中使用super, 必须放到 this 前面
    super(x, y);
    this.x = x;
    this.y = y;
  }
  subtract() {
    console.log(this.x + '-' + this.y);
    console.log(this.x - this.y);
  }
  //当父类和子类拥有同样的方法时,优先考虑最近的
  //如果还想使用父类的方法,则应使用关键字 super
  say() {
    super.say();
  }
}
var child1 = new Child(5, 3);
child1.sum(); // 8
child1.subtract(); //2
child1.say(); //father
class Person {
  constructor(name, age) {
    // constructor 里面的this指向实例对象
    this.name = name;
    this.age = age;
    console.log(this)
  }
  say() {
    //方法里面的this 指向这个方法的调用者 
    console.log(this)
  }
}
var person1 = new Person('张三');
var person2 = new Person('李四');
person1.say();
person2.say();
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!