160106P(수)

JavaScript

객체지향 프로그래밍(Object-Oriented Programming)

좀 더 나은 프로그램을 만들기 위한 프로그래밍 패러다임으로 로직을 상태(state)와 행위(behave)로 이루어진 객체로 만드는 것

 

설계

좋은 객체를 만드는 과정

좋은 설계는 현실을 잘 반영해야 하며, 현실의 복잡함이 전체가 필요한 것은 아니다.

 

객체 지향은 부품화의 정점

 

객체

서로 연관된 변수와 함수를 그룹핑 한 그릇

변수 = property

함수 = method

 

1.

var person = {}
person.name = 'egoing';
person.introduce = function(){
    return 'My name is ' + this.name;
}
document.write(person.introduce());

2.

var person = {
    'name' : 'egoing',
    'introduce' : function(){
        return 'My name is '+this.name;
    }
}
document.write(person.introduce());

 

생성자(constructor)

자바스크립트는 생성자의 역할을 함수가 한다.

 

function Person(name){
    this.name = name;
    this.introduce = function(){
        return 'My name is ' + this.name;
    }  
}

var p1 = new Person('egoing');
document.write(p1.introduce()+"<br />");
 
var p2 = new Person('leezche');
document.write(p2.introduce());

전역객체(Global object)

특수한 객체로서 모든 전역변수와 함수, 객체는 전역객체의 프로퍼티이다.

 

function func(){
    alert('Hello?');   
}
func();
window.func();

편의를 위해서window를 생략

웹브라우저에서 전역객체는 window이지만 node.js에서는 global이다. 

 

this

함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다.

 

function func(){
    if(window === this){
        document.write("window === this");
    }
}
func();

 

생성자는 빈 객체를 만든다.

this는 만들어진 객체를 가르킨다.

생성자가 실행되기 전까지는 객체는 변수에도 할당될 수 없기 때문에 this가 아니면 어떠한 작업도 할 수 없다.

 

var funcThis = null;
 
function Func(){
    funcThis = this;
}

var o1 = Func();
if(funcThis === window){
    document.write('window <br />');
}
 
var o2 = new Func();
if(funcThis === o2){
    document.write('o2 <br />');
}

apply, call

이를 사용하면 this값을 제어할 수 있다.

 

var o = {}
var p = {}
function func(){
    switch(this){
        case o:
            document.write('o<br />');
            break;
        case p:
            document.write('p<br />');
            break;
        case window:
            document.write('window<br />');
            break;         
    }
}
func();
func.apply(o);
func.apply(p);

상속(inheritance)

function Person(name){
    this.name = name;
}

Person.prototype.name = null;
Person.prototype.introduce = function() {
    return 'My name is ' + this.name;
}
 
function Programmer(name){
    this.name = name;
}

Programmer.prototype = new Person();
Programmer.prototype.coding = function(){
    return "hello world";
}
 
var p1 = new Programmer('egoing');
document.write(p1.introduce()+"<br />");
document.write(p1.coding()+"<br />");

prototype

객체와 객체를 연결하는 체인 역할

prototype chain

 

function Ultra(){}
Ultra.prototype.ultraProp = true;
 
function Super(){}
Super.prototype = new Ultra();
 
function Sub(){}
Sub.prototype = new Super();
 
var o = new Sub();
console.log(o.ultraProp);

1. 객체 o에서 ultraProp를 찾는다.
2. 없다면 Sub.prototype.ultraProp를 찾는다.
3. 없다면 Super.prototype.ultraProp를 찾는다.
4. 없다면 Ultra.prototype.ultraProp를 찾는다.

 

표준 내장 객체(Standard Built-in Object)

자바스크립트가 기본적으로 가지고 있는 객체

 

Object
Function
Array
String
Boolean
Number
Math
Date
RegExp

Array.prototype.rand = function(){
    var index = Math.floor(this.length*Math.random());
    return this[index];
}
var arr = new Array('seoul','new york','ladarkh','pusan', 'Tsukuba');
console.log(arr.rand());

Object 객체

객체의 가장 기본적인 형태이며 아무것도 상속받지 않는 순수 객체

따라서 모든 객체가 접근할 수 있는 API를 만들 수 있다.

 

Object.prototype.contain = function(neddle) {
    for(var name in this){
        if(this[name] === neddle){
            return true;
        }
    }
    return false;
}

var o = {'name':'egoing', 'city':'seoul'}
console.log(o.contain('egoing'));

var a = ['egoing','leezche','grapittie'];
console.log(a.contain('leezche'));

하지만 Object객체는 확장하지 말 것.

모든 객체에 영향을 준다.

 

for(var name in o){
    console.log(name); 
}

결과로 name뿐만 아니라 contain도 출력

 

hasOwnProperty()로 해결가능

프로퍼티의 해당 객체의 소속인지를 체크

prototype으로 상속 받은 객체라면 false 리턴

 

for(var name in o){
    if(o.hasOwnProperty(name))
        console.log(name); 
}