为什么 DOM 有面向对象的结构而 JS 没有？

Question

在 DOM（HTML 解析文件的 JS 表示）中，我们有这个结构（其中 < 用于“inherited"):

   Object(JS object) < Node < Element < HTMLElment < HTMLBodyElement, HTMLDivElement, etc..
   Object(JS object) < Node < DOcument < HTMLDocument
   ...

在我检查过的每个文档中，所有这些节点都称为接口 (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement)。

我不明白这在 JS 中怎么可能（不是面向对象的，没有接口等）？我有 C++ 背景，所以也许我混淆了 DOM “面向对象”结构和真实结构。任何澄清？

Answer 1

I don't understand how is this possible in JS (not object-oriented, no interfaces, etc)?

在 JavaScript 中建模 DOM 的结构没有问题。 JavaScript 非常 object-oriented，包括支持继承。 JavaScript 使用 prototypical inheritance。示例：

// Create an object with a method
const base = {
    baseMethod() {
        console.log("baseMethod");
    }
};

// Create an object using `base` as its prototype,
// perhaps add a property to it
const sub = Object.assign(Object.create(base), {
    subMethod() {
        console.log("subMethod");
    }
});

// Sub inherits `base`'s properties
sub.baseMethod(); // "baseMethod"

// And has its own
sub.subMethod();  // "subMethod"

JavaScript 还在原型继承之上覆盖了一些东西似乎而不是 class-like（它不是，它仍然是原型，但它是对于来自 class-based 种语言的人来说更舒服）。例如，这里有一个使用 class 语法的 three-layer 继承模型（更像是 Node < Element < HTMLElement）（但同样，我们可以做所有这些也没有 class 语法）：

class Base {
    baseMethod() {
        console.log("baseMethod");
    }
}

class Sub extends Base {
    subMethod() {
        console.log("subMethod");
    }
}

class SubSub extends Sub {
    subSubMethod() {
        console.log("subSubMethod");
    }
}

const x = new SubSub();
x.baseMethod();                     // "baseMethod"
x.subMethod();                      // "subMethod"
x.subSubMethod();                   // "subSubMethod"
console.log(x instanceof Base);     // true
console.log(x instanceof Sub);      // true
console.log(x instanceof SubSub);   // true
console.log(x instanceof Date);     // false (just to show it's not always true ;-) )

（该结构的 Object 基数是隐含的。）

为什么 DOM 有面向对象的结构而 JS 没有？

Why DOM has object oriented structure when JS is not?

javascript

dom