TIL no.12

손병진·2020년 7월 27일
0

TIL

목록 보기
12/22
post-custom-banner

function

new 함수()

  • 생성자 함수
    생성자 함수로 사용되는 함수는 모두 function 키워드를 사용
function Person(name, age){
  	console.log(this);
	this.name = name;
  	this.age = age;
};

const p = new Person('Mark', 37);
console.log(p, p.name, p.age);
/* Person{}
Person{name:'Mark', age:37} 'Mark' 37 출력 */

const a = new Person('Anna', 26);
console.log(a, a.name, a.age);
/*Peson{}
Person{name:'Anna', age:26} 'Anna' 26 출력 */

const Cat = (name, age) => { // arrow function 에서는 this 생기지 않는다
	console.log(this);
  	this.name = name;
  	this.age = age;
};

const c = new Cat('냥이',1); 
/* error: Cat is not a constructor()
Cat 내에 this 없기 때문에 객체가 아니어서 불가 */

  • 함수 안에서 함수를 만들어 리턴
function plus(base){
	return function(num){
    	return base + num;
    };
};

const plus5 = plus(5); // base = 5
console.log(plus5(10)); // num = 10
// 15 출력(5 + 10 이라서)

  • 함수를 호출할 때, 인자로 함수를 사용
function hello(c){
	console.log('hello');
  	c(); // 인자가 실행될 자리를 마련
}

hello(function() { // c에 해당되는 함수
	console.log('콜백');
});
// hello 콜백 출력

object

함수, 클래스(틀) => 객체, 개체, object

  • function 틀() {} => new 틀() : 생성자 함수로 객체 만들기
function A() {}

const a = new A();
console.log(a, typeof a);// A {} object 출력
console.log(A());// undefined 출력(원래 return 값을 가져온다)

function B(name, age){
    console.log(name, age);
}
// 객체가 생성될때도 함수가 실행된다
const b = new B(); // undefined undefined 출력
const c = new B('Mark', 37);// Mark 37 출력
console.log(B());
/* undefined undefined undefined 출력
객체 생성으로 2개 찍히고, console 실행으로 1개 찍히고*/

객체에 속성 추가하기

// 값을 속성으로 넣기
function A(){
    this.name = 'Mark'; // this 객체를 의미
}
const a = new A();
console.log(a); // {name: 'Mark'} 출력

// 함수를 속성으로 넣기
function B(){
    this.hello = function(){
        console.log('hello');
    }
}
(new B()).hello(); // hello 출력
new B().hello(); // hello 출력(괄호 생략 가능)

new Object()

: Object 객체 만들기, 권장되는 방법은 아님

const a = new Object();
console.log(a, typeof a);
// {} object 출력
const b = new Object(true);
console.log(b, typeof b);
// [Boolean: true] object 출력
const c = new Object({name : 'Mark'});
console.log(c, typeof c);
// { name: 'Mark' } object 출력

프로토타입 체인

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('Mark', 37);
p.hello();// hello Mark 37 출력
console.log(p.toString());// [object Object] 출력

console.log(Person.prototype);// Person { hello: [Function] } 출력
console.log(Person.prototype.toString);// [Function: toString] 출력
console.log(Person.prototype.constructor);// [Function: Person] 출력
console.log(Person.prototype.hello);// [Function]

console.log(Object.prototype);// {}
console.log(Object.prototype.toString);// [Function: toString]
console.log(Object.prototype.constructor);// [Function: Object]

console.log(p instanceof Person);// true
console.log(p instanceof Object);// true 출력?!
/* p 객체는 Person 에서 나왔는데 Object 로부터
prototype 체인을 받아온 후에 설정한 hello 함수와 속성을 가지고 있다는 의미*/

프로토타입을 이용한 객체 확장

function Person(){}
Person.prototype.hello = function(){
    console.log('hello');
};
function Korean(region){
    this.region = region;
    this.where = function(){
        console.log('where', this.region);
    };
}
Korean.prototype = Person.prototype; // Person hello 함수를 가져올 수 있다
const k = new Korean('Seoul')

k.hello() // hello
k.where() // where Seoul

console.log(k instanceof Korean);// true
console.log(k instanceof Person);// true
console.log(k instanceof Object);// true
/* Korean 가장 근접한 관계
Person 내에 Object 로부터 받은 여러 prototype chain 존재*/

객체 리터럴

: 객체를 만들때 값을 직접 쓰는 방식

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

const b = {name: 'Mark'}
console.log(b, typeof b);// {name: 'Mark'} object

const c = {
    name: 'Mark',
    hello1(){
        console.log('hello1', this.name);
    },
    hello2: function(){
        console.log('hello2', this.name);
    },
    hello3: () => {
        console.log('hello3', this.name);
    }
}
c.hello1()// hello1 Mark
c.hello2()// hello2 Mark
c.hello3()// hello3 undefied (this 가져오지 못한다)

표준 내장 객체

: 이미 만들어져 있는 키워드(Object, new function etc)

Array

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','green','yellow'];// 리터럴 표현법으로도 생성 가능
console.log(b, typeof b);// ['red','green','yellow'] 'object'
console.log(b instanceof Array);// true
console.log(b instanceof Object);// true
// Array 내에 들어있는(프로토타입 체인) 함수 사용가능(slice)
console.log(b.slice(0,1));// ['red']
console.log(Array.prototype.slice)// [Fuction: slice]
console.log(Object.prototype.slice)// undefined
profile
https://castie.tistory.com
post-custom-banner

0개의 댓글