主に this
を使っている部分に問題があります。
以下に参考になりそうなコード、リンクを挙げていますが、基本的には書籍などで体系的に理解することをお勧めします。
this
が参照するもの
this
が参照するものは文脈により様々です。
しかし、様々とはいっても質問者が期待した機能はありません。
質問のコードでは、オブジェクト初期化子(リテラル)の中で this
を用いることで、初期化(生成)しているオブジェクト自身を指すことを期待していますが、JavaScriptにそのような機能はありません。this
にそのような機能が無いだけでなく、他にもそのような事を実現する構文は無いと思います。
「this
で、初期化中のオブジェクトを参照できる」といった表現がされることがありますが、それは主に new
で呼び出される関数(コンストラクタ)の中で使用する場合です。
では、質問のコードの this
が何を指しているかというと、グローバルオブジェクト(ブラウザの場合は window
と同じ)です。下のコードで確認して下さい。
var a = "グローバル変数 a の値"
let obj = {
a: "obj のプロパティ a の値",
what_is_this: this.a,
}
// ここで、obj.what_is_this の値はグローバル変数 a と同じです。
// つまり、"グローバル変数 a の値" となっています。
// "obj のプロパティ a の値" とはなりません。
console.log("obj.what_is_this の値は: ", obj.what_is_this)
// 上は、ここでの this がグローバルオブジェクトを指すことを示します。
// もちろん、オブジェクト初期化子の外であっても同じです。
// よって、以下の値も同じです。
console.log("this.a の値は: ", this.a)
メソッドにする例
質問のコードの形をできるだけ残したもの:
var element = {
select: document.getElementById('numbers'),
getIndex: function() {
return this.select.options.selectedIndex
},
getSelected: function() {
return this.select.options[this.getIndex()]
},
display: document.getElementById('display'),
button: document.getElementById('output'),
init: function() {
this.button.addEventListener('click', () => {
this.display.innerText = this.getSelected().value
})
},
}
element.init()
より慣用的なJavaScript (コンストラクター関数やプロトタイプを用いたオブジェクト指向):
function App() {
this.select = document.getElementById('numbers'),
this.display = document.getElementById('display'),
this.button = document.getElementById('output'),
this.button.addEventListener('click', () => {
this.display.innerText = this.getSelected().value
})
}
App.prototype.getIndex = function() {
return this.select.options.selectedIndex
}
App.prototype.getSelected = function() {
return this.select.options[this.getIndex()]
}
var app = new App()
より最近の構文を使用したもの:
class App {
select = document.getElementById('numbers')
display = document.getElementById('display')
button = document.getElementById('output')
constructor() {
this.button.addEventListener('click', () => {
this.display.innerText = this.getSelected().value
})
}
getIndex() {
return this.select.options.selectedIndex
}
getSelected() {
return this.select.options[this.getIndex()]
}
}
let app = new App()