[220107] this와 new 그리고 arrow function

목차

1.   객체와 this의 차이점

2.   this로 객체만들기

3.   this의 역할과 응용

4.   class로 객체만들기

---

객체를 만드는 놀라운 기술을 배웠다!

이제 대량생산을 어떻게 쉽고 간단하게 만드는지 알아보자.

객체에 대해서 아래 블로그에 작성해놓았다.

https://hancoco.tistory.com/23

[220104] 배열과 객체 / create:function(), 객체 안에 객체or배열

---

객체란 붕어빵을 만드는 붕어빵 틀, this

!주의!

우선, 가볍게만 알자. 깊게 들어가면 내용이 상당히 방대해지니가 가볍게만 알아서 써먹고싶을때만 써먹자. 해수욕 가는데 바다에 물고기 살고 짠맛이 난다는것만 알면 되지, 바닷물 원소기호 알아서 뭐할거임. 얕은물에서만 참방참방 놀건데 마리화나 해구 어디있는지 알아서 뭐할거냐고. 손에 갖고 놀만큼만 알자.

 

this란?

자바스크립트에서만 존재하는 예약어이자 객체다.

그리고 this를 한마디로 말하자면, '이거'다.

어디에 붙는지 따라서 효과가 달라진다. 그래서 어딘가에 붙으면 손가락질하면서 외치는 애를 생각하면 된다. 얘!! 이거!! 어 이거야 이거!!

 

 

this가 가르키는 것

console.log(this)

엄청나게 길게 나오는 console.log(this)

console.log가 출력한 this. 아무것도 붙여놓지 않았는데 뭐가 이렇게 나오는걸까?

아무것도 만들어놓지 않았다면 딱 하나 남는게 있는데 그게 바로 브라우저다.

 

1. 왜? 자바스크립트로 만들어놓은 모든 코드가 실행되는 바닥이 브라우저니까.
2. 브라우저가 미리 함수를 만들어놓고 내꺼니까 쓰지마! 찜해놓음! 하고 티내는게 예약어니까.

그래서 this는 브라우저가 만들어놓은 내장객체이면서, 브라우저가 가지고 있는 객체를 보여줄 수 있는 것이다.

 

 

---

 

 

예시1.) 다음 3개의 객체를 this를 통해 만들기

// 이 객체를 만들기
{
    name:'ingoo'
    job='dev'
}
{
    name:'짱구'
    job='유치원생'
}
{
    name:'코난'
    job='탐정'
}

-----------------------

// 만드는 법
// 붕어빵틀
    function ingoo(name,job){
        this.name = name
        this.job = job
    }

// 새로운 객체를 만든다고 신호주는 new
// 붕어빵재료(인자들)을 넣음
new ingoo('ingoo', 'dev')
new ingoo('짱구', '유치원생')
new ingoo('코난', '탐정')

 

 

---

 

 

예시2.) this===window 특성

console.log(this.document)
// document 안의 객체를 보여줌

console.log(this.document.URL)
// document가 연결된 URL을 보여줌


-----------------------------

// 객체만들기
this.name="ingoo"
this.age=33

function a() { console.log(this.name) }
a()

 

 

이게 가능한 이유

console.log(this === window) //true
console.log(window)//this를 출력할때와 같은 결과

즉, 어떤 곳에도 속해있지 않은 this는 window와 같기때문에 무리없이 객체를 선언할 수 있는것.
심화과정 DOM으로 넘어가야함. 일단 이렇게 알아두기

 

 

---

 

this의 역할

function ab(){ this.name = "ingoo2" }
	/*
	아무것도 없는 상태에서 this를 선언하면 상위목록인 window를 바라보지만
	이렇게 함수 안에서 this를 선언하면 코드블럭에 막혀서 위에 있는 함수를 가르킴
	이게 함수에 this를 사용하는 유일한 이유.
	함수를 가르키는 객체를 만들기 위해서.
	*/


let aaa = { name:'ingoo' }
	/*
    이렇게해도 함수를 가르키는걸 만들 수 있는데 유일한 이유라고하는건 비약이 아닌가?
	-> 이름은 같은데 value 값만 달라지는 객체를 여러개 만들고 싶으면?
    -> 일일히 작성해야하는데 귀찮지? 그런 객체를 찍어내는 붕어빵 틀을 만드는게 목표
	*/

let a = new ab()
console.log(a)
// new는 객체를 만들어 주는 예약어

 

 

this의 응용 : 인자값을 다르게 넣고 객체 찍어내기

//인자값을 넣은 상태에서 객체를 만들 수 있는 붕어빵틀
function block(hash, height){
	this.hash=hash;
	this.timestamp=0230;
	this.height=height;
	this.Difficulty=9299;
	this.Nonce=323;
}

//새로운 공간에 값을 할당해서 만든 객체이므로 서로 같지 않다.
//let ab=new block() & let cd=new block() 이 둘은 다르다

//붕어빵 틀에 넣을 붕어빵재료(인자)
let a = new block('000001',1);
let b = new block('000002',2);
let c = new block('000003',3);

여기서 포인트! 같은 값을 넣고 같은 틀에 넣고 찍어낸 객체지만 서로 같지않다!

새로운 공간에 값을 할당해서 만들었기때문! 같은 조던신발이라도 시리얼 넘버가 다른걸 생각해보면 쉽다.

 

 

 

this의 응용 : 같은 블록이 아닌 값을 불러오기

let obj={
            name:'ingoo',
            
            getName:function() {
                /*
                object 안에 있는 name을 출력하고 싶을 때는?
                같은 블록이 아니라 해당블록 위에 있으니까 console.log(name) -> 출력 ㄴㄴ
                */
                
                console.log(this.name)
                /*
                해석하면, this는 상위 obj를 가르키고, 최종적으로는 obj.name을 가르키게 된다.
                객체를 조작하는데 최적화 되어있지만 다른 곳에서 사용하면 좀 난해해짐
                객체 안에서나 함수에서 new 키워드를 써야할때 사용하는게 가장 적합.
                */
            }
        }

 

 

---

 

class로 만드는 객체

function block(hash, height){
            this.hash=hash;
            this.timestamp=0230;
            this.height=height;
            this.Difficulty=9299;
            this.Nonce=323;

            this.sum = function(){
                console.log(this.hash + this.height)
            }
        }

        console.log(a.sum())
        
        

class Block2{
    constructor(hash, height){
        this.hash=hash;
        this.timestamp=timestamp;
        this.height=height;
    }

    sum(){
        console.log()
    }
}

d.sum()

class 함수는 위에 작성한 function block 함수와 같은 기능을 하며 객체를 만들어준다.

 

다른 점이라면

• 문법으로 만들었다
• ()이 없다.
• 인자값은 constructor (=선택자)를 통해 인자값을 전달받음.