javascript - Javascript调用函数中的继承

Question

不知何故 JS 继承并没有进入我的脑海。我现在尝试了很多东西，但出于某种原因，我无法向继承的对象添加方法。

请参阅我定义 B.setC 的尝试，但后来不知何故无法使用。有什么提示吗？

干杯汤姆

A = function( value){
        this.aValue = value;
}


B = function(value){
    A.call(this, value); 
    this.bValue=value+value;
}

B.prototype = Object.create(A.prototype);//subclass extends superclass


B.setC = function(value){
    this.c = value+value+value;
    console.log("execution");
}

B.prototype.setD = function(value){
    this.D = value+value+value+value;
    console.log("execution");
}





 x = new B("ConstructorParam");
x.setC("methodParam");// gives that setC is not a function
x.setD("methodParam");// works but I added setD to A not B

Answer 1

迷茫似乎就源于这种误解；引用您的评论:

Actually it isn't a typo. I want to add setC to B not A and if my understanding is right and to what I saw debugging in Chrome it is if I use B.prototype.setB then I add setB to the prototype of B aka A and not B . Or am I missing sth?

问题中的这条评论也显示了这一点:

x.setD("methodParam");// works but I added setD to A not B

B.prototype 不是 A。 B.prototype 是一个以 A.prototype 作为原型(prototype)的对象。您正确地将 setD 添加到 B.prototype；它不会以任何方式添加到 A 或 A.prototype。

如果你想像你展示的那样使用 setC 和 setD，你可以把它们放在 B.prototype 上(所以它们是可在 B 的实例上访问)或在 A.prototype 上访问(因此它们可在 A 或 B 的实例上访问>).

如果我们将 B.setC = 更改为 B.prototype.setC =，使 d 小写以匹配 c，添加一些缺失的 var，并在创建和调用方法时使用更短的值，我们得到:

var A = function( value){
    this.aValue = value;
};

var B = function(value){
    A.call(this, value); 
    this.bValue = value + value;
};

B.prototype = Object.create(A.prototype);//subclass extends superclass

B.setC = function(value){
    this.c = value + value + value;
    console.log("execution");
};

B.prototype.setD = function(value){
    this.d = value + value + value + value;
    console.log("execution");
};

var x = new B("b");
x.setC("c");
x.setD("d");

在最后一行代码之后，这是我们内存中的内容(减去一堆不必要的细节):

         +−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+         |                                                               |         \ +−−−−−−−−−−−−−−−+                                             |A−−−−−−−−−>|   function    |                                             |           +−−−−−−−−−−−−−−−+                             +−−−−−−−−−−−−−+ |           | prototype     |−−−−−−−−−−−−−−−−−−−−−−−−−−−−>|   object    | |               +−−−−−−−−−−−−−−−+                           / +−−−−−−−−−−−−−+ |                                                           | | constructor |−+                                                       | +−−−−−−−−−−−−−+         +−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+ |         |                                           | |         \ +−−−−−−−−−−−−−−−+                         | |B−−−−−−−−−>|   function    |                         | |           +−−−−−−−−−−−−−−−+    +−−−−−−−−−−−−−−−−−−+ | |           | prototype     |−−−>|      object      | | |           +−−−−−−−−−−−−−−−+  / +−−−−−−−−−−−−−−−−−−+ | |                              | | constructor      |−+ |                              | | setC: (function) |   |                              | | setD: (function) |   |                              | | [[Prototype]]    |−−−+           +−−−−−−−−−−−−−−−+  | +−−−−−−−−−−−−−−−−−−+x−−−−−−−−−>|    object     |  |           +−−−−−−−−−−−−−−−+  |           | aValue: "a"   |  |           | bValue: "aa"  |  |           | c: "ccc"      |  |           | d: "dddd"     |  |           | [[Prototype]] |−−+           +−−−−−−−−−−−−−−−+ 

[[Prototype]] above is the name the spec uses for the "internal slot" of an object that contains its reference to its prototype object. In contrast, prototype, the property on functions (e.g., A.prototype), is just a normal property of functions that points to the object that new will use as the [[Prototype]] of the new object it creates if you use that function with new.

---

Just for completeness, here that is in ES2015+:

class A {
    constructor(value) {
        this.aValue = value;
    }
}

class B extends A {
    constructor(value) {
        super(value); 
        this.bValue = value + value;
    }

    setC(value) {
        this.c = value + value + value;
        console.log("execution");
    }

    setD(value) {
        this.d = value + value + value + value;
        console.log("execution");
    }
}

let x = new B("b");
x.setC("c");
x.setD("d");