了解 JavaScript 原型的工作原理

Question

我正在研究原型以更好地了解它们的工作原理。我不明白为什么我不能调用 hideHeader，而我可以访问变量 (this.header.el)

function App() {
    this.init();
    this.el = document.getElementById('box');
}

App.prototype.init = function () {
    document.write('hello world');

    this.header = new Header();

    this.header.hideHeader();
    this.header.el.style.display = 'none';
};

new App();

function Header() {
    this.el = document.getElementById('header');
}

Header.prototype.hideHeader = function() {
    this.el.style.display = 'none';
}

Answer 1

您应该重新排序您的代码，以便在您尝试调用它之前定义 hideHeader。

像这样：

function App() {
    this.init();
    this.el = document.getElementById('box');
}

function Header() {
    this.el = document.getElementById('header');
}

Header.prototype.hideHeader = function() {
    this.el.style.display = 'none';
}

App.prototype.init = function () {
    document.write('hello world');

    this.header = new Header();

    this.header.hideHeader();
    this.header.el.style.display = 'none';
};

new App();

JavaScript 是一种解释型语言，它不是编译型的。它在加载到内存中时按顺序求值。

Answer 2

你只需要改变你做事的顺序。例如：

function App() {
    this.init();
    this.el = document.getElementById('box');
}


function Header() {
    this.el = document.getElementById('header');
}

Header.prototype.hideHeader = function() {
    this.el.style.display = 'none';
}

App.prototype.init = function () {
    document.write('hello world');

    this.header = new Header();

    this.header.hideHeader();
    this.header.el.style.display = 'none';
};

new App();

<div id="header"></div>
<div id="box"></div>

了解 JavaScript 原型的工作原理

Understanding how JavaScript Prototypes work

javascript

prototype