2014. 3. 14. 17:59
Javascript OOP
참조
Object-Oriented JavaScript 소개 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#Encapsulation
Encapsulation : http://phrogz.net/JS/classes/OOPinJS.html
Class
function Person() { }
java에서 class Person(){}
c++에서 class Person(){};
Instance
방법1. new class명();
function Person() { }
var person1 = new Person();
var person2 = new Person();
방법2. Object.create(protoType [, propertiesObject ] )
// Shape - superclass
function Shape() {
this.x = 0;
this.y = 0;
}
// superclass method
Shape.prototype.move = function(x, y) {
this.x += x;
this.y += y;
console.info("Shape moved.");
};
// Rectangle - subclass
function Rectangle() {
Shape.call(this); // call super constructor.
}
// subclass extends superclass
Rectangle.prototype = Object.create(Shape.prototype);//or new shape();
Rectangle.prototype.constructor = Rectangle;
var rect = new Rectangle();
rect instanceof Rectangle // true.
rect instanceof Shape // true.
rect.move(1, 1); // Outputs, "Shape moved."
생성자
function Person() {
alert('Person instantiated');
}
var person1 = new Person();
var person2 = new Person();
클래스 맴버(속성)
function Person(gender) {
this.gender = gender;
alert('Person instantiated');
}
Person.prototype.gender = '';
var person1 = new Person('Male');
var person2 = new Person('Female');
//display the person1 gender
alert('person1 is a ' + person1.gender); // person1 is a Male
함수
function Person(gender) {
this.gender = gender;
}
Person.prototype.gender = '';
Person.prototype.sayGender = function () {
alert(this.gender);
};
var person1 = new Person('Male');
var genderTeller = person1.sayGender;
person1.sayGender(); // alerts 'Male'
genderTeller(); // alerts undefined
alert(genderTeller === person1.sayGender); // alerts true
alert(genderTeller === Person.prototype.sayGender); // alerts true
genderTeller.call(person1); //alerts 'Male'
person1의 sayGender()이 호출된다.
상속
// define the Person Class
function Person() {}
Person.prototype.walk = function(){
alert ('I am walking!');
};
Person.prototype.sayHello = function(){
alert ('hello');
};
// define the Student class
function Student() {
// Call the parent constructor
Person.call(this);
};
// inherit Person
Student.prototype = new Person();//or Object.create(Person.prototype);
// correct the constructor pointer because it points to Person
Student.prototype.constructor = Student;
// replace the sayHello method
Student.prototype.sayHello = function(){
alert('hi, I am a student');
};
// add sayGoodBye method
Student.prototype.sayGoodBye = function(){
alert('goodBye');
};
var student1 = new Student();
student1.sayHello();
student1.walk();
student1.sayGoodBye();
// check inheritance
alert(student1 instanceof Person); // true
alert(student1 instanceof Student); // true
Encapsulation(캡슐화)
function Person() {
//-- property --
//private property
var userId="";
//public property type one
this.weight="";
//public property type two - may be overridden
Person.prototype.job="";
//-- method --
//private method
function getUserId(){
return userId;
}
//protected method
this.eat=function(){
weight++;
}
//public method - may be overridden
Persone.prototype.workOut=function(){
weight--;
}
}
'Programming > Web Programming' 카테고리의 다른 글
JavaScript 개요 (0) | 2014.06.24 |
---|---|
webapp deploy in tomcat 7.0 (0) | 2014.04.16 |
javascipt Date객체 formatting yyyy-MM-dd hh:mm:ss (0) | 2014.01.13 |
jQuery - jQuery 시작하기 (0) | 2011.11.10 |
HTML - HTML 시작하기 (0) | 2011.11.08 |