[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 10회차 미션

함수, 클래스 ( 틀 ) ⇒ 객체, 개체, oject

Oject는 함수 혹은 클래스로 틀을 만드는것을 의미하고 그 틀에서 object를 하나씩 찍어내게되고 이 것을 instance 라고 부른다

생성자 함수로 객체 만들기

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

new a를 통해 객체가 생성되어 a라는 변수에 할당되게 된다.

생성 하며 데이터 넣기

function B(name, age){
    console.log(name,age)
}
const b = new B();
const c = new B('jiwon', 25);
console.log(B());

new B();에 인자없이 생성자 함수를 호출할 경우 undefined가 name,age 자리에 각각 뜨게되고

console.log(B()); 는 인자를 넣지 않기 때문에 각 자리에 undefined가 출력되고 return 값 또한 없기 때문에 undefined가 뜨게된다.

객체에 속성 추가하기

값을 속성으로 넣기

function A(){
    this.name = 'jiwon',
}
const a = new A(); // {name : 'jiwon'}
console.log(a);

A라는 생성자함수를 통해 만들어진 객체를 확인할 수 있다.

함수를 속성으로 넣기

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

new B().hell();

객체에 함수가 들어간 형태

new Object()

자바스크립트에서 가장 기초가되는 객체

const a= new Object(); 

이 오브젝트를 통해 만들어진 변수는 객체가 된다.

const b = new Object(true);

boolean 이라는 생성자를 이용하여 true라는 값을 가진 object형의 객체가 나온다.

const c = new Object({name : 'jiwon'});

{name : 'jiwon'} 인자를 가진 객체가 생성됨

프로토타입 체인

function Person(name,age){
    this.name = name;
    this.age = age;
    this.hello = function(){
        console.log('hello', this.name, this.age);
    };
const p = new Person('jiwon',25);
p.hello(); // 예상한 결과 값이 나온다
console.log(p.toString()); // 정의하지 않았지만 값이 나오게됨
console.log(Person.prototype);
console.log(Person.prototype.toString);
console.log(Person.prototype.constructor);
console.log(Person.hello); // undefined 객체로 생성된 hello를 사용해야 정상출력되므로

prototype에 hello가 있는것이아니라 객체가 생성되고 그 객체에 바로 property로 hello가 할당 되었기 때문에

this.hello보다 더 내부에 있는 무언가가 되는것이다.

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

this.hello 구문을 삭제하고 Person.prototype.hello를 정의하고 사용해도 정상 작동하는것을 볼 수 있다.

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

을 출력해보면 function이라고 잘 뜨고 hello를 호출 했을때도 잘 나오는것을 확인할 수 있다. Object로 부터 프로토타입체인을 받아온 후에 설정한 함수의 프로퍼티를 가지고있게 되는것을 알 수 있다.

해당 내용은 아래 링크에서 수강할 수 있다.

프론트엔드 개발 올인원 패키지 with React Online. 👉https://bit.ly/2ETLEzm

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스