ES6 的 class 和构造函数的区别

2020-09-23  本文已影响0人  小灰灰_a

class testC {

    constructor(props) {

        this.name = 'xhh'

        this.ages = 22

        console.log('先初始化父类this', 1);

    }

    say () {

        console.log(this.name);

    }

    age () {

        console.log(this.age);

    }

}

class testC1 extends testC {

    constructor(props) {

        super(props);

        console.log('先初始化子类this', 2);

    }

}

var ttC = new testC1(234)

var tt1C = new testC(234)

for (const key in tt1C) {

    console.log(key);

}

function test () {

    this.name = 'xhh'

    this.ages = 22

    console.log('先初始化父类this', 2);

}

test.prototype.say = function () {

    console.log(this.name);

}

test.prototype.age = function () {

    console.log(this.age);

}

function test1 () {

    this.sex = 'man'

    console.log('先初始化子类this', 1);

    test.call(this)

}

var tt = new test1()

var tt1 = new test()

for (const key in tt1) {

    console.log(key);

}

// ******* ES5 的继承先生成了子类实例,再调用父类的构造函数修饰子类实例。ES6 的继承先 生成父类实例,再调用子类的构造函数修饰父类实例。这个差别使得 ES6 可以继承内置对象。

// *******  说明 ES5 prototype添加方法可以被枚举, class的添加的方法不可被枚举

// tt1 打印出如下:

// 先初始化父类this 2

// name

// ages

// say

// age

// tt1C 打印出如下:

// 先初始化子类this 1

// name

// ages

上一篇 下一篇

猜你喜欢

热点阅读