내일배움캠프 AI - 52일차 TIL, 2022.11.14

스파르타 코딩클럽 내일배움캠프 AI 웹개발자양성과정 3회차

2022.11.14. 52일차 - TIL

 

 

1. JS 거북이반

1) this : this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라 그 역할이 구분된다.

• 일반 함수 실행 방식(Regular Function Call) : Global Object를 지칭, 즉, 브라우저 상에서는 window 객체를 의미한다. 

//example1
function foo() {
	console.log(this);
}

foo();  // 일반 함수 실행 방식, this는 글로벌 객체, 브라우저 상에서 window 객체를 가리킴


//example2
let name = 'Julia';  // 전역변수 name, 전역 객체인 window에 속성으로 추가
function foo() {
	console.log(this.name);  // window.name과 동일
}

foo();


//example3
let age = 100;  // 전역변수 age

function foo() {
	let age = 99;  // 지역변수 age
    bar(age);  //일반 함수 실행 방식
}

function bar() {
	console.log(this.age);  //this.age는 window.age를 가리킴(전역변수 age)
}

foo();


//example4
'use strict';  //Strict mode에서 일반 함수 실행

let name = 'Julia';

function foo() {
	console.log(this.name);  //strict mode에서 this는 무조건 undefined, 따라서 error 출력
}

foo();

• 도트 표기법(Dot Notation) : 직접 Object를 만들고 key와 value를 부여한 후 도트(.)로 값에 접근하는 방식

//example1
let age = 100;

let ken = {  //ken 변수에 Object 생성
	age: 35,
    foo: function() {
    	console.log(this.age);  // this는 도트 앞에 써있는 객체 자신, this.age는 ken.age와 동일
    }  //결국 이 함수는 ken.foo()로 실행되기에 this는 ken이 됨
}
ken.foo();


//example2
function foo() {
	console.log(this.age);
}
let age = 100;  //전역변수 age
let ken = {  //ken 객체 선언
	age: 36,
    foo: foo
}
let wan = {  //wan 객체 선언
	age: 32,
    foo: foo
}
ken.foo();  //foo함수는 Dot Notation 방식으로 실행
wan.foo();  //this는 ken, wan 객체 자체

let fn = ken.foo;
fn();  // 일반 실행 함수 방식, this는 global object -> 100출력

• 명백한 바인딩(Explicit Binding) : this의 역할을 우리가 직접 명확하게 지정 -> function.prototype.call, function.prototype.bind, function.prototype.apply 메소드 이용

//example1	
let age = 100;
function foo() {
  console.log(this.age);
}
let ken = {
  age: 35,
  log: foo
}
 
foo.call(ken, 1, 2, 3);  //call 메소드를 사용해 ken을 this로 지정


//example2
let age = 100;
function foo() {
	console.log(this.age);
}
let ken = {
	age: 35,
    log: foo
}
foo.apply(ken, [1, 2, 3, 4, 5]);  //apply 메소드가 ken을 this로 지정, 배열을 foo 인자로 전달

• new 키워드를 사용한 함수 실행 : this는 빈객체

//example1
function Person() {
	console.log(this);  //this라는 빈 객체를 return
}  // 생성자 함수는 return 문이 없어도 객체를 return

new Person();  //new 키워드를 사용한 Person 함수 생성


//example2
function Foo() {
	console.log(this.age);  //undefined
    this.age = 100;  //빈 객체에 속성 추가
    console.log(this.age);  //100 출력
}

new Foo();  //new 키워드를 사용한 Foo 함수 생성


//example3
function Person() {
	this.name = 'ken';  //this는 빈 객체를 생성해 'name'이란 key와 'ken'이란 value를 할당
    console.log(this);  //return문이 없어도 해당 객체 return
    //{name: "ken"}이라는 객체가 할당되어 이 객체를 return
}

let ken = new Person();
console.log(ken);