 <button>我是谁的按钮</button>
    <script>
      let that = null
      class Star {
        constructor(uname, age) {
            //以下这些数据都添加在实例里面了  方法不能直接使用 必须要用this指明使用 
          that = this  //将实例地址赋值给that
          this.uname = uname;
          this.age = age;
          this.btn = document.querySelector('button') //给实例对象添加获取一个按钮元素
          this.btn.addEventListener('click', this.sing)
        }
        sing() {
        //   console.log(this.uname);undefined  //this指向调用者 ，这里是btn调用 而btn没有uname
          console.log(that.uname);  //如果想用实例对象里的 就要用全局that保存this 
        }
        dance() {
          console.log(this.age);
        }
      }
      let ldh = new Star("刘德华", 18);  //刘德华拥有 大家都可以使用里面的方法和属性
      ldh.dance() //实例对象调用


    </script>

6.面向对象案例 tab栏动态添加标签页

先创建一个tab 类（最大的父盒子）
类里面获取所有要用的子元素，初始化（给所有子元素绑定点击事件）
写上所有功能需求的函数
补充完善里面的每一个功能函数

new Tab（'#tab'） //传对象

6.构造函数和原型

在ES6之前是没有类的概念的是通过构造函数创造一个对象

6.1 实例成员和静态成员

实例成员是通过this添加的，
静态成员是直接给构造函数本身添加的Star.sex = '男'
实例成员只能通过实例化的对象访问
静态成员只能通过构造函数来访问

6.2 构造函数存在浪费内存问题

ldh.sing=== zxy.sing //false 比较的是两个sing函数的地址地址不同

所以一些不变的方法（没有参数）可以放到原型对象上供大家使用，减少内存浪费

6.2.1 构造函数的原型 prototype

原型是什么？一个对象，我们称为prototype为原型对象
原型的作用？共享方法，避免开辟不必要的内存空间。
一般情况下，我们的公共属性定义到构造函数里面，公共的方法我们放到原型对象身上。

实例对象.sing() 可以调用

方法的查找规则：

首先看实例对象上是否有sing方法，如果有就执行这个对象上的sing方法，

如果没有，因为有_proto_的存在，就去构造函数的原型对象prototype身上查找sing这个方法

6.2.2 对象原型 _proto_

只要是对象，它就会有_proto_原型

这个属性开发中并不能直接使用，只是在内部给对象的查找提供了一个方向

对象原型等价于构造函数原型对象实例对象._proto_ === 构造函数.prototype

6.2.3构造函数 constructor

对象原型即构造函数原型对象里面都有一个属性： constructor属性指回构造函数本身

6.2.4 构造函数，实例，原型对象三者之间的关系

6.2.5 原型链

只要是对象就一定有_proto_属性，即原型，而原型是一个对象
每个函数都有一个prototype属性，函数通过prototype属性去原型链查找
对象通过原型链这条线路查找（内部查找）
ldh实例对象的原型是一个对象，而这个对象是Object的实例对象

是函数必定有prototype属性，有prototype属性，必定有原型链即有爸爸—爸爸的爸爸—null。
是对象必定有_proto_属性。[[prototype]]是_proto_的书面写法，不同的浏览器输出写法不同。
构造函数和普通函数既是函数，又是对象，所以他们两个属性都有，只是普通函数的这两个属性都指向同一个对象，
而构造函数是普通函数的实例，他的原型指向普通函数的原型对象。

6.2.6 JavaScript的成员查找机制（规则）

实例对象——爸爸——————————爸爸的爸爸——————null

内部查找是根据原型自动依次往上查找，即原型链

我无论在那一层添加了属性，它都能根据原型链找到这个属性

实例对象访问的东西要么来自本身，要么来自构造函数，要么来自原型链

外面想访问函数里的this，就需要用一个全局变量that将this存储起来

6.2.7 原型对象中this的指向

不管是构造函数里的this还是原型对象里的this，指向的都是调用者，也就是实例对象

6.2.8 原型对象的一个应用————扩展内置对象

通过原型对象，对原来的内置对象进行扩展自定义的方法。比如给数组添加自定义求偶数和功能

7.继承方法

7.1 利用ES6 类继承

class son extend Father { constructor(){} }

类中所有的方法都定义在prototype的属性上，所以类的继承也就同时继承了构造函数+原型对象

7.2 组合继承

ES6之前没有extends继承我们可以通过构造函数+ 原型对象模拟实现继承，被成为组合继承，

，需要两步，较为繁琐。

7.2.1 借用父构造函数实现继承

call（调用者，参数1，参数2，...）

Father.call() 改变Father的this指向

7.2.2 借用原型对象继承

利用父亲的实例的_proto_属性访问，别忘了利用construcor指回原来的构造函数

8.类的本质

class Star{}

类的本质是一个函数，是构造函数的另一种写法，构造函数有的它都有。

ES6 之前通过构造函数+原型实现面向对象编程

ES6 通过类实现面向对象编程是构造函数的语法糖

9.ES5 新增方法

9.1 ES5新增数组的方法

9.1.1 arr.forEach( function (value, index, array){})

回调函数的三个参数：每一个数组元素下标数组名

相当于增强版的for循环也就是 v-for （item，index）in array

9.1.2 filter

筛选出符合条件的value放入新数组中

value >= 20 得到的是布尔值，返回结果为true的成员组成新数组

9.1.3 some（）

是否有返回条件的数，有返回true

//false

查询符合条件的商品思想：fliter

封装一个遍历数组生成表格的函数fn，只需要传一个数组进去遍历就可以了。
先调用fn遍历一个数组的全部数据显示出来，
利用filter筛选选出符合条件的数存进新数组，清除所有数组后再调用fn遍历新数组

查询商品名思想：some （找到第一个立马跳出循环）适合用于查找数组中唯一的一个元素

if 符合条件就将这个 value push到新数组返回true跳出some循环
然后利用fn遍历新数组
forEach和 filter中的return不会跳出循环，会把所有元素遍历完，效率低

9.2 ES5新增字符串的方法

trim方法去除字符串两端的空格

会删除两边的不会删除中间的空格

应用场景：表单输入为空格时可以视为用户未输入内容

9.3 ES5新增对象方法

9.3.1Object.defineProperty方法 vue会用到

默认不可枚举，不可删除不可重新设置参数的值true或false，不可重写

delete obj.address ×

9.3.2 Object.keys()

获取对象的所有属性名

10.函数的进阶

10.1 函数定义方式三种

10.2 函数的调用方式

10.3 函数内部的this指向

另外 call apply bind 可以改变this指向

fn.call(调用者，参数1，参数2...)

主要应用：

继承父亲构造函数但没继承原型还是ES6的类好用

fn.apply(调用者，[参数]) 参数必须包含在数组(伪数组)里

主要应用：利用数学内置对象求最大最小值不过似乎用 Math.max(...arr)更好

Math.max.apply (Math,arr)

fn.bind(把this指向谁，参数1，参数2，...) 只改变this指向，不调用！

返回的是原函数改变this之后的新函数

主要应用：如果函数不需要立即调用，但又想改变这个函数内部的this指向此时用bind

另一个应用场景：

把构造器中的this作为参数传给方法使用

方法里的this还是可以指向想要的调用者

调用者是每一个li

call apply bind 总结

10.4 JS当中的严格模式 IE10+

开启严格模式

1.为脚本开启严格模式

2.为函数开启严格模式

严格模式下的语法规范

1. 变量规定

变量必须先声明，在使用（正常模式不声明则默认为全局变量）
不能删除已经声明的变量 delete x；语法是错误的

2. 严格模式下，this的指向问题

全局作用域下的this指向undefined ！！（正常模式下是window）
构造函数不加new调用，this会报错

定时器this还是指向window

3.函数变化

函数不能有重名参数 function (a,a){} ×
函数必须声明在顶层，且不允许在非函数的代码块声明函数 // 为了与新版本接轨

10.5 高阶函数，

callback&&callback（）意思是若callback存在就执行callback（）

1.回调函数是最后执行的，等函数里所有代码执行完之后才执行回调函数

2.闭包就是典型的高阶函数，将一个函数作为返回值。

10.6 闭包closure-------内部函数访问外部函数的局部变量

重点：被访问的函数才是闭包函数

闭包产生条件：

内部函数
访问外部函数的局部变量

在JS中闭包和异步是两大难点

实现闭包的两种方式：

1.内部函数访问外部函数的局部变量

2.外面的作用域访问函数内部的局部变量（这种方式需要return一个函数出去）

闭包的主要作用：延长了变量的作用范围和生命周期

闭包的应用———解决变量泄露的问题（循环，定时器等）

异步任务三种情况：

定时器中的回调函数
DOM事件中的回调函数
ajax中的回调函数

异步任务只有触发了，才会执行（如3秒之后，点击之后）

而for循环属于同步任务会立马执行，i已经加加完了才执行异步任务

而这时可以使用小闭包（立即执行函数）来存i值或者for用let 声明 i

应用1：点击li打印当前索引

这里不适合使用闭包

应用2： 3秒之后打印li的内容

应用2：计算打车价格

    <!-- 面向对象：闭包应用  计算打车价格
    用户输入公里数 计算打车价格 起步价13（3公里内） 之后每多一公里加5元  
    堵车的话另外收加10元   -->
      
    <script>
      // function fn (){}
      // fn()  我写一个函数需要调用才执行
      // 但立即执行函数不需要调用
      var car = (function () {     //这个匿名函数就是闭包
        var start = 13; //起步价
        var total = 0; //总价
        // 功能1：按公里计费
        return {
          // 立即执行函数返回一个装多个功能函数的对象
        //   外部调用就能使用函数内的变量了
          getTotal: function (n) {   //用户传进公里数   
            if (n <= 3) {
              total = start; //内部函数使用了外部变量  闭包
            } else {
              total = start + (n - 3) * 5;
            }
            return total;
          },
          // 功能2： 拥堵之后的费用
          yd: function (flag) {
            return flag ? total + 10 : total;
          },
        };
      })();
      //巧妙之处就在于：立即执行函数 无需小括号调用 否则普通函数需要car().yd()才能调用
      car.getTotal(5); //car返回的是一个对象，直接点调用里面的函数
      car.yd()
    </script>

闭包考题

思考题1：

思考题2：

闭包总结

10.7 递归（函数内部自己调用自己）求数学题！

超出了栈的最大容量，会报错

10.7.1 利用递归求阶乘

核心思路：

不管是求1~n之间的阶乘，还是求1~n之间的累加和，都是用前一项n ×或+ 后一项，只不过后一项是通过递归不断调用求得fn(n-1)。

我×我自己减1 我再×我自己减1....每一个我都是减一后的我直到我符合条件终止递归

10.7.2 利用递归求斐波那契数列（每次调用返回的最终都是1累加起来的结果）

10.7.3 利用递归遍历数据 ！！（这里不需要终止条件，直接利用条件判断是否需要执行递归）

  var data = [
        {
          id: 1,
          name: "家电",
          goods: [
            {
              id: 11,
              gname: "冰箱",
              goods: [{ id: 111, ggname: "海尔" }],
            },
            {
              id: 12,
              gname: "洗衣机",
            },
          ],
        },
        {
          id: 2,
          name: "服饰",
        },
      ];
      //   console.log(data);
      //   用forEach遍历数组里的每一项item
      function getId(arr, id) {
        var o = {};
        arr.forEach(function (item) {
          //第一层 有这个id的话就返回
          if (item.id === id) {
            // console.log(item);
            o = item;
          }
          //第一层没有的话就去第二层找
          //里面有goods这个数组且长度不为0
          else if (item.goods && item.goods.length > 0) {
            o = getId(item.goods, id);
            //得到的o只是return给了当前这个getId函数，最外层没有接受到o值，需要o接收
          }
        });
        return o; //把最终的值return出去使用
      }
      console.log(getId(data, 111));