Ups and downs, age like a song -- inheritance of Ts and the use of "super" keyword

At the beginning of Xiaobian's contact with TS, she felt more and more happy. When she was learning js at the beginning, she felt really confused. Now she has a sense of openness when learning ts. I feel that TS is more clear in logic and syntax. First, I present a section of TS code:

class Person{

	constructor(public name: string) {
		console.log("I am a boy.");
	}
	eat() {
		console.log("I can eat.");
	}
}

//Subclass inheriting Person
class boy extends Person{

	//Add a new constructor to the subclass, which needs to refer to the constructor of the parent class
	constructor(name: string, id: string) {
		super(name);//Use of super keyword 1, reference the constructor of the parent class
		this.id = id;
		console.log("My id is "+this.id+".  My name is "+this.name+".");//In order to make the layout more beautiful
}
	id: any;
	work() {
		super.eat();	//Use of super keyword 2, calling the method of the parent class
		this.dowork();
	}
	//Create a protected method that cannot be called outside the class to achieve a process that requires eating before learning
	private dowork() { 
		console.log("I can learn well.")
	}
}
var boy1 = new boy("Baron","666")
boy1.work();

The children's shoes can feel the js code of the same function with their heart:

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    }
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var Person = /** @class */ (function () {
    function Person(name) {
        this.name = name;
        console.log("I am a boy.");
    }
    Person.prototype.eat = function () {
        console.log("I can eat.");
    };
    return Person;
}());
//Subclass inheriting Person
var boy = /** @class */ (function (_super) {
    __extends(boy, _super);
    //Add a new constructor to the subclass, which needs to refer to the constructor of the parent class
    function boy(name, id) {
        var _this = _super.call(this, name) || this;
        _this.id = id;
        console.log("My id is " + _this.id + ".  My name is " + _this.name + "."); //In order to make the layout more beautiful
        return _this;
    }
    boy.prototype.work = function () {
        _super.prototype.eat.call(this); //Use of super keyword 2, calling the method of the parent class
        this.dowork();
    };
    //Create a protected method that cannot be called outside the class to achieve a process that requires eating before learning
    boy.prototype.dowork = function () {
        console.log("I can learn well.");
    };
    return boy;
}(Person));
var boy1 = new boy("Baron", "666");
boy1.work();

What we want to achieve:

Here we need to focus on:

1. The subclass must refer to the constructor of the parent class when creating a new constructor, which can use the "super" keyword.

2. The method of the subclass can call the method of the parent class with the "super" keyword.

3. Some methods that need to be restricted can be restricted by access modifiers.

Thank you for reading!

Posted by GrizzlyBear on Fri, 03 Jan 2020 08:30:27 -0800