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();
    1. 自定义构造函数创建
      构造函数:不与 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)

你可能感兴趣的