小爝(知乎用户):js里面什么都是对象,所以你看单身狗学这个语言学的老快了。

就前几天看到的答案,觉得对啊!js这种边缘OP的语言,你说它没对象它是可以有的,你说它是面向对象语言它不是。
所以来研究一手关于JavaScript的继承。研究过程用一下typescript(这个真有对象了)

先看一下关于typescript的继承

看一下ts的类

class Parent {
    name: string
    age: number
    constructor(msg:string, age:number) {
        this.age = age
        this.name = msg;
    }
    sayHello() {
        return console.log(`hello ${this.name},now is ${this.age}`)
    }
}

然后来一手调用,全程感觉像在用java

let par = new Parent("mike", 16)
par.sayHello()      //hello mike,now is 16

答案我在terminal验证过的没问题!!

接下来尝试一下如果我走继承会是什么样,来一手继承

class Parent {
    name: string
    age: number
    constructor(msg:string, age:number) {
        this.age = age
        this.name = msg;
    }
    sayHello() {
        return console.log(`hello ${this.name},now is ${this.age}`)
    }
}
//Now extends.
class Son extends Parent {
    constructor(msg, age) {
        super(msg, age);
    }
    sayHello() {
        console.log(`hello I'm Son. next is my Parent's say`)
        super.sayHello()
    }
}

来手调用验证结果

let sapi = new Son('peanut', 10)
sapi.sayHello()  //hello I'm Son. next is my Parent's say\n hello peanut,now is 10

该研究JavaScript的继承了

先来看一下第一个例子翻译成ES5(JavaScript)是什么样的

var Parent = (function () {
    function Parent(msg, age) {
        this.age = age;
        this.name = msg;
    }
    Parent.prototype.sayHello = function () {
        return console.log("hello " + this.name + ",now is " + this.age);
    };
    return Parent;
}());
var par = new Parent("mike", 16);
par.sayHello();

首先是建立了个函数,函数内再嵌套一层函数,然后通过内部的prototype添加一个方法,最后返回整个父函数。
燃鹅在这个函数内部已经做了一次叫“原型链继承”的事情了。就是从父级,或者说从其他原型来指向到继承的实例来达到元素一并继承,这样我要实现后面的实例的时候就要连带前面的也一并执行了。

然后第二个例子,多了个继承

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var Parent = (function () {
    function Parent(msg, age) {
        this.age = age;
        this.name = msg;
    }
    Parent.prototype.sayHello = function () {
        return console.log("hello " + this.name + ",now is " + this.age);
    };
    return Parent;
}());
var Son = (function (_super) {
    __extends(Son, _super);
    function Son(msg, age) {
        return _super.call(this, msg, age) || this;
    }
    Son.prototype.sayHello = function () {
        console.log("hello I'm Son. next is my Parent's say");
        _super.prototype.sayHello.call(this);
    };
    return Son;
}(Parent));
var sapi = new Son('peanut', 10);
sapi.sayHello();

有点厉害,我先坐下来……

先是构造了个链子,然后(那个是闭包污染处理嘛…)…… 说不清了……

反正看子类,很明显在“Son类”结束前,有一个(Parent),虽说ts对于类的处理都是一个大个的及时运行函数,但是"parent"运行时并没有带参数,而"Son"带了它的爹,如果我的理解的是对的的话,就是"Son"在运行的时候把"Parent"带着运行一次起到“继承”的效果。最后还是照原型链的理解。

关于JavaScript的其他继承

还是因为我的爬虫小记中的现世界宝可梦数量及其名字的项目中,用到了.call(this)这个函数句。所以在想,是否可以使用构造函数走一波继承?

function a() {
    return console.log('this is a')
}
function b() {
    a.call(this)
}

然后调用

b()     //this is a

所以也是可以的。结束!