03_JS_객체

객체 (object)

 

함수,클래스는 결국 '틀'이라 생각할 수 있고, 직접 사용하려면 객체를 생성해야 한다!

 

function A() {}

const a = new A(); 

console.log(a,typeof a); //객체를 생성함

console.log(A()); //함수를 그냥 실행하고 return을 받아옴

즉, 함수를 객체나 객체의 인자로 자유로이 사용이 가능하다는 것이다.

 

function A() {
    this.name = 'mingyu';
}

const a = new A();

console.log(a); //A {name: 'mingyu'}


function B() {
    this.hello = function () {
        console.log('hello');
    }
    this.name = 'mingyu'
}

const b = new B();
b.hello(); //hello
console.log(b.name); //mingyu

위 예제를 보면 함수가 마치 클래스처럼 작용하느걸 알 수 있는데 이것이 JS의 가장 중요한 속성중 하나라고 생각하면 될 것 같다.

 

 

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 : ' mingyu'});

console.log(c,typeof c);

위에서 이미 사용했지만, 가장 기본적인 객체 생성법이라고 생각하면 될 것 같다.

 

프로토타입 체인(.prototype)

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

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

const p = new Person('mingyu',24)
p.hello(); //hello mingyu 24
console.log(p.toString()); //[object Object]

console.log(Person.prototype);
console.log(Person.prototype.toString);
console.log(Person.prototype.constructor);
 console.log(Person.hello); // 객체로 생성되어야지만 사용 가능

분명 prototype이나 다른 것들은 뭔가 설정한적이 없는데 함수로 나오는것을알 수 있다.

hello는 객체로 생성되지 않아서 사용할 수 없다.

 

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

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

const p = new Person('mingyu',24)
p.hello(); //hello mingyu 24
console.log(p.toString()); //[object Object]

console.log(Person.prototype);
console.log(Person.prototype.toString);
console.log(Person.prototype.constructor);
console.log(Person.prototype.hello); // 객체로 생성되어야지만 사용 가능

console.log(Object.prototype);
console.log(Object.prototype.toString);
console.log(Object.prototype.constructor);

console.log(p instanceof Person);
console.log(p instanceof Object);

즉, 다시말하면 p는 Person이란 생성자에서 생성이 되었는데 그 Person은 Object에서 prototype chain을 전수받은 후에 내가 설정한 함수나 변수들을 넣을 수 있는 것이다.

 

조금 더 쉽게 보자

 

function Person(){

}

Person.prototype.hello = function(){
    console.log('mingyu');
}

function Korean(region) {
    this.region = region;
    this.where = function(){
        console.log('where',this.region);
    };
}

Korean.prototype = Person.prototype;

const k = new Korean('Incheon');

k.hello();
k.where();

console.log(k instanceof Korean);
console.log(k instanceof Person);
console.log(k instanceof Object);

 

즉, Korean의 prototype chain은 Person이 가지고 있고 그 Person의 prototype chain은 모든 객체의 위인 Object에서 따오는 형식이라고 생각하면 될 것 같다.

 

 

객체 리터럴

 

const a = {};

console.log(a,typeof a);

const b = {
    name : 'mingyu',
};

console.log(b, typeof b);

const c = {
    name : 'mingyu',
    hello(){
        console.log('mingyu',this.name);
    },
    hello2 : function () {
        console.log('mingyu2',this.name);
    },
    hello3 : () => {
        console.log('mingyu3',this.name);
    },
};

c.hello(); // mingyu mingyu
c.hello2();// mingyu2 mingyu
c.hello3();// mingyu3 undefined

객체를  {} 로 바로 선언할 수 있는 방법이다. 이때 주의할 점은 arrow기능을 쓰면 this를 사용할 수 없다는 점을 유의하고 넘어가면 될 것 같다.

 

표준 내장 객체

const a = new Array('red', 'black', 'white');

console.log(a,typeof a); //['red', 'black', 'white'] object
console.log(a instanceof Array); //true
console.log(a instanceof Object); //true

const b = ['red', 'black', 'white']
console.log(b,typeof b); //['red', 'black', 'white'] object
console.log(b instanceof Array); //true
console.log(b instanceof Object); //true

console.log(b.slice(0,1)); //['red']
console.log(Array.prototype.slice,Object.prototype.slice); //ƒ slice() undefined

즉, array형으로 객체를 만들면 array의 prototype을 사용할 수 있다는 말이다.

 

자 여기까지 생각해보면 이해가 잘 안될 수 있는데, 쉽게생각해서 내가 객체를 생성하면 Object라는 큰 객체의 기본적인 속성들을 다 가지고오기 때문에 객체의 성질들을 다 쓸 수 있는 것이다. 그 중에서 Array등의 내장 객체를 사용하면 조금 더 특색있는 객체의 형식을 쉽게 사용할 수 있는 거라 생각하면 될 것 같다.

 

이해하는데 조금 어려웠고 문법이 다 조금씩 달라 적응하는데 시간은 걸리겠지만 차근차근 따라가니 이해가 되긴 했다... 착각일수도 있겠다.