js 原型链 & class

发布时间 2023-07-13 16:41:28作者: 封兴旺

https://es6.ruanyifeng.com/#docs/class

 

早期采用原型链写法

function A(){
    this.fx1 = 1
}

A.prototype.add = function(x){
    this.fx1 += 1;
    console.log(x, this.fx1)
}

A.prototype.ts = function(x){
    console.log(x, this.fx1)

    this.add()

    console.log(x, this.fx1)
}


var  a = new A();

a.add('add')
a.ts('ts')

/*
add 2
ts 2
undefined 3
ts 3
*/

 

2.类

class A{ // static在类上定义静态方法。这些方法不会被类的实例继承,也不属于类的原型对象

    fx0 = 0; // 在这里创建变量和在constructor里传教一下都要this
    constructor(x){
        this.fx1 = 1
        console.log(x, this.fx1, this.fx0)
    }

    add(x){
        this.fx1 += 1
        this.fx0 += 1
        console.log(x, this.fx1, this.fx0)
    }

}

/*
var a = new A('hi')
a.add('add')

hi 1 0
add 2 1
*/

class B extends A {
  constructor(x, y) {
    super(x); // 引用父类的构造方法, 在构造函数中调用
  }

  show(){
    super.add('b add') // super.add 和 this.add都可以调用
    //console.log(super.fx0) // undefined
  }

}
var b = new B('hi')
// b.add('add')
b.show()