学js的第15天

day15 面向对象

• 节流

  function throttle(fun, wait) {
      var timer;  //开   timer=undefined
      return function () {
          if (!timer) { //判断timer是否有值（当前是否已经开启了定时器） ，
              timer = setTimeout(function () { //关
                  fun();
                  timer = undefined; //开
              }, wait)
          }
      }     
  }

• 防抖和节流的区别

  • 防抖：高频率触发事件，只执行一次

  • 节流：高频率触发事件，按一定的频率执行，隔一会执行一次

2.面向对象

2.1 概念

• 编程模式

  面向过程：面向对象：

• ==面向对象的特征==：

  • 封装

  • 继承

  • 多态

• 类（对象）：一种大范围的抽象的对象

• 实例对象：具体的对象

• ==对象的组成==：

  • 属性：静态的，名词性 ------ var

  • 方法：动态的，行为，作用----function

2.2 面向对象的创建方式

2.2.1 字面量创建

• 创建方式

  //1.字面量创建
  var obj1 = {
      //属性
      "name":"如花",
      "age":18,
      "sex":"男",
      //方法
      "skill":function(){
          console.log("抠脚");
      }
  }
  console.log(obj1);
  //问题：代码冗余，适合创建单个对象

• 问题：代码冗余，适合创建单个对象

2.2.2 实例创建

• 创建方式

  //1.实例实例（单例）
  var obj1 = new Object();  //创建一个空对象
  //添加属性
  obj1.name = "连海龙";
  obj1.sex = "男",
      //添加方法
      obj1.skill = function(){
      console.log("玩游戏");
  }
  console.log(obj1);
  //问题：代码冗余，适合创建单个对象

• 问题：代码冗余，适合创建单个对象

2.2.3 工厂模式创建

• 创建方式

  //1.工厂模式创建（封装）
  function createObj(name,age,height){
      //创建对象
      var obj = new Object();
      //添加属性
      obj.name = name;
      obj.age = age;
      obj.height = height;
      //添加方法
      obj.skill = function(){
          console.log("有钱");
      }
      //返回创建好的对象
      return obj;
  }
  ​
  ​
  //实例化对象
  var obj1 = createObj("吴亦凡",65,179);
  console.log(obj1);

• 问题：解决代码冗余的问题，识别不明

  var obj2 = createObj("蔡徐坤",30,182);
  console.log(obj2);
  ​
  var obj3 = createObj("旺财",2,30);
  console.log(obj3);
  ​
  //问题：解决代码冗余的问题，识别不明，无法判断对象的类型
  console.log(typeof obj2,typeof obj3); //object object
  console.log(obj3 instanceof Object); //true 判断实例对象是否由 后面的这个对象创建

2.2.4 ==构造函数创建==

• 创建方式

  1.构造函数名首字母大写（为了区分普通函数）

  2.不需要自己创建对象，不需要返回，直接在this上添加属性和方法即可

  3.构造函数调用前面一定要加new，不加就跟普通函数一样

  //1.声明构造函数
  function Student(name, age, sex) {
      //1.隐式的创建了一个空对象，让this指向这个空对象
      //this = new Object();
  ​
      //2.执行构造函数中代码（添加属性和方法）
      //添加属性
      this.name = name;
      this.age = age;
      this.sex = sex;
      //添加方法
      this.study = function () {
          console.log("good good study,day day up!!!,好好学习，天天自闭");
      }
  ​
      //4.隐式的返回创建好的对象
      //return this
  }
  ​
  var s2 = new Student("曾庆文",18,"女");
  console.log(s2); // {name: "曾庆文", age: 18, sex: "女", study: ƒ}
  console.log(s2 instanceof Student); //true

• 问题：解决可以识别问题，浪费内存

  //2.实例化对象
  var s1 = new Student("李华",10,"男"); 
  var s2 = new Student("曾庆文",18,"女");
  ​
  //问题：解决了识别不明的问题，浪费内存
  console.log(s1.study == s2.study);//false  比较的是地址

• ==new操作符的作用==

  1.隐式的创建了一个空对象，让this指向这个空对象
  2.执行构造函数中代码（添加属性和方法）
  3.让创建的实例对象的__proto__指向构造函数的prototype
  4.隐式的返回创建好的对象

2.2.5 ==原型创建==

1) 原型对象与原型属性

• prototype：原型对象，函数在声明的时候自动创建的一块存储区域，用于存储公共的共享属性和方

• __ __proto__: 原型属性，每一个实例对象在创建的时候都会有一个原型属性__proto__,指向构造函数的prototype

  //1.prototype：原型对象，函数在声明的时候自动创建的一块存储区域，用于存储公共的共享属性和方法
  function sum(){}
  console.dir(sum);
  console.dir(Array);
  ​
  //2.获取原型对象  Array
  console.log(Array.prototype);
  ​
  //3. __proto__: 原型属性，每一个实例对象在创建的时候都会有一个原型属性__proto__,指向构造函数的prototype
  var arr = new Array(1,2);
  console.log(arr.__proto__); 
  console.log(Array.prototype === arr.__proto__); //true

2) 原型创建对象

• 创建

  //1.声明构造函数
  function Student(){};
  ​
  //2.在原型上添加属性和方法
  Student.prototype.name = "李华";
  Student.prototype.school = "中公";
  Student.prototype.study = function(){
      console.log("失眠、自闭、掉头发");
  }
  ​
  //3.实例化对象
  var s1 = new Student();
  console.log(s1);
  //原型链：查找机制，先找实例本身，再找实例的__proto__(构造函数的prototype)
  console.log(s1.name);

• 问题：解决内存浪费问题，不能传参

  //问题：解决内存浪费的问题，不能传参
  var s2 = new Student();
  console.log(s1.study == s2.study); //true
  console.log(s2.name);

2.2.6 ==混合创建==

• 混合创建：构造函数(可变）+原型（固定的，公共的，共享的）

  //1.声明构造函数（可变）
  function Student(name,age,sex,skill){
      this.name = name;
      this.age = age;
      this.sex = sex;
      this.skill = function(){
          console.log(skill);
      }
  }
  ​
  //2.原型中添加属性和方法
  Student.prototype.school = "中公";
  Student.prototype.study = function(){
      console.log("程序员，敲代码，学习");
  }
  ​
  //3.实例化对象
  var s1 = new Student("曾庆文",18,"女","篮球，rap");
  console.log(s1);

• 问题：破坏的封装性

2.2.7 动态混合创建

• 创建

  //1.声明构造函数（可变）
  function Student(name, age, sex, skill) {
      this.name = name;
      this.age = age;
      this.sex = sex;
      this.skill = function () {
          console.log(skill);
      }
  ​
      if (typeof this.study != "function") {
          //2.原型中添加属性和方法
          Student.prototype.school = "中公";
          Student.prototype.study = function () {
              console.log("程序员，敲代码，学习");
          }
      }
  }

2.3 面向对象实例

• 实例实现步骤

  • 先声明构造函数，new一个实例对象

  • 确定属性：（var声明的变量，并且会在其他位置使用的变量）

  • 确定方法：function 里面的都是方法，动态的都是方法

    //1.声明构造函数
    function TabSwitch(id) {
        //2.添加属性 （var声明的变量，并且会在其他位置使用的变量）
        this.oBox = document.getElementById(id);
        this.oBtns = this.oBox.getElementsByTagName("button");
        this.oDivs = this.oBox.getElementsByTagName("div");
        var that = this; //先存储一个指向正确的this
        //3.添加方法(入口方法)
        this.init = function () {
            for (var i = 0; i < this.oBtns.length; i++) {
                this.oBtns[i].index = i;
                this.oBtns[i].onclick = function () {
                    that.change(this.index); //事件处理函数中的this---触发事件的对象
                }
            }
        }
        //入口方法自己调用
        this.init();
        //4.切换div的方法
        this.change = function (index) {
            for (var j = 0; j < this.oDivs.length; j++) {
                this.oDivs[j].style.display = "none";
            }
            this.oDivs[index].style.display = "block";
        }
    }

2.4 面向的继承方式