es6中的class 创建类和对象 继承类

一、es5的构造函数

function Person(){
  this.name = "jianlin"
  this.age = "18"
  this.say=function(){
    console.log('person say')
  }
}

二、es6的class

class Person{
  constructor( x , y){
    this.x = x;
    this.y = y;
    this.name=" JianLin "
    this.age="18"
  }
  say(){
    console.log('person say'+this.name)
  }
}

调用的时候，相同

let p2 = new Person()

p2.say()

1:通过class关键字创建类，类名我们习惯定义首字母大写。

2:类里面有个constructor函数，可以接收传递过来的参数，同时返回实例对象。

3:constructor函数，只要new生成实例时，就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数

4:生成实例new不能省略。

5:最后注意语法规范，创建类 类名后面不要加小括号，生成实例 类名后面加小括号，构造函数不需要加function

 

三、类的继承

//复杂写法
class Teacher extends Person{

  constructor(x,y){
    super(x,y)   //必须在this之前声明 调用父亲的构造函数，
//否则，不写这句话时，son.say()则会报错。
//因为son里面的this指向子类的构造函数，father里面的this指向父类的构造函数，
//所以调用son.say()时，没有name这个属性，只存在父类属性中，故报错。
    this.score=1000000000
    this.name='111111'
  }

  hello(){
    console.log('teacher hello'+this.score)
  }

}
//简单写法
class Teacher extends Person{
  score=1000000000
  name='111111'

  hello(){
    console.log('teacher hello')
  }
}

四、super关键字调用父类普通函数

class Father{
    say(){
        return '我是爸爸'
    }
}



class Son extends Father {
    say(){
        console.log('我是儿子') //1=》son.say() 输出的时子类的方法。
        console.log(super.say() + '的儿子');//son.say() 调用父类中的say方法。 我是爸爸的儿子
    }
}

var son = new Son();

继承中的属性或者方法查找原则，就近原则

五、子类继承父类的加法方法，同时扩展减法方法。

class Father {
    constructer ( x , y ){
        this.x = x;
        this.y = y;

        //    constructer里面的this，指的是实例对象。
    }

    sum(){
        return this.x+this.y  //在方法里面的this,指向的是实例对象，函数中的this谁调用指向谁
    } 
}
var _that
class Son extends Father {
    constructer ( x , y ){
        super(x , y);
        _that = this;
        this.x = x;
        this.y = y;
        this.subtract();//new实例时就调用constructer方法，所以写在这里面，用this指向实例的方法。

        this.btn = document.querySelector('button')


        this.btn.onclick = this.sing//报错undefined  //这个sing方法里面的this指向的是btn这个按钮，因为点击了这个按钮才调用了这个函数

    }
    sing(){
        //这个sing方法里面的this指向的是btn这个按钮，因为点击了这个按钮才调用了这个函数
        console.log(this) //当点击btn时，打印这个按钮
        console.log(this.x) //当点击btn时，打印undefined

        console.log(_that.x) //_that指向的是constructor的this.当点击btn时，打印x
    }
    subtract(){
        console.log(this.x-this.y);
    }
}

var son = new Son(5,3) 
son.subtract()

六、注意

1，es6中类没有变量提升，所以必须先定义类，才能通过类实例化对象。

2，类里面的共有的属性和方法一定要加this使用。

七、案例

面向对象tab切换

有增删改查功能

 

var _that
class Tab {
    constructor(id){
        //获取元素
        _that = this
        this.main = document.querySelector(id)

        this.add = this.main.querySelectorAll('.tabadd')
        //li的父元素
        this.ul = this.main.querySelectorAll('.firstnav ul:first-child')
        //section的父元素
        this.section = this.main.querySelectorAll('.tabscon')
        this.init()
    }
    
    //获取所有的li和section
    updateTab(){
        this.lis = this.main.querySelectorAll('li')
        this.sections = this.main.querySelectorAll('section')   
    }
    //init 初始化操作让相关的元素绑定事件
    init(){
        this.updateTab()
        this.add.onclick = this.addTab;//不要加小括号
        for(var i=0;i<this.lis.length;i++){
            this.lis[i].index = i
            this.lis[i].onclick = this.toggleTab
        }
    }

    
    //切换
    toggleTab(){
        _that.clearClass()
        console.log(this.index) //当点击lis[i]时，this指向lis[i]，所以this.index有值。
        this.className = 'liactive'
        _that.section[this.index].className = '' //section是构造函数的属性
    }

    //清除样式
    clearClass(){
        for(var i=0; i<this.lis.length; i++){
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }
    addTab(){
        _that.clearClass
        //1）创建li元素和section元素
        var li = '<li class="liactive"><span>测试</span></li>'
        var section = '<section></section>'
        //2）把这两个元素追加到对应的父元素里面
        _that.ul.insertAdjacentHTML('beforeend',li) //beforeend 放到父元素的最后面
        _that.section.insertAdjacentHTML('beforeend',section)
        _that.init()
    }

    removeTab(){

    } 
    editTab(){

    }

}

new Tab('#tab')