【JavaScript】TypeErrorが思わぬところで起きたので、解決する【名前の共有】

バートリーのさいとうです。

今回は

jsでTypeErrorが出た思いがけないタイミング

という内容で話します。

とても単純だけど気をつけたい「名前の重複」

早速ですが、僕がTypeErrorになった箇所はこう言う場面でした。

すでに存在するプロパティと名前を共有する関数

を作成してしまった時です。

例えば以下のコードの4と9行目のような場合です。

var Dog = function () {
 this.age = 11;
 this.color = "black";
 this.name = "Ralph";
 return this;
}

Dog.prototype.name = function(name) {
 this.name = name;
 return this;
}

4行目でnameプロパティを利用し、9行目ではnameが横に並んでいます。

このような条件の時、TypeErrorが発生するようです。

非常に簡単なことですが、関数名とプロパティは同じ名前を避けましょう。

そのため、以下のように4、9行目を書き換えてあげます。

var Dog = function () {
 this.age = 11;
 this.color = "black";
 this.dogName = "Ralph"; //nameをdogNameに変更しました
 return this;
}

Dog.prototype.name = function(name) {
 this.dogName = name;　//nameが変更されたので、こちらもdogNameに変更しました。
 return this;
}