类与继承

类的定义

class C1 {
  constructor(x, y) {//constructor是构造函数,是必须的
    this.x = x;
    this.y = y;
  }
  //下面这个叫方法,前面不加function
  sum() {
    return this.x + this.y;
  }
  dec() {
    return this.x - this.y;
  }
};
var p1 = new C1(1, 2);
console.log(p1.sum());

类的继承与super关键字

class Father {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  //下面这个叫方法,前面不加function
  sum() {
    return this.x + this.y;
  }
  dec() {
    return this.x - this.y;
  }
}
class Son extends Father {
  constructor(x, y) {
    super(0, 1);//super关键字来初始化父亲的this指针
    //不过虽说是初始化的父亲的指针,其实这里已经给儿子了
    //如果没有super的话,是不允许给this.x进行赋值的
    this.x = x;//3
    this.z = 1;
  }
  mul() {
    return this.x * this.z;
  }
}
var p1 = new Son(3, 2);
console.log(p1.mul());//3
console.log(p1.sum());//4

注意点

  1. ES6中没有变量提升,所以必须先定义,后使用
  2. 类里面的属性和方法一定要加this指针
  3. 类的赋值类似于指针的赋值,只是起别名
    var p1 = new Son(3, 2);
    var p2 = p1;
    console.log(p1.x, p2.x);//3 3
    p1.x = 2;
    console.log(p1.x, p2.x);//2 2
    
  4. constructor函数是在其他函数执行完之后才执行的
class Son extends Father {
  constructor(x, y) {
    super();
    this.say();
  }
  say() {
    console.log("Hello");
  }
}
var p1 = new Son(1, 2);
//自动输出hello
  1. this默认指向实例,但是方法里面的this指向的是调用它的实例
class Hello {
  constructor() {
    this.btn = document.querySelector("button");
    this.btn.onclick = this.say;
    this.fuck();//Hello{btn:button}
  }
  say() {//say绑定在了btn.onclick方法上,因此this指向的是btn
    console.log(this);
    //<button>click</button>
    console.log("hello");
  }
  fuck() {
    console.log(this);
  }
}
var xx = new Hello();

一只菜鸡