자바스크립트 - 객체(Object)

정영찬·2022년 2월 5일

자바스크립트

목록 보기

11/21

생성자 함수로 객체 만들기

//생성자 함수
function A() {

}

const a = new A();
console.log(a, typeof a); // A {} object

console.log(A()); // undefined

//생성하면서 데이터 넣기

function B(name, age) {
    console.log(name, age);
}

const b = new B(); //undefined undefined
const c = new B('yeongchan', 28); //yeongchan 28
console.log(B()); //인자가 정의되지 않았으므로 undefined undefined, return 값도 없으므로 다시 undefined를 출력

// new Object

const a = new Object();

console.log(a, typeof a);

const b = new Object(true);

console.log(b, typeof b);

const c = new Object({
    name: "yeongchan"
});

console.log(c, typeof c);

prototype

-자바스크립트 객체는 Prototype 이라는 내부 프로퍼티가 존재한다. 거의 모든 객체가 생성 시점에 이 프로퍼티에 null이 아닌 값이 할당된다.

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.hello = function () {
        console.log('hello', this.name, this.age);
    };
}

const p = new Person('Mark', 37);
p.hello();

console.log(p.toString()); // [object Object]
console.log(Person.prototype); // {}

위의 코딩에서 맨 아래의 두 줄의 경우 나는 toString() 과 prototype 이라는 프로퍼티를 만든 적이 없는데 구현이 된다.... 왜?

함수를 정의하면 함수만 생성되는 것이 아니라 Prototype Object 도 같이 생성이 되기 때문이다.
Prototype Object는 기본속성으로 constructor 와 proto를 가지고 있다.(디테일하게 말하면 Person.prototype 객체가 프로토타입을 의미하는 것은아니다. constructor도 있으니까)
- constructor는 내가 선언한 생성자 함수(Person)를 가리킨다. new 키워드와 함께 함수를 호출할 경우 constructor함수를 실행하고 부수효과로 객채가 생성된다.
생성자함수가 아니라 함수를 생성하는 호출이라고 생각하는게 맞는 것.
- prototype은 생성자 함수에 정의한 모든 객체가 공유할 원형이다.
- proto는 [[Prototype]]링크이며 생성자 함수에 정의해두었던 prototype을 참조한다.

prototype 은 생성자 함수에 사용자가 직접 넣는거고, __proto__는 new를 호출할 때 prototype을 참조하여 자동으로 만들어진다.
생성자 함수에는 prototype 에, 생성자로부터 만들어진 객체에는 __proto__에 생성자의 prototype이 들어간다.

new Person()로써 만들어진 모든 객체(p)는 결국 Person.prototype객체와 내부적으로 [[Prototype]]링크로 연결된다.

다시말해서 p와 Person은 상오연결된 두개의 객체가 된다.

new 연산자

객체지향언어에서 클래스를 인스턴스화 하기 위해 new 연산자를 사용한다. 그리고 자바스크립트에서도 두개의 객체를 연결하기 위해 new연산자를 사용한다.

하지만 전자의 경우 클래스로부터 작동을 복사하여 새로운 객체를 만드는 것이고, 후자의 경우 복사 과정 없이 그저 두 객체를 연결한 것이 전부이다.
따라서 자바스크립트의 new 키워드는 우리가 흔히 아는 new키워드와 다르게 동작한다는걸 알 수 있다.

※ [[prototype]] 체계를 흔히들 프로퍼타입 상속이라고 부른다. 상속은 기본적으로 복사를 수반하지만, 자바스크립트는 객체 프로퍼티를 복사하지 않는다. 따라서 프로퍼타입 상속은 의미의 혼동을 줄수 있으므로 "위임"이야말로 자바스크립트 객체-연결 체계를 훨씬 더 정확하게 나타내는 용어라고 할 수 있다.

생성자

Person 앞에 new를 붙여 Person함수를 호출해서 객체가 '생성'되는 실습을 해봤기 때문에 Person이 생성자가 아니냐 라고 생각할 수도 있지만 Person은 함수이다.

함수는 생성자가 아니지만 new를 붙여서 호출하면 이 함수는 생성자 호출을 한다.
new키워드는 일반함수 호출도중에 원래 수행할 작업 외에 객체 생성이라는 잔업을 더 부과하는 지시자역할 인 셈.

앞에 new를 붙여 호출함 함수는 생성자이다. 단, new를 사용해서 호출할 때에만 해당한다.

객체와 객체를 연결해야하는 이유?

//this를 사용한 경우
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.hello = function () {
        console.log('hello', this.name, this.age);
    };
}

const p = new Person('Mark', 37);
p.hello();

console.log(p.toString()); // [object Object]
console.log(Person.prototype); //

//prototype을 사용한경우
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.hello = function () {
        console.log('hello', this.name, this.age);
    };
}



const p = new Person('Mark', 37);
p.hello();

console.log(p.toString()); // [object Object]
console.log(Person.prototype); //