Javascript——面向对象

• 了解面向对象

  • 面向对象是对面向过程的高度封装（高内聚低耦合）
  • 在开发过程中，我们需要完成某一个功能时，但是 JS 没有能够完成这项功能的对象，我们创建一个可完成这项功能的对象
  • 创建的对象是一个 有属性 、有方法、并且合理的

• 一种面向对象语言需要向开发者提供四种基本能力

  1. 封装 - 把相关的信息（无论数据或方法）存储在对象中的能力
  2. 聚集 - 把一个对象存储在另一个对象内的能力
  3. 继承 - 由另一个类（或多个类）得来类的属性和方法的能力
  4. 多态 - 编写能以多种方法运行的函数或方法的能力

• 创建对象的方式

  1. 字面量创建：var obj = {}
  2. 内置构造函数创：var obj new Object()
  3. 工厂函数创建：自己书写工厂函数，使用自己书写的工厂函数进行创建对象

  // 创建工厂函数
  function createPerson(name, age){
    // 手动创建一个对象
    var person = new Object();           
    // 手动向对象添加成员
    person.name = name;
    person.age = age;          
    // 创建方法
    person.showName = function(){
        alert("姓名："+this.name);
    }
    person.showAge = function(){
        alert("年龄："+this.age);
    }
    // 返回添加成员和方法的对象
    return person;
  }
  //创建两个对象
  var p1 = createPerson("jiangzhou", 22);
  var p2 = createPerson("tom", 20);
  
  //调用对象方法
  p1.showName();
  p1.showAge();       
  p2.showName();
  p2.showAge();

  4. 自定义构造函数创建
     构造函数：不与 new 连用时就是一个普通函数，当与 new 连用时，就具备了构造能力，构造函数里的 this 指向实例对象（创建对象时的那个变量）
     自己书写一个构造函数，使用自定义的构造函数创建一个对象

  function createObj(name,age){
    // 会自动进行创建一个对象
  
    // 手动添加成员
    this.namee=name // this 指向当前创建对象的变量
    this.age=age    // this 指向当前创建对象的变量
    // 创建方法
    this.showName = function(){
        alert("姓名："+this.name);
    }
    this.showAge = function(){
        alert("年龄："+this.age);
    }
    // 自动返回对象
  }
  let obj=new createObj('Jack', 18)
  //调用对象方法
  p1.showName();
  p1.showAge();       
  p2.showName();
  p2.showAge();

• 构造函数的书写与使用规范

  • 明确这是一个构造函数，而不是普通函数，构造函数在调用时需要与 new 连用

  • 构造函数的目的就是为了创建一个 有属性 有方法 合理的 对象
    注意事项：

    1. 如果调用时没有使用 new 关键字，无法创建一个对象
    2. 如果构造函数内书写了 return 关键字，返回的是基本数据类型，return 无效，如果返回的是复杂数据类型，构造函数无效
    3. 构造函数在调用时，如果不需要传参，可以省略后面小括号（一般建议不省略）
    4. 构造函数命名一般为首字母大写（用于区分普通函数）
    5. 构造函数与 new 关键字连用时，会创造一个对象，这个对象叫做实例对象；创建对象的过程叫做实例化的过程；构造函数体内的 this 指向当前实例对象（本次创建对象的那个变量

  function Person(name){
    this.name = name
  }
  /*
  在 new 的时候，Person 会创造一个对象，并将对象赋值给变量 p ，这个 变量 p 
  叫做 Person 的实例化对象，在本次调用中，Person内部 this 指向变量 p
  */
  let p = new Person('张山')

• 判断构造函数是否合理

  当在构造函数内部书写一个方法的时候，每次创建一个实例化对象，这个方法都需要开辟一段空间，这样会造成空间浪费，这个构造函数是的不合理

• 解决构造函数的不合理

  利用prototype__proto__对象访问机制解决构造函数的不合理：

  1. 属性直接写在 构造函数体内
  2. 方法写在 构造函数的 prototype 上

  function Person(name,age){
    // 将属性写在构造函数体内
    this.name = name
    this.age = age
  }
  // 将方法写在 prototype 上
  Person.prototype.sayHi=function(){
    console.log('hello')
  }

• 了解构造函数中的 this指向

  因为是与 new 连用，this 指向当前实例；在调用构造函数的方法时，需要依靠实例对象调用，所以 this 还是指向当前实例

• ES6 类语法定义构造函数

  使用 class 关键字定义构造函数，定义后就是一个类，将不能当作普通函数使用，只能通过 new 得到一个对象

  class 类名{
    // 构造器
    constructor(形参){
        // 书写属性
        this.属性名=属性值
    }
    // 在原型上书写一个方法
    函数名(形参){ 执行代码 }
  }

• 小例子：

  class Person{
    constructor(name,age){
        // 定义书写属性，this指向实例化对象
        this.name=name,
        this.age=age
        // 调用方法
        this.init()
    }
    init(){
        console.log(this)
    }
  }
  let o=new Person('Jack',18)
  // 通过实例进行调用方法
  o.init()
  console.log(o)