posted by Full-stack Developer 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