[英]Javascript ES6 Classes - Method cant access class property defined inside class constructor
So i was trying to structure my code inside a class so it can be more organized, but iam struggling. 因此,我试图在一个类中构建代码,以使其更有条理,但我很挣扎。 I have the code:
我有代码:
class App {
constructor() {
// Get elements from DOM
const titleBox = document.getElementById('titleBox');
const navBox = document.getElementById('navBox');
const navLinks = document.querySelectorAll('.header__listLink');
const headerTitle = document.getElementById('headerTitle');
const headerSubtitle = document.getElementById('headerSubtitle');
const ulNav = document.getElementById('ulNav');
const ulNavLinks = document.querySelectorAll('.ulNavLink');
// for each nav link, add an event listener, expanding content area
navLinks.forEach((link) => {
link.addEventListener('click', this.clickedLinkState);
});
}
clickedLinkState(e) {
e.preventDefault();
titleBox.classList.remove("header__title-box");
titleBox.classList.add("header__title-box--linkClicked");
headerTitle.classList.remove("header__title");
headerTitle.classList.add("header__title--linkClicked");
headerSubtitle.classList.remove("header__subtitle");
headerSubtitle.classList.add("header__subtitle--linkClicked");
ulNav.classList.remove("header__listInline");
ulNav.classList.add("header__listInline--linkClicked");
navBox.classList.remove("header__nav-box");
navBox.classList.add("header__nav-box--linkClicked");
ulNavLinks.forEach((navLink) => {
navLink.classList.remove("header__listLink");
navLink.classList.add("header__listLink--linkClicked");
});
}
}
const app = new App();
And i got the error: "main.js:40 Uncaught ReferenceError: ulNavLinks is not defined at HTMLLIElement.clickedLinkState (main.js:40)". 我得到了一个错误:“ main.js:40 Uncaught ReferenceError:在HTMLLIElement.clickedLinkState(main.js:40)上未定义ulNavLinks”。 the 'ulNavLinks' is a nodeList.
“ ulNavLinks”是一个nodeList。
I was trying to define the elements using 'this.titleBox = ...', for exemple, but it got even worse, i could not access it from my clickedLinkState method. 例如,我试图使用'this.titleBox = ...'定义元素,但情况变得更糟,我无法从我的clickedLinkState方法访问它。 Outside the class it was working.
在课堂外,它正在工作。
Why i cant access the 'ulNavLinks' inside my method? 为什么我无法在方法内部访问“ ulNavLinks”? and why i cant access my propesties inside the method if i declare them 'this.titleBox', 'this.navBox'?
如果我将它们声明为“ this.titleBox”,“ this.navBox”,为什么不能在方法中访问属性?
In JavaScript, as for now, instance properties can only being defined inside class methods using keyword this
( here is the doc ). 就目前而言,在JavaScript中,实例属性只能在使用关键字
this
( 这里是doc )的类方法中定义。
Also there is an experimental feature of supporting public/private fields, which you may use with some build steps due to poor browser support. 此外,还有一项实验性功能 ,可支持公共/私有字段,由于浏览器支持不佳,您可能会在某些构建步骤中使用该功能 。
Make sure to use this
: 确保使用
this
:
class App { constructor() { // Get elements from DOM this.titleBox = document.getElementById('titleBox'); this.navBox = document.getElementById('navBox'); this.navLinks = document.querySelectorAll('.header__listLink'); this.headerTitle = document.getElementById('headerTitle'); this.headerSubtitle = document.getElementById('headerSubtitle'); this.ulNav = document.getElementById('ulNav'); this.ulNavLinks = document.querySelectorAll('.ulNavLink'); // for each nav link, add an event listener, expanding content area this.navLinks.forEach((link) => { link.addEventListener('click', this.clickedLinkState.bind(this)); }); } clickedLinkState(e) { e.preventDefault(); this.titleBox.classList.remove("header__title-box"); this.titleBox.classList.add("header__title-box--linkClicked"); this.headerTitle.classList.remove("header__title"); this.headerTitle.classList.add("header__title--linkClicked"); this.headerSubtitle.classList.remove("header__subtitle"); this.headerSubtitle.classList.add("header__subtitle--linkClicked"); this.ulNav.classList.remove("header__listInline"); this.ulNav.classList.add("header__listInline--linkClicked"); this.navBox.classList.remove("header__nav-box"); this.navBox.classList.add("header__nav-box--linkClicked"); this.ulNavLinks.forEach((navLink) => { navLink.classList.remove("header__listLink"); navLink.classList.add("header__listLink--linkClicked"); }); } } const app = new App();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.