目录

面向过程与面向对象

对象与类

对象

类

面向过程与面向对象

面向过程

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

面向对象

面向对象是把事物分解成一个个对象，然后由对象之间分工合作。

面向过程与面向对象对比

对象与类

对象

对象是有属性和方法组成的：它是一个无序建筑队的集合，指的是一个具体的事物。

       属性：事物的特征，在对象中用属性来表示（常用名词）。

       方法：事物的行为，在对象中用方法来表示（常用动词）。

创建对象

// 字面量创建对象
var yyqx = {
  name: '易烊千玺',
  age: 18
}

// 构造函数创建对象
function Star(name, sge){
  this.name = name;
  this.age = age;
}
var yyqx = new Star('易烊千玺', 18)

类

在ES6中新增加了类的概念，可以使用class关键字声明一个类，之后以这个类来实例化对象。类抽象了对象的公共部分，它泛指某一大类，对象特指某一个，通过类实例化一个具体对象。

创建类

class name {
  //
}
var xxx = new name();

class Star {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
var yyqx = new Star('易烊千玺', 18);

类创建添加属性和方法

class Star {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sing(song) {
    console.log(this.name + '唱' + 'song');
}
var yyqx = new Star('易烊千玺', 18);
yyqx.sing('Nothing to Lose');

注意

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

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

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

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

       5.生成实力new不能省略

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

类的继承

// 父类
class Father{
}
// 子类继承父类
class Son extends Father{
}

// 父类
class Father{
  constructor(name){
    this.name = name;
  }
  say(){
    console.log('你的姓名是' + this.name);
  }
}
// 子类继承父类
class Son extends Father{
}
var yyqx = new Son('玊尔');

子类通过super关键字访问父类方法

// 父类
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);
  }
}
var he = new Son(3, 4);

注意

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

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

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

       4.时刻注意this的指向问题，类里面共有的属性和方法一定要加this使用

              1.constructor中的this指向的是new出来的实例对象

              2.自定义的方法，一般也指向的new出来的实例对象

              3.绑定事件之后this指向的就是触发事件的事件源

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