js继承，原型，原型链

###构造函数和普通函数的区别
构造函数一般是首字母大写，普通函数遵照小驼峰式命名法。

构造函数：

 1. new fn( )
     2 .构造函数内部会创建一个新的对象，即f的实例
     3. 函数内部的this指向 新创建的f的实例
     4. 默认的返回值是f的实例

普通函数：

1. fn( )
     2. 在调用函数的内部不会创建新的对象
     3. 函数内部的this指向调用函数的对象（如果没有对象调用，默认是window）
     4. 返回值由return语句决定

面向对象

 封装   继承  多态 

构造函数 生成对象时的初始化属性的方法 对象 对象 = new 类 var arr =
new Array() arr.push() 静态方法 不用new出实例 直接调用的方法 Array.of()
Array.from() 静态属性 不用new出实例 只能访问的属性

原型

JavaScript 的所有对象中都包含了一个 [proto] 内部属性，这个属性所对应的就是自身的原型 JavaScript
的函数对象，除了原型 [proto] 之外，还有 prototype 属性，当函数对象作为构造函数创建实例时， 该 prototype
属性值将被作为实例对象的原型。

原型链

当一个对象调用自身不存在的属性/方法时，就会去自己 [proto] 关联的前辈 prototype 对象上去找，
如果没找到，就会去该 prototype 原型 [proto] 关联的前辈 prototype 去找。依次类推，直到找到属性/方法或 undefined 为止。
从而形成了所谓的“原型链”。

描述一下原型链

实例化对象的__proto__指向构造函数的prototype
构造函数prototype的__proto__指向Object.prototype
Object.prototype的__proto__指向null

原型链继承

##原理 利用原型让一个引用类型继承另一个引用类型的属性和方法。
#优点 简单，易理解
#缺点
1.通过原型来实现继承时，原型会变成另一个类型的实例，原先的实例属性变成了现在的原型属性， 该原型的引用类型属性会被所有的实例共享。
2.在创建子类型的实例时，没有办法在不影响所有对象实例的情况下给超类型的构造函数中传递参数。

###使用构造函数继承

 function  Animal(name,sex){                 
                 this.name = name
                 this.sex = sex;
                 this.like = []
      }
      Animal.prototype.eat = function(){
           console.log(this.name + "11")
      }
      function Dog(age,name,sex){
            this.age = age
            Animal.call(this,name,sex) 
      }
      var d1 = new Dog(3,"aaaa","nan") //like:'吃肉’
      var d2 = new Dog(4,"bbbbbb","nan") // like:[]
      d1.like.push("吃肉")
      console.log(d1,d2)

原理

在子类型的构造函数中调用超类型构造函数。

优点:

  1.可以向超类传递参数
  2.解决了原型中包含引用类型值被所有实例共享的问题

#3缺点:
方法都在构造函数中定义，函数复用无从谈起，
超类型原型中定义的方法对于子类型而言都是不可见的。
###组合继承(原型链 + 借用构造函数)

function Animal(name, sex) {
            this.name = name
            this.sex = sex;
            this.like = []
        }
        Animal.prototype.eat = function () {
            console.log(this.name + "11")
        }
        function Dog(age, name, sex) {
            this.age = age
            Animal.call(this, name, sex)
        }
        Dog.prototype = new Animal();
        var d1 = new Dog(3, "aaaa", "男")  // name:'aaaa' sex:男 like：'骨头'
        var d2 = new Dog(4, "bbbb", "女")  // name:'bbbb' sex:'女' like：[]
        d1.like.push("骨头")
        console.log(d1, d2)

原理

  将原型链和借用构造函数技术组合到一块，使用原型链实现对原型属性和方法的继承，
  通过借用构造函数来实现对实例属性的继承，既通过在原型上定义方法来实现了函数复用，
  又保证了每个实例都有自己的属性。

优点:

  可以向超类传递参数
  每个实例都有自己的属性
  实现了函数复用

缺点:

无论什么情况下，都会调用两次超类型构造函数： 一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。

##原型式继承

function object(obj){
      function f(){}
      f.prototype=obj;
      return new f()
}
var Person = {
    name: 'Default Name',
    like:['小阿狗'，'大饭店']
}
var person1=Object.create(person)
person1.name='jack'
person1.like.push('mmm')
var person2=Object.create(person) //俩参数 参数1：新对象原型的对象 参数

2：新对象定义额外属性的对象
person1.name=‘tom’
person1.like.push(‘ddd’)
console.log(person.like) [‘小阿狗’，‘大饭店’,‘mmm’,‘ddd’]
console.log(person1.like) [‘小阿狗’，‘大饭店’,‘mmm’,‘ddd’]
#3#原理
用一个函数包装一个对象，然后返回函数的调用，这个函数就变成了可以随意添加属性的实力 或对象
##缺点
所有的实例都会继承原型上的属性
无法实现函数复用
###class继承
es5实质是先创造子类的实例对象this,再将父类的方法添加到this上面.
es6实质是先将父类实例对象的属性和方法，添加到this上面，通过super调用父类的构造方法
在用子类的构造函数修改this

 class Like{
        constructor(like){
            this.like=like
        }
    }
    class Person extends Like{
        constructor(name,age,sex,like){
            super(like)
            this.name=name
            this.age=age
            this.sex=sex
        }
    }
    let p=new Person('小不点',15,'女','喝酒')
    console.log(p)

ajax的同步和异步

• 同步 就是阻塞的状态
  - 张三叫李四一起去吃饭 = 浏览器请求服务器，直到服务器返回数据才显示页面，也就是在同一线程执行

• 异步 非阻塞的状态
  - 张三叫李四吃饭，只是叫了一声，但是没有等他一块去吃饭 = 浏览器请求服务器信息，发送完请求后，浏览器接着去做自己的事情，比如显示页面，服务器返回数据以后通知浏览器，浏览器再去渲染页面数据，局部更新

• jquery中ajax接口中async属性表示同步异步，true为异步，false就是同步，默认为true，也就是异步操作

##我们给大家演示一个文本框搜索的案例，使用jquery封装的ajax接口实现

       <style>
       * {
           padding: 0;
           margin: 0;
           list-style: none;
       }
       .container {
           width: 500px;
           margin: 80px auto;
       }
       .container>.inp {
           width: 100%;
           height: 30px;
           border-radius: 3px;
           border: #dddddd 1px solid;
       }
       .container>ul {
           width: 100%;
           background-color: #F0F0F0;
           margin-top: 3px;
       }

       .container>ul>li {
           width: 100%;
           height: 50px;
           line-height: 50px;
           font-size: 14px;
           text-indent: 20px;
       }
       .container>ul>li:hover{
           color: #A00000;
       }
       </style>

  <div class="container">
          <input type="text" class="inp" placeholder="输入内容">
          <ul id="list">
              
          </ul>
  </div>

  $(".inp").bind("input",function () {
      var arr = [];
      $.ajax({
          url: "http://yang.happyknowshare.cn/api/products",
          type: "get",
          async: true,
          dataType: "json",
          success: (res) => {
              if(res.status == 200){
                  var data = res.data;
                  //过滤搜索函数
                  arr = data.filter((item,index)=>{
                      if(item.store_name.indexOf($(this).val()) > -1){
                          return true;
                      }
                  }) 
              }                   
              var html = ""
              for(let val of arr){
                  html += `<li>${val.store_name.slice(0,20)}</li>`;
              }
              $("#list").html(html);
          },
          error: (error) => {
          }
      })
  })