JavaScript 高级——详谈面向对象

var count=0
/*
        类中的成员：属性和方法
        */
class Doctor {
    // 构造函数在根据类创建对象的时候自动调用执行
    constructor() {
        count++
        console.log('构造函数执行了'+count+'次')
    }
}
// 使用 new 关键字创建类的实例，或者叫做创建类的对象
/* 可以将Doctor类看成iphone12的设计图纸，new Doctor() 就是根据图纸生产了
        一步iphone12手机*/
var d1=new Doctor()
// 又根据图纸生产了一步iphone12手机
var d2=new Doctor()
// 又根据图纸生产了一步iphone12手机
var d3=new Doctor()

class Doctor {
    constructor(name, age, gender) {
        // this.name：类中的一个属性叫做name；构造函数中的形参name是一个形参而已，完全可以取别的名字
        this.name = name
        this.age = age
        this.gender = gender
    }
    // 方法：手术
    shoushu() {
        console.log('我正在做手术')
    }
    // 方法：开药：根据你的钱开药
    kaiyao(money) {
        switch (money) {
            case 100:
                console.log('白萝卜')
                break;
            case 200:
                console.log('胡萝卜')
                break;
            case 300:
                console.log('人参')
                break;
        }
    }
}
/*
            new Doctor() 就是在调用 Doctor 中的构造函数
            所以，构造函数需要几个参数，我们就在Doctor后面的小括号中
            参数几个参数，那么这几个数值就会传递给构造函数的形参
        */
var d1 = new Doctor('李文亮', 24, '男')
console.log(d1)
// 通过对象名称.方法名称() 的方式调用对象中的方法
d1.shoushu()
d1.kaiyao(300)

   class Father {
       constructor(name) {
        this.name = name
       }
       speak() {
        console.log('father 在 speak')
       }
   }
   /*子类会继承父类中的所有的属性和方法
 1)那么构造方法会像普通的方法一样被继承
   2)子类可以对父类进行扩展，比如添加新的属性，但是一定要在添加之前先调用父类的构造方法*/
 class Son extends Father {
       constructor(name,age) {
      // 一定要在ti9anjia自己的属性之前，先调用父类的构造方法
         super(name)
      // 添加自己的属性
        this.age = age
     }
   }
   // 创建Son类的对象
   var s1 = new Son('yhb',18)
   console.log(s1);
   s1.speak()

- 每个类都必须有构造函数，即使自己不创建，程序也会自动创建一个无惨的构造函数
- 构造函数也是可以继承的
- 继承中,子类调用一个方法,先看子类有没有这个方法,如果有就先执行子类的，继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)，注意：上面所说的方法，既包括构造方法，也包括普通的方法
- 子类如果编写了自己的构造方法，则在构造方法中必须先使用 super 调用父类的构造方法，也就是说super调用必须在this之前，否则就会产生错误
- 如果子类想要继承父类的属性,同时在自己内部扩展自己的属性则在调用super之后，就可以编写自己的代码了
- 时刻注意this的指向问题,类里面的公有的属性一定要加this使用.
- constructor中的this指向的是new出来的实例对象 
- 自定义的方法,一般也指向的new出来的实例对象
- 绑定事件之后this指向的就是触发事件的事件源
- 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象

addTab() {
    that.clearClass();
    // (1) 创建li元素和section元素 
    var random = Math.random();
    var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi">       </span></li>';
    var section = '<section class="conactive">测试 ' + random + '</section>';
    // (2) 把这两个元素追加到对应的父元素里面
    that.ul.insertAdjacentHTML('beforeend', li);
    that.fsection.insertAdjacentHTML('beforeend', section);
    that.init();
    }

 removeTab(e) {
     e.stopPropagation(); // 阻止冒泡 防止触发li 的切换点击事件
     var index = this.parentNode.index;
     console.log(index);
     // 根据索引号删除对应的li 和section   remove()方法可以直接删除指定的元素
     that.lis[index].remove();
     that.sections[index].remove();
     that.init();
     // 当我们删除的不是选中状态的li 的时候,原来的选中状态li保持不变
     if (document.querySelector('.liactive')) return;
     // 当我们删除了选中状态的这个li 的时候, 让它的前一个li 处于选定状态
     index--;
     // 手动调用我们的点击事件  不需要鼠标触发
     that.lis[index] && that.lis[index].click();
 }

editTab() {
    var str = this.innerHTML;
    // 双击禁止选定文字
    window.getSelection ? window.getSelection().removeAllRanges() :             document.selection.empty();
    // alert(11);
      this.innerHTML = '<input type="text" />';
      var input = this.children[0];
      input.value = str;
      input.select(); // 文本框里面的文字处于选定状态
      // 当我们离开文本框就把文本框里面的值给span 
      input.onblur = function() {
      this.parentNode.innerHTML = this.value;
      };
      // 按下回车也可以把文本框里面的值给span
      input.onkeyup = function(e) {
      if (e.keyCode === 13) {
      // 手动调用表单失去焦点事件  不需要鼠标离开操作
      this.blur();
      }
    }
}