面向对象编程OOP-2

用ES6的方法 实现类的继承

//类的定义
class Animal {
 //ES6中新型构造器
     constructor(name,age) {
     this.name = name;
     this.age=age;
 }
 //实例方法
 sayName() {
     console.log(this.name +' is ' + this.age);
 }
}
//类的继承
class Programmer extends Animal {
     constructor(name,age) {
     //直接调用父类构造器进行初始化
     super(name,age);
 }
 program() {
     console.log("I'm coding...");
  }
}

//测试我们的类
var animal=new Animal('dummy','20'),
wayou=new Programmer('femal','65');
animal.sayName();//输出 ‘My name is dummy'
wayou.sayName();//输出 ‘My name is wayou'
wayou.program();//输出 ‘I'm coding...'

2. 原型继承 和类式继承结合，比较典型

function AnimalTest(name,age) {
    this.name=name;
    this.age=age;
    this.sayName=function () { }
}

function ProgrammerTest(name,age) {
    AnimalTest.apply(this,arguments)
}
ProgrammerTest.prototype=Object.create(AnimalTest.prototype);
ProgrammerTest.prototype.constructor=ProgrammerTest;

3. 介绍一下 bind与call,apply的区别

var obj = {name:'JSLite.io'};
/**
 * 给document添加click事件监听，并绑定EventClick函数
 * 通过bind方法设置EventClick的this为obj，并传递参数p1,p2
 */
document.addEventListener('click',EventClick.bind(obj,'p1','p2'),false);
//当点击网页时触发并执行
function EventClick(a,b){
    console.log(
            this.name, 
            a,
            b  
    )
}

　　当点击document文档的时候，在浏览器console里可以看到 打印出： JSLite.io p1 p2

但是如果我们修改下代码，把EventClick.bind(obj,'p1','p2')部分改成EventClick.call(obj,'p1','p2') 会发生什么呢？ 是的，你不需要点击任何东东，马上就会打印
JSLite.io p1 p2 ，就是说函数立马执行了，用bind只是改变了 函数的作用域范围，函数并没有执行