[자바스크립트] new person() 과 person()의 차이. 생성자와 window

function person(name, age){
    this.name = name;
    this.age = age;
this.hello = function (){
    console.log(`hi ny name is ${this.name}`);

}



}

console.log( new person('eunsuk',2));
console.log( person('eunsuk',2));

왜 두개가 출력되는게 달라?

 

 

예제 코드에서 new person('eunsuk',2)는 생성자 함수를 사용하여 새로운 객체를 생성하고 반환하며, person('eunsuk',2)는 생성자 함수를 호출하는 일반적인 함수 호출입니다.

new person('eunsuk',2)는 person 함수 내부의 this를 새로운 객체로 지정하고, name과 age 속성을 해당 객체에 할당합니다. 그리고 hello 메서드도 새로운 객체의 메서드로 추가됩니다. 이후 new 연산자에 의해 생성된 객체가 반환되므로, console.log( new person('eunsuk',2)); 구문은 새로운 객체를 출력합니다.

하지만 person('eunsuk',2)는 생성자 함수를 호출하는 일반적인 함수 호출입니다. 이 경우 this는 전역 객체인 window를 가리키게 됩니다. 그리고 name과 age 속성은 window 객체의 속성으로 할당되며, hello 메서드는 생성되지 않습니다. 이후 console.log( person('eunsuk',2)); 구문은 undefined를 출력합니다.

따라서 생성자 함수를 호출할 때는 new 연산자를 사용해야 하며, 그렇지 않을 경우 일반적인 함수 호출로 인식되어 예상하지 않은 결과를 초래할 수 있습니다.

 

 

window는 웹 브라우저에서 전역 객체(Global Object)로 사용되는 객체입니다. 자바스크립트 코드를 실행하면 모든 변수와 함수가 전역 객체에 등록되며, 전역 객체는 이들을 프로퍼티(property)로 관리합니다.

window 객체는 자바스크립트 코드에서 별도로 정의하지 않아도 항상 존재합니다. 따라서 전역 객체에 포함된 변수와 함수는 window 객체를 명시하지 않고도 바로 참조할 수 있습니다.

예를 들어, var x = 10;과 같은 코드는 전역 변수 x를 정의합니다. 이 변수는 window 객체의 프로퍼티로 등록되며, window.x와 같이 참조할 수 있습니다.

또한, setTimeout()과 같은 메서드도 window 객체의 메서드로 등록됩니다. 이 메서드를 사용하여 지정된 시간 이후에 함수를 실행할 수 있습니다.

window 객체는 브라우저 창의 전체적인 동작을 제어하는 데에 사용됩니다. 브라우저 창의 크기, 위치, 주소 표시줄 등의 정보는 window 객체의 프로퍼티로 제공되며, 이를 이용하여 웹 페이지를 동적으로 제어할 수 있습니다.