JavaScript面向对象

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指向调用者