TIL-JavaScript(객체,생성자와 new)

22.06.07

🎤 객체

객체란 서로 연관된 변수와 함수를 그룹핑한 그릇이라고 할 수 있습니다. 객체 내의 변수를 프로퍼티(property) 함수를 메소드(method) 라고 부릅니다. 아래의 예제는 객체를 만드는 과정입니다.

var person = {}   // 객체 생성(비어있는 객체) --> object라는 이름의 object를 만든다.
person.name = 'egoing';    // name은 변수(프로퍼티)
person.introduce = function(){      // 프로퍼티에 담겨있는 함수는 메소드라고 한다.(함수 안에 단기는 변수는 프로퍼티라고 하고, 변수에 담겨있는 값이 함수라면 메소드라고 한다.)
    return 'My name is '+this.name;
}
document.write(person.introduce());

객체를 만드는 과정에 분산되어 있습니다. 객체를 정의 할 때 값을 셋팅하도록 코드를 바꿔보도록 합시다.

var person = {
    'name' : 'egoing',
    'introduce' : function(){
        return 'My name is '+this.name;     // this는 실행문장을 정의한 함수의 객체--> person 변수가 담고 있는 객체 --> name은 egoing
    }
}
document.write(person.introduce());

만약, 다른 사람의 이름을 담을 객체가 필요한다면 객체의 정의를 반복해야 할 것입니다. 객체의 구조를 재활용할 수 있는 방법이 필요합니다. 이 때 사용하는 것이 생성자 입니다.

🎵 생성자와 new

생성자(constructor)는 객체를 만드는 역할을 하는 함수입니다. 자바스크립트에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 할 수 있습니다. 자바스크립트는 생성자가 클래스에 소속하지 않아서 생성자는 그냥 함수에 불과합니다. 그 함수에 new를 붙이면 그냥 객체를 만듭니다. --> 함수에 new를 붙이면 리턴값은 객체가 됩니다.

function Person(){}     // 평범한 함수
var p = new Person();   // new 붙이고 함수 호출하면 --> 함수가 아니라 생성자라 한다. (객체의 생성자) --> 비어있는 객체를 만들고 p에 반환
p.name = 'egoing';
p.introduce = function(){      // 프로퍼티에 익명함수를 넣게 되면 이 프로퍼티는 메소드라 불리게 됩니다. 
    return 'My name is '+this.name; 
}
document.write(p.introduce());

함수를 호출할 때 new를 붙이면 새로운 객체를 만든 후에 이를 리턴힙니다. 위의 코드는 새로운 객체를 변수 p에 담았습니다. 여러사람을 위한 객체를 만든다면 아래와 같이 코드를 작성해야 할 것입니다.

function Person(){}
var p1 = new Person();
p1.name = 'egoing';
p1.introduce = function(){
    return 'My name is '+this.name; 
}
document.write(p1.introduce()+"<br />");
 var p2 = new Person();
p2.name = 'leezche';
p2.introduce = function(){
    return 'My name is '+this.name; 
}
document.write(p2.introduce());

이 코드는 별로 개선된 것이 없다는 걸 볼 수 있습니다.

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());

생성자 내에서 이 객체의 프로퍼티를 정의하고 있습니다. 이러한 작업을 초기화(생성자가 객체에 대한 초기화 작업을 합니다.) 객체가 가지고 있는 정보, 그 객체가 할 수 있는 일을 셋팅하는 것을 초기화 또는 init(initialiize)라고 합니다. 이를 통해서 코드의 재사용성이 대폭 높아졌습니다. 코드를 통해서 알 수 있듯이 생성자 함수는 일반 함수와 구분하기 위해서 첫글자를 대문자로 표시합니다.

🎧 전역객체

전역객체(Global object)는 특수한 객체입니다. 모든 객체는 이 전역 객체의 프로퍼티입니다.

function func(){
alert("hello?");
}
func();      // hello? 가 경고창으로 출력된다.
window.func();    

.을 앞에 붙인 window가 객체고, .뒤에 있는 func가 속성을 의미합니다.
이 코드가 의미하는 것은 window라는 객체의 속성으로 fun()라는 함수, 즉 메소드가 있다는 뜻입니다. 사실, func()라는 함수는 window라는 객체의 메소드입니다.
다만 편의를 위해 window라는 전역 객체를 생략해도 내부적으로는 마치 window를 붙여놓은 것과 같이 동작합니다. window를 생략해도 내부적으로는 window를 명시한 것과 동일한 결과를 낳는다는 말입니다. 자바스크립트라는 프로그래밍 언어에서 모든 함수, 모든 변수는 그것이 전역 변수 혹은 전역함수라 할지라도, 사실 window라는 전역 객체의 속성들인 것입니다. 자바스크립트 언어는 객체의 모든 것이 소속 되어 있기 때문에 객체지향 언어라고 할 수 있습니다.

var o = {
    'func': function(){
         alert("hello?")    
}
}
o.func() 
window.o.func()

o라는 객체 또한 window 객체의 프로퍼티입니다.

🎹 전역객체 API

ECMAScript에서는 전역객체의 API를 정의해 두었습니다. 그 외의 API는 호스트 환경에서 필요에 따라 추가로 정의하고 있습니다. 웹 브라우저 자바스크립트에서는 Web api로 alert()라는 전역객체의 메소드가 존재합니다.

alert("hello?");
window.alert("hello?");