programming

javascriptのclassとprototype
p5.js

//class
var ball1;
var ball2;
var gravity = 0.3;

function setup() {
createCanvas(300, 300);
ball1 = new Ball(100,20,20);
ball2 = new Ball(200,40,40);
}

function draw() {
background(220);
ball1.display();
ball2.display();
ball1.update();
ball2.update();
}

function Ball(tempX, tempY, tempW) {
this.x = tempX;
this.y = tempY;
this.w = tempW;
this.speed = 0;

this.display = function() {
fill(100);
// stroke(0);
noStroke();
ellipse(this.x,this.y,this.w,this.w);
}

this.update = function() {
this.y = this.y + this.speed;
this.speed = this.speed + gravity;
if (this.y > height) {
this.speed = this.speed * -0.91;
}
}
}

preview

///////////////////////////////////////
//prototype1
//prototypeを使うと関数は無駄に生成されていません
var ball1;
var ball2;
var gravity = 0.3;

function setup() {
createCanvas(300, 300);
ball1 = new Ball(100,10,20);
ball2 = new Ball(200,30,40);
}

function draw() {
background(220);
ball1.display();
ball2.display();
ball1.update();
ball2.update();
}

function Ball(tempX, tempY, tempW) {
this.x = tempX;
this.y = tempY;
this.w = tempW;
this.speed = 0;

}

Ball.prototype.display = function(){
fill(100);
noStroke();
ellipse(this.x,this.y,this.w,this.w);
}

Ball.prototype.update = function(){
this.y = this.y + this.speed;
this.speed = this.speed + gravity;
if (this.y > height) {
this.speed = this.speed * -0.91;
}
}

preview

///////////////////////////////

prototype2

var ball1;
var ball2;
var gravity = 0.3;

function setup() {
var myCanvas = createCanvas(300, 300);
ball1 = new Ball(100,10,20);
ball2 = new Ball(200,30,40);
}

function draw() {
background(220);
ball1.display();
ball2.display();
ball1.update();
ball2.update();
}

function Ball(tempX, tempY, tempW) {
this.center = {
x: tempX,
y: tempY,
w: tempW
};
this.speed = 0;
}

Ball.prototype.display = function(){
fill(100);
noStroke();
ellipse(this.center.x,this.center.y,this.center.w,this.center.w);
}

Ball.prototype.update = function(){
this.center.y = this.center.y + this.speed;
this.speed = this.speed + gravity;
if (this.center.y > height) {
this.speed = this.speed * -0.91;
}
}

preview

/////////////////////////////////

javascript prototype 継承 テスト1

// Person クラスの定義
function Person() {}

Person.prototype.walk = function() {
alert('I am walking!');
};
Person.prototype.sayHello = function() {
alert('hello');
};

// Student クラスの定義
function Student() {
// 親クラスのコンストラクタを呼び出す
Person.call(this);
}

// Person のメソッドを継承する
Student.prototype = Object.create(Person.prototype);

// Person を指しているコンストラクタのポインタを修正する
Student.prototype.constructor = Student;

// sayHello メソッドをオーバーライドする
Student.prototype.sayHello = function() {
alert('hi, I am a student');
};

// sayGoodBye メソッドを追加する
Student.prototype.sayGoodBye = function() {
alert('goodBye');
};

var student1 = new Student();
student1.sayHello(); //hi, I am a student
student1.walk(); //I am walking!
student1.sayGoodBye(); //goodBye

preview

///////////////////////////////////

javascript prototype 継承 テスト2

// Person クラスの定義
function Person(name, age) {
this.name = name;
this.age = age;
}

Person.prototype.walk = function() {
alert('I am walking!'+' '+ this.name);
};
Person.prototype.sayHello = function() {
alert('hello'+ ' '+this.age);
};

// Student クラスの定義
function Student(name, age, jobTitle) {
this.jobTitle = jobTitle;
this.uber = Person.prototype; // Personのプロトタイプを保存
// 親クラスのコンストラクタを呼び出す
Person.call(this, name, age);
}

// Person のメソッドを継承する
Student.prototype = Object.create(Person.prototype);

// Person を指しているコンストラクタのポインタを修正する
Student.prototype.constructor = Student;

// sayHello メソッドをオーバーライドする
Student.prototype.sayHello = function() {
this.uber.sayHello.call(this); //そのまま呼び出す
// alert('hi, I am a student'+ this.age + this.age);
};

// sayGoodBye メソッドを追加する
Student.prototype.sayGoodBye = function() {
alert('goodBye'+' ' +this.jobTitle);
};

var student1 = new Student('tama',20,'qa');
student1.sayHello(); //hello 20
student1.walk(); //I am walking! tama
student1.sayGoodBye(); //goodBye qa


preview