javascript面向对象思想

一、什么是面向对象

• 什么是对象

  • 生活中有很多对象

  • 手机：手机有自己的颜色、可以打电话、听音乐等，我们并不知道手机内部的工作原理，

  • 在我们不了解某个东西内部原理的情况下，就能使用，这就是面向对象的思想

二、面向对象的思想

• 抽象

  • 员工管理系统

  • 抽取自己需要的特征的过程就是抽象

• 封装

  • 可以将封装理解为：看不到内部的东西，用好表面的功能就可以了

• 继承

• 多态

• JavaScript是面向对象的弱语言

  • js中只有对象，没有类，其面向对象的思想是基于对象实现的

  • 在js中，一切皆对象

三、面向过程和面向对象的理解

• 案例：把大象装进冰箱

  • 面向对象的编程方式：

    • 冰箱.开门()

    • 冰箱.装进(大象)

    • 冰箱.关门()

  • 面向过程的编程方式：

    • 开门(冰箱)

    • 装进(冰箱,大象)

    • 关门(冰箱)

• 面向过程以动词为主，完成一个事件就是把不同的函数按照顺序调用

• 面向对象以主语为主，将主语看成一个一个的对象，对象有自己的属性和方法

四、类和对象

//属性：某类事物拥有的静态的东西，比如人的姓名、性别
let a = 12;//变量，自由的变量，不属于任何对象
let arr = [1, 2, 3, 4, 5];
arr.a = 12 ;//我们可以给数组添加一个属性，这个属性不是自由的，是属于数组的
console.log(arr.a);//其实属性和变量是一个东西
​
//方法：某类事物能干什么（动作、功能、行为）
function show() {//自由的，不属于谁
    console.log("hello")
}
//调用
show();
//给数组添加方法
arr.show = function () {// 方法，属于arr这个对象的行为
    console.log(arr.a);
}
arr.show();

五、this的本质

• this：this用在方法中，这个方法属于谁，this就是谁

• 全局函数或全局变量属于window对象

六、JavaScript中的数据类型

• 任何一个JavaScript的标识、变量、常量和参数都是number、string、boolean、undefined、object、function类型中的一种，也就是typeof返回的类型

七、第一个面向对象的程序

• 为对象添加属性和方法

  • 原则：不能在系统对象中随意添加属性和方法，否则会覆盖已有的，同时也不灵活

• Object：

  • 之前接触过很多对象：

    • 比如Date、Array，这些对象都有自己特有的功能

  • Object是一个空白对象，没有功能，所以实现面向对象思想时，多用它

    let obj = new Object();//创建一个空白对象
    obj.name = "刘备";//给对象添加属性
    obj.tel = "12345678901";
    obj.showName = function () {//给对象添加方法
        console.log("我的姓名是：" + this.name);
    }
    obj.showTel = function () {
        console.log("手机号是：" + this.tel);
    }
    ​
    let tel = new Object();
    tel.trademark = "华为";
    tel.color = "白色";
    tel.call = function () {
        console.log("手机拨打电话....")
    };
    tel.showTrade = function () {
        console.log("手机的品牌是：" + this.trademark)
    }
    tel.showTrade();
    tel.call()
    //调用方法
    obj.showName();
    obj.showTel();

八、利用构造函数创造对象

//创建一个方法，专门用来创建对象
function createUser(name,tel) {
    let obj = new Object();
    obj.name = name;
    obj.tel = tel;
    obj.showName = function () {
        console.log("姓名是：" + this.name);
    };
    obj.showTel = function () {
        console.log("手机号是：" + this.tel);
    };
    return obj;
}
​
//创建了一个对象
let obj1 = createUser("刘备","123");
obj1.showName();
obj1.showTel();
//创建第二个对象
let obj2 = createUser("关羽","234");
obj2.showName();
obj2.showTel();

• 用来创建对象的函数，称为构造函数

九、工厂模式

• 什么是工厂：

  • 批量生产东西的地方

  • 生产一个东西的步骤

    • 原料

    • 加工

    • 出厂

/

/创建一个方法，专门用来创建对象
//利用构造方法创建对象的方式类似工厂的生产过程，所以称为工厂模式
function createUser(name,tel) {
    //1.创建空白对象就是原料
    let obj = new Object();
    //2.添加属性和方法就是加工
    obj.name = name;
    obj.tel = tel;
    obj.showName = function () {
        console.log("姓名是：" + this.name);
    };
    obj.showTel = function () {
        console.log("手机号是：" + this.tel);
    };
    //3.返回加工好的对象就是出厂
    return obj;
}

• 用this和new改造代码

  //创建一个方法，专门用来创建对象
  //利用构造方法创建对象的方式类似工厂的生产过程，所以称为工厂模式
  //构造方法要求首字母大写，通过new调用
  function CreateUser(name,tel) {
      //1.系统会偷偷的帮我们创建一个交this的空对象
      //let this = new Object();
      //2.添加属性和方法就是加工
      this.name = name;
      this.tel = tel;
      this.showName = function () {
          console.log("姓名是：" + this.name);
      };
      this.showTel = function () {
          console.log("手机号是：" + this.tel);
      };
      //3.系统会偷偷的帮我们将this返回出去
      //return this;
  }
  ​
  //创建了一个对象
  let obj1 = new CreateUser("刘备","123");
  obj1.showName();
  obj1.showTel();
  //创建第二个对象
  let obj2 = new CreateUser("关羽","234");
  obj2.showName();
  obj2.showTel();

十、原型

• 之前创建对象的方式，存在函数重复，资源浪费的现象

• alert(obj1.showName == obj2.showName) //false

  • 说明内存中存放了两个这样的函数，如果创建了1000个对象，这样的代码重复1000份，资源浪费严重

• 利用原型解决这个问题

  function CreateUser(name,tel) {
      //构造方法中给属性赋值
      this.name = name;
      this.tel = tel;
  }
  CreateUser.prototype.showName = function () {
      console.log("姓名是：" + this.name);
  };
  CreateUser.prototype.showTel = function () {
      console.log("手机号是：" + this.tel);
  }
  ​
  //创建了一个对象
  let obj1 = new CreateUser("刘备","123");
  obj1.showName();
  obj1.showTel();
  //创建第二个对象
  let obj2 = new CreateUser("关羽","234");
  obj2.showName();
  obj2.showTel();
  //所有对象的原型只有一份，利用原型：在构造方法中写属性，给原型添加方法
  alert(obj1.showName == obj2.showName)//true
  //new Array()
  let arr1 = [1, 2, 3, 4 ,5];
  let arr2 = [2, 4, 6, 8, 10];
  //给arr1添加了一个求和的方法
  /*arr1.sum = function () {
      let num = 0;
      for (let i = 0; i < this.length; i++) {
          num += this[i];
      }
      return num;
  };*/
  //利用原型给数组添加一个求和的方法，所有的数组对象都可以使用
  Array.prototype.sum = function () {
      let num = 0;
      for (let i = 0; i < this.length; i++) {
          num += this[i];
      }
      return num;
  };
  console.log(arr1.sum());
  console.log(arr2.sum());