1、JavaScript面向对象

• 面向对象三大特性
  • 封装性
    • 把功能封装好
  • 继承性
  • 多态性
• 面型对象优缺点
  • 易维护、可重用、可拓展、灵活性高
  • 性能不如面向过程

2、ES6中的类和对象

• 类：抽象

  • 类模拟抽象的，泛指的，对象是具体的

• 对象：具体

  • 类中的具体的某个实例【属性和方法的集合体】
  • 对象是由属性和方法组成的
    • 属性：事物的特征，在对象中用属性来表示（常用名词）
    • 方法：事物的行为，在对象中用方法来表示（常用动词）

3、面向对象的思维特点:

• 抽取（抽象）对象共用的属性和方法组织(封装)成一个类(模板)
• 对类进行实例化, 获取类的对象

4、类class

在ES6中新增加了类的概念，可以使用class关键字声明一个类，之后以这个类来实例化对象。【构造函数实例化对象】

• 类抽象了对象的公共部分，它泛指某一大类（class）

• 创建类

  语法：class 类名 {}【构造函数语法】
  
  注意类名首字母大写
  
  类要抽取公共属性方法，定义一个类

  class Star {
  };
  //类就是构造函数的语法
  var zs = new Star();

• 类constructor构造函数

  class Star {
    constructor (uname,age){
        this.uname = uname;
        this.age = age;
    }
  }

  • 注意：

    • 类里面的方法不带function，直接写即可

    • 类里面要有属性方法，属性方法要放到类里面，我们用constructor构造器

    • 构造函数作用：接收参数，返回实例对象，

    • new的时候主动执行，主要放一些公共的属性

• constructor() 方法是类的构造函数(默认方法)，用于传递参数,返回实例对象，通过new命令生成对象实例时，自动调用该方法。

• 注意：每个类里面一定有构造函数，如果没有显示定义, 类内部会自动给我们创建一个constructor()

• 注意：this代表当前实力化对象，谁new就代表谁

5、类添加方法

• 语法：注意方法和方法之间不能加逗号

  class Star {
  
    constructor () {}
  
    sing () {}
  
    tiao () {}
  
  }

  //注意：类中定义属性，调用方法都得用this
  
  class 类名 { constructor(){}   方法名(){} }

• 总结：类有对象的公共属性和方法，用class创建，class里面包含constructor和方法，我们把公共属性放到constructor里面，把公共方法直接往后写既可，但是注意不要加逗号

6、类的继承

• extends

  语法：
  
  ? class Father {}
  
  ? class Son extends Father{}
  
  //注意：是子类继承父类

• super关键字

  • 我们应用的过程中会遇到父类子类都有的属性，此时，没必要再写一次，可以直接调用父类的方法就可以了

  • super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数

  • 当子类没有constructor的时候可以随意用父类的，但是如果子类也含有的话，constructor会返回实例，this的指向不同，不可以再直接使用父类的东西

• 调用父类构造函数

  class F { constructor(name, age){} }
  
  class S extends F { constructor (name, age) { super(name,age); } }
  
  //注意: 子类在构造函数中使用super, 必须放到this 前面(必须先调用父类的构造方法,在使用子类构造方法)

• 调用父类普通函数

  class F {
    constructor(name, age){}
    say () {}
  }
  
  class S extends F {
    constructor (name, age) {
      super(name,age);
    }
    say ()
    { super.say() }
  }
  
  //注意：如果子类也有相同的方法，优先指向子类，就近原则

• 总结：super调用父类的属性和方法，那么查找属性和方法使用就近原则

7、三个注意点

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

• 类里面的共有属性和方法一定要加this使用.【this，对象调用属性和方法】

• 类里面的this指向问题.

• constructor 里面的this指向实例对象, 方法里面的this 指向这个方法的调用者

  class Button {
  17.
    constructor () {
        var btn = document.querySelector('input');
        btn.onclick = this.cli;
    }
  
    cli () {
        console.log('点击了');
    }
  
  }
  
  var anniu = new Button();
  

8、类里面的this指向

• 构造函数的this指向实例对象
• 普通函数的this是调用者，谁调用this是谁

    <input type="button" value="点击">
    var that;
        class F {
            constructor (name, age) {
                this.name = name;
                this.age = age;
                // console.log(this);
                that = this;
                this.btn = document.querySelector('input');
                this.btn.onclick = this.cli;
            }
  
            cli () {
                console.log(this);
            }
  
            say () {
                console.log(this);
            }
        }
  
        var obj = new F('刘德华',22);
  

this指向

• 构造函数里this指向实例对象
• 方法里this指向调用者
  • 不调用时候this指向原型对象
  • 调用时候指向调用者

原文地址：https://www.cnblogs.com/itxcr/p/11600072.html