【入門】【初心者】javascript・jQuery部中級「オブジェクトとは？」

これは、オンラインプログラミング学習サービス「ウェブカツ!!」にて、

javascript・jQuery部中級のオンライン学習で使用しているコードになります。

1 2.オブジェクトについて

2.オブジェクトについて

jsで扱うものは全てオブジェクトかオブジェクトのように使える
オブジェクトはプロパティとメソッドがある
プロパティは値を保存しとく変数と同じで、オブジェクトの状態や特性を表すために使われる
メソッドは関数と同じで、オブジェクトの振る舞い（動き）を表すために使われる

2.１. オブジェクトの作り方

var human = {};
human.name = 'kazukichi'; // プロパティ
human.age = 99; // プロパティ
human.sex = '男'; // プロパティ
human.sayInfo = function(){ // メソッド
return '私は' + human.name + 'で年齢は' + human.age + 'で性別は' + human.sex + 'です。';
}
console.log(human.sayInfo());

// こうやっても同じこと
var human = {
name: 'kazukichi',
age: 99,
sex: '男',
sayInfo: function(){ // メソッド
return '私は' + human.name + 'で年齢は' + human.age + 'で性別は' + human.sex + 'です。';
}
};
console.log(human.sayInfo());

var human = {};

human.name = 'kazukichi'; // プロパティ

human.age = 99; // プロパティ

human.sex = '男'; // プロパティ

human.sayInfo = function(){ // メソッド

return '私は' + human.name + 'で年齢は' + human.age + 'で性別は' + human.sex + 'です。';

}

console.log(human.sayInfo());

// こうやっても同じこと

var human = {

name: 'kazukichi',

age: 99,

sex: '男',

sayInfo: function(){ // メソッド

return '私は' + human.name + 'で年齢は' + human.age + 'で性別は' + human.sex + 'です。';

}

};

console.log(human.sayInfo());

2.2. new演算子とは？

// new演算子
var obj1 = new Object();
var obj2 = {};
console.log(obj1);
console.log(obj2);

// newをつけなかった場合
var human = function(){
this.name = 'kazukichi';
this.say = function(){
return this.name;
}
}
var obj1 = new human();
var obj2 = human();

console.log(obj1.say());
console.log(obj2.say()); // undefined

console.log(obj1);
console.log(obj2);

// newは勝手にインスタンスを返却してくれる

// newをつけなければ、ただ関数を実行しただけ
var human = function(){
this.name = 'kazukichi';
this.say = function(){
return this.name;
}
return 'ただ実行しただけ';
}
var obj2 = human();

console.log(obj2);

// new演算子

var obj1 = new Object();

var obj2 = {};

console.log(obj1);

console.log(obj2);

// newをつけなかった場合

var human = function(){

this.name = 'kazukichi';

this.say = function(){

return this.name;

}

var obj1 = new human();

var obj2 = human();

console.log(obj1.say());

console.log(obj2.say()); // undefined

console.log(obj1);

console.log(obj2);

// newは勝手にインスタンスを返却してくれる

// newをつけなければ、ただ関数を実行しただけ

var human = function(){

this.name = 'kazukichi';

this.say = function(){

return this.name;

}

return 'ただ実行しただけ';

}

var obj2 = human();

console.log(obj2);

2.3. 独自コンストラクタの作り方

// jsではコンストラクタはただの「関数」
// 関数内で呼び出すthisは呼び出し元のオブジェクトを参照する
var Monster = function(name, hp, attack){
this.name = name;
this.hp = hp;
this.attack = attack;
this.doAttack = function(){
console.log(this.name + 'は' + this.attack + 'のダメージを与えた');
}
}
// なので、newすれば、インスタンスがthisの参照先になる
var babaa = new Monster('ババァ', 9999, 8000);
var jijii = new Monster('ジジィ', 100, 1);
console.log(babaa.doAttack());
console.log(jijii.doAttack());

// こう作ってるのと動きは同じになる（prototypeの中身が違ったりinstanceofの判定が違ったりと実際の中身は違う）
var babaa = {
name :'ババァ',
hp : 9999,
attack : 8000,
doAttack : function(){
console.log(babaa.name + 'は' + babaa.attack + 'のダメージを与えた');
}
};
var jijii = {
name : 'ジジィ',
hp : 100,
attack : 1,
doAttack : function(){
console.log(jijii.name + 'は' + jijii.attack + 'のダメージを与えた');
}
};
console.log(babaa.doAttack());
console.log(jijii.doAttack());

// jsではコンストラクタはただの「関数」

// 関数内で呼び出すthisは呼び出し元のオブジェクトを参照する

var Monster = function(name, hp, attack){

this.name = name;

this.hp = hp;

this.attack = attack;

this.doAttack = function(){

console.log(this.name + 'は' + this.attack + 'のダメージを与えた');

}

// なので、newすれば、インスタンスがthisの参照先になる

var babaa = new Monster('ババァ', 9999, 8000);

var jijii = new Monster('ジジィ', 100, 1);

console.log(babaa.doAttack());

console.log(jijii.doAttack());

// こう作ってるのと動きは同じになる（prototypeの中身が違ったりinstanceofの判定が違ったりと実際の中身は違う）

var babaa = {

name :'ババァ',

hp : 9999,

attack : 8000,

doAttack : function(){

console.log(babaa.name + 'は' + babaa.attack + 'のダメージを与えた');

}

};

var jijii = {

name : 'ジジィ',

hp : 100,

attack : 1,

doAttack : function(){

console.log(jijii.name + 'は' + jijii.attack + 'のダメージを与えた');

}

};

console.log(babaa.doAttack());

console.log(jijii.doAttack());

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。