js基础-21.继承原型方法方法调用遍历方法：原型上的方法hasOwnProperty不会查找 1.原型继承【实例

1.继承

    function Animal(name) {
            this.name = name || 'Animal';
            // 实例方法
            this.sleep = function () {
                console.log(this.name + '正在睡觉');
            }
        }

原型方法

         Animal.prototype.eat = function (food) {
            console.log(this.name + '正在吃' + food);
        }

方法调用

       
        const dog = new Animal('小白');
        console.log(dog);

遍历方法：原型上的方法hasOwnProperty不会查找

    for (const key in dog) {
            //    hasOwnProperty表示是否有自己的属性。这个方法会查找一个对象是否有某个属性，但是不会去查找它的原型链。
            dog.hasOwnProperty(key) && console.log('key=>', key);
        }

1.原型继承【实例的方法和原型的方法都可以被继承】

function Cat() {}
        Cat.prototype = new Animal();
        Cat.prototype.name = '咪咪';
        let cat = new Cat();
        cat.eat('🐟');
        cat.sleep();
        console.log(cat);

2.构造继承

优点：

解决了原型链中，子类实例共享父类属性的问题
创建子类实列时，可以向父类传递参数
可以实现多继承（call多个父类对象） 缺点：只能继承父类的实例方法和属性，不能继承原型属性和方法

        function Cat(name) {
             Animal.call(this);
             this.name = name || '咪咪';
         }
         let cat = new Cat();
         console.log('cat',cat)
        //  cat.eat('🐟');// 报错：不能继承原型上的属性和方法
         cat.sleep();

3.实例继承

        function Cat(name) {
             var instance = new Animal();
             instance.name = name || 'Tom';
             return instance;
         }
          let cat = new Cat();
          console.log('cat3',cat)
          cat.eat('🐟');
          cat.sleep();

4.拷贝继承

       function Cat(name){
            var animal = new Animal()
            for(let p in animal){
                Cat.prototype[p] = animal[p];
            }
            this.name = name || 'Tom';
        }
        let cat = new Cat();
        console.log('cat4',cat)
        cat.eat('🐟');
        cat.sleep();

5.组合继承

缺点：调用了两次父类构造属性，生成了两份实例

        function Cat(name) {
            Animal.call(this)
            this.name = name || '哆啦';
        }
        Cat.prototype = new Animal();
        Cat.prototype.constructor = Cat;
        let cat = new Cat();
        console.log('cat5',cat)
        cat.eat('🐟');
        cat.sleep();

6.寄生继承

优点:完美 缺点:实现比较复杂

        function Cat(name) {
             Animal.call(this);
             this.name = name || '哆啦';
         }
         // 创造一个没有实例方法的类
         var Super = function () {}
         Super.prototype = Animal.prototype;
         // 将实例作为子类的原型
         Cat.prototype = new Super();
         let cat = new Cat();
         console.log('cat6', cat)
         cat.eat('🐟');
         cat.sleep();

2.Class类

Class 的基本语法

1.Class类可以看作是构造函数的语法糖

    class Point{}
    console.log(typeof Point) //"function"
    console.log(Point === Point.prototype.constructor); // true

2.class类中定义的方法，都是定义在构造函数的原型上

      class Point {
        constructor() {}
        toString() {}
      }
      console.log(Point);

3.使用static关键字，作为静态方法（静态方法，只能通过类调用，实例不能调用）

class Foo {
  static classMethod() {
    return "hello";
  }
}
Foo.classMethod(); // 'hello'

4.实例属性的简写写法

class Foo {
  bar = "hello";
  baz = "world";
}
// 等同于
class Foo {
  constructor() {
    this.bar = "hello";
    this.baz = "world";
  }
}

5.`extends` 关键字，底层也是利用的寄生组合式继承

    class Parent {
        constructor(age) {
          this.age = age;
        }
        getName(){
          console.log('name=>',this.name)
        }
      }
      
      class Child extends Parent{
        constructor(name,age){
          super(age)
          this.name = name;
        }
      }
      
      let child = new Child("Tom",11)
      child.getName()//Tom

3.设计模式

设计模式是从许多优秀的软件系统中，总结出的成功的、能够实现可维护性、复用的设计方案，使用这些方案可以减少我们避免做一些重复的工作

JavaScript 中常见设计模式整理

4.Web Worker

javascript是单线程的，单线程无法充分发挥计算机的计算能力。所以，为了利用多核CPU的计算能力，HTML5提出了web Worker标准，允许为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。

页面大量计算，造成假死

浏览器有GUI渲染线程与JS引擎线程，这两个线程是互斥的关系当js有大量计算时，会造成UI 阻塞，出现界面卡顿、掉帧等情况，严重时会出现页面卡死的情况，俗称假死

在Vue中使用 Web Worker

适用范围

运算时间超过50ms会造成页面卡顿，这种情况可以考虑使用web Worker;
也要考虑通讯时长，假如一个运算执行时长为100ms，但是通信时长为300ms,用web worker可能会更加慢

最终标准：
计算的运算时长 - 通信时长 > 50ms，推荐使用Web Worker

js基础-2