JavaScript
プロパティ・・・オブジェクトの中身を定義したもの(名前と値を持ち、「名前: 値」という書き方をする)
メソッド・・・プロパティの中で、値が関数になっているもの
JSでは、全ての関数はオブジェクト
何が特別??
→呼び出した場所や方法によってその中身が変化する点。thisに格納されている値は、thisをどこから実行したのか、またどのような方法で実行したのかで変化する
thisはデフォルトだとwindowオブジェクトと全く同じ
関数でthisを呼び出す場合・・・windowオブジェクトと同じ
メソッドの中で呼び出す場合・・・自分で作成したオブジェクトを参照する
コンストラクタで呼び出す(インスタンスのプロパティをthisで作成する)・・・自身のプロパティを指しているし、インスタンスのプロパティでもある
↑thisが最初に作成したプロパティの中のインスタンスのプロパティになっている
Formでthisを活用する
thisでIDを取得する
ex.
input要素で作ったボタンの属性として、onclickにthisを指定する事でクリックした時にinput要素そのものを取得する事ができる
Formタグの中でthisを使うと、Form自身をすべて取得する事ができる
コンストラクタによってインスタンスを作って、初期化も行う。
変数は宣言しただけではただの箱。値を代入した時点で初期化される。
クラスは、変数と同じようにインスタンスを初期化する必要があり、そのときにコンストラクタを使う
JSでは、関数とコンストラクタを使って擬似的なクラスを実現できる仕組みになっている
function Person(name,age){
this.name = name;
this.age = age;
}
Personというコンストラクタを定義して、その中にnameとageというプロパティを設定している
インスタンスを作成するのに、new Person()でコンストラクタを呼び出して使う
var person1 = new Person('aaa',20);
var person2 = new Person('bbb',20);
console.log(person1);
newをつけることで、生成されるインスタンスがthisにセットされる
上記のコードだと、「new Person('aaa',20)」のthisにperson1がセットされ、「new Person'('bbb',20)」のthisにperson2がセットされる
メソッドを定義する方法・・・prototypeを使って定義する
prototype・・・プロパティの一種。最初は空のオブジェクトを参照している。
*参照・・・データそのものではなく、メモリ上の他の場所にあるデータを指すもの
prototypeを使って定義されたメソッドは、インスタンスが作成されるたびにコピーされることはない
インスタンス化されたオブジェクトが持っているのは、メソッドの実体ではなく「参照」だから!
コンストラクト.prototype.プロパティ = ~
ex.
var Person = function(name,age){
if(!(this instanceof Person)){
return new Person(name,age);
}
this.name = name;
this.age = age;
}
Person.prototype.setName = function(name){
this.name = name;
}
Person.prototype.getName = function(){
return this.name;
}
↓一般的なオブジェクトの構造
var obj = {
//プロパティ:値,
//プロパティ:値,
//プロパティ:値,
}
オブジェクトは上記のように、プロパティと値のセットになるが、値の部分に関数を当てはめたものがメソッド
ex.
var obj = {
//プロパティ : 値,
//プロパティ : 値,
//プロパティ : 関数 ←これがメソッド
code:js
ex.(メソッド=showText())
var obj = {
showText : function(){
consoloe.log('Hello World');
}
}
メソッドの定義方法
↑プロパティがshowTextで、値の部分に関数を当てはめメソッドを作る
メソッドの呼び出し方・・・
オブジェクト.メソッドのプロパティ()
ex.
obj.showText();
メソッドは引数(関数に渡す値)を取ることも可能
ex.
var obj = {
show.Text: function(name){
console.log('hello' + name);
}
}
obj.showText('aaa');
メソッドの引数に名前を取るためのnameが設定されており、メソッドを呼び出す際に「showText('aaa')」と記述することでメソッド内では名前が格納されたnameを使って処理をする事ができる
メソッドに戻り値を指定する
戻り値の指定・・・何らかの処理を行った後に目的の結果を得られるようにする事ができる
メソッド内にreturnを使って結果を返す
returnの処理を行うとそれ以降の処理は実行されない
コンストラクタ(インスタンス(実体)を作成する関数)やメソッド(オブジェクトの中に定義される関数)を簡単に定義できるもので、コンストラクタやメソッドを定義する際に使われる
JSだと、今までclassがなかったから、その代わりにfunction(関数)を使ってたけど、これだとごちゃごちゃしててわかりづらい
class構文は、いろいろな関数をひとまとめにして、使い回せるようにできる
class構文の書き方・・・クラス宣言とclass式の2種類がある
クラス宣言
class クラス名{
//コンストラクタやメソッドを定義する
}
クラス名は省略できない
class式
var myClass = class{
//コンストラクタやメソッドを定義する
}
クラス名省略可。クラスを再宣言(再定義)することができる
クラス内でコンストラクタを作る・・・クラスの初期設定を行う。constructorというメソッドが用意されている
ex.
class User {
constructor(name,age){
this.name= name;
this.age = age;
}
}
//インスタンスを作成する
var taro = new User('taro',23);
上記のように書くことで、インスタンスが生成される際に引数として文字列や数値を受け取れる
クラス内でメソッドを定義する
ex.getName()というメソッドを定義する
class User{
constructor(name,age){
this.name = name;
this.age = age;
}
getName(){
return this.name;
}
}
//インスタンスを生成する
var taro = new User('taro',23);
console.log(taro.getName());
実行結果・・・taro
この例では、クラス構文内に直接getName()メソッドを定義している
このように、「メソッド名{}」という記述でいくつもメソッドを定義していく事が可能
インスタンスを生成した際に、メソッド名を記述するだけで処理を実行できる
ゲッター(Getter)メソッドを作る
ゲッターメソッドを作る事で、クラスの特定のプロパティを取得することができる(ある属性の値を取得するメソッド)
class User{
constructor(name,age){
this.name = name;
this.age = age;
}
//ゲッターメソッド
get myName(){
return this.name;
}
}
get構文を付与してmyName()というゲッターメソッドを定義している
セッターメソッドを作る
セッターはプロパティに任意の値を設定するためのメソッドになる(属性に値を設定するメソッド)
インスタンスを生成してからメソッドに任意の値を代入することができる
パブリックなプロパティとプライベートなプロパティ
コンストラクタ内で定義したプロパティは「パブリック」なためどこからでもアクセスできてしまう
→プロパティへ直接アクセスできるため、どこからでも値が変更されてしまう危険性がある
Symbolを利用すると、固有のユニークなIDを自動生成してくれるため完全に異なる変数を作成できるという特徴がある
クラスの継承
extendsを使った継承方法
class User {
constructor(name,age){
this.name = name;
this.age = age;
}
}
class Man extends User {
speak(){
console.log('hello' + this.name);
}
Manクラスにはコンストラクタが記述されていない!
var taro = new Man('taro',20);
taro.speak();
実行結果・・・hello taro
メソッドはManクラスのメソッドであるが、Userクラスのコンストラクタが使われている
継承元のプロパティやメソッドをオーバーライドする方法
オーバーライド・・・継承元のプロパティやメソッドを上書きするという意味
ex.
class User {
constructor(name){
this.name = name;
}
get myName(){
return this.name;
}
}
class Person extends User {
constructor(userName,userAge){
this.name = userName;
this.age = userAge;
}
}
var taro = new Person('taro',20);
console.log(taro.myName);
これだと、Personにも新しくconstructor使って定義してるるから、継承元のコンストラクタが使われず、myNameが使えずにエラーになる
class Person extends User {
constructor(userName,userAge){
super(userName);
this.age = userAge;
}
}
このように書くことで「myName」メソッドは正しく動作するようになる
タイマー処理・・・ある一定時間ごとに繰り返し処理してくれる関数
タイマー処理には、setIntervalとsetTimeoutの2種類がある
setInterval・・・一定の時間ごとに特定の処理を繰り返す
setTimeout・・・一定時間後に特定の処理をおこなう(繰り返さずに一度だけ)
基本的な書き方は、
setInterval(function, 一定時間の指定引数1, 引数2, …)
setTimeout(function, 一定時間の指定引数1, 引数2, …)
ex.
code:JS
Timer = setInterval(function(){
if(page === lastPage){
page = 0;
changePage();
} else {
page++;
changePage();
};
},3000);
setIntervalでタイマー処理を行う
ex. 1秒ずつのカウントアップ
code:JS
<script>
var count = 0;
var countup =function(){
console.log(count++);
}
setInterval(countup , 1000);
繰り返しを指定した箇所で止めるには・・・clearInterval
ex.
code:js
var id = setInterval(function(){
countup();
if(count > 5){
clearInterval(id); //idをclearIntarevalで指定している
}}, 1000);
setTimeoutを使ったタイマー処理
ex. 1000ミリ秒後にcountupの処理を呼び出す
code:js
<script>
var count = 0;
var countup = function(){
console.log(count++);
}
setTimeout(countup, 1000); //1000ミリ秒後にcountupの処理を一度だけ実行
setTimeoutでsetIntervalのような繰り返しの処理をする
code:js
<script>
var count = 0;
var countup = function(){
console.log(countup++);
setTimeout(countup, 1000); //一度処理が終わった地点から1000ミリ秒後にまた同じ処理を繰り返す
}
countup();
clearTimeoutでsetTimeoutの処理を停止する
code:js
<script>
var count = 0;
var countup = function(){
console.log(countup++);
var id = setTimeout(countup, 1000);
if(count > 5){
clearTimeout(id); //idをclearTimeoutで指定している
}
}
setIntervalでの繰り返し処理とsetTimeoutでの繰り返し処理の違い
setIntervalでの繰り返し処理・・・処理開始時点から一定時間後に同じ処理を繰り返す
setTimeoutでの繰り返し処理・・・処理終了時点から一定時間後に同じ処理を繰り返す
よって、同じ1000ミリ秒後で時間を指定しても、次の処理が始まるまでに要する時間がずれる
しまぶーの動画
メソッドの短縮記法
code:js
const hoge = {
alert(){}
};
//通常の書き方
const a = {
alert: function (){}
};
//↑これだとVSCode上でalertがメソッドじゃなくてプロパティとして扱われてしまう
関数
code:js
function 関数名(仮引数1,仮引数2) {
//色々な処理
return 関数の返り値;
}
//引数・・・関数が受け取る値
Twitterをもとに例文
code:js
//入力した文字が140字以下かどうか
//trueかfalseかという返り値が必要になる
function isTweetable(text) {
return text.length <= 140;
}
console.log(isTweetable("hoge"));
returnがない例
code:js
function alertTweetable(text) {
// if(text.length <= 140) {
if(isTweetable(text)) {
//↑関数の再利用
alert("You can Tweet");
}
}
alertTweetable("hoge");
extend・・・JSでは継承を意味する