JavaScript/Basic-Javascript (25) 썸네일형 리스트형 자바스크립트 정리하며 배우기[25] - This[4] : call 과 apply 메서드를 이용한 명시적인 this 바인딩 안녕하세요. Tay 입니다. 이제까지 호출 방식에 따라서 바인딩 되는 this 를 확인해봤습니다. 이번에는 명시적으로 this 바인딩을 지정하는 방법에 대해서 알아보겠습니다. apply 메서드 function.apply(thisArg, argArray); thisArg : 함수 내부에서 사용한 this 에 바인딩 할 객체 argArray : 함수 호출시 넘길 인자들 배열 1) index.html 2) apply_call.js function Person(name, national, gender) { this.name = name; this.national = national; this.gender = gender; } let kim = {}; Person.apply(kim, ["geuntae", "kor.. 자바스크립트 정리하며 배우기[24] - This[3] : 생성자 함수에 new 를 붙이지않고 호출 할 경우 와 일반 함수에 new 를 붙여서 호출 할 경우 에러 안녕하세요. Tay 입니다. 일반 함수 호출과 생성자 함수 호출의 this 바인딩 방식이 다릅니다. 그렇다면, 일반 함수에 new 를 붙이고, 생성자 함수에 new 를 붙이지 않으면 어떻게 될지 알아보겠습니다. 생성자 함수를 new 를 붙이지 않고 호출 할 경우 생성자 함수는 new 키워드와 함께 호출해야한다. 1) index.html 2) err_const.js function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; } var kim = Person("geuntae", "22", "male"); console.log(kim); console.log(window); 생성자 함수 Person 을 .. 자바스크립트 정리하며 배우기[23] - This[2] : 생성자 함수를 호출할 때 this 바인딩 안녕하세요. Tay 입니다. this 개념의 2번째 이야기입니다. 생성자 함수를 호출할때 this 가 바인딩되는 것을 알아보겠습니다. 생성자 함수 자바스크립트의 객체를 생성하는 역할 기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작한다. 일반 함수에 new 를 붙이면 생성자 함수처럼 동작할 수 있으므로 주의 해야한다. 자바스크립트 스타일 가이드에서는 생성자 함수의 첫문자는 대문자로 작성하라고 한다. 생성자 함수를 호출할 때 this 바인딩 1) index.html 2) new_const.js new 생성자 함수 var Person = function(name) { console.log(Person.prototype); this.name = name; }; let kim = ne.. 자바스크립트 정리하며 배우기[22] - This[1] : 함수와 this, this 의 개념, this 와 that 안녕하세요. Tay 입니다. 자바스크립트에서 this 개념은 매우 중요합니다. 자바스크립트의 this 는 타 언어와 개념이 조금 다릅니다. 어떻게 보면 this 는 실행되는 흐름? 문맥? 이라고 볼 수 있습니다. this 함수 내부로 전달되어 호출한 객체를 참조하는 this 인자 호출 패턴에 따라서 다른 바인딩 호출 패턴에 따른 바인딩 1. 객체의 메서드 호출 할때 this 바인딩 1) index.html 2) obj_method.js let myObj = { name: "kim", sayName: function() { console.log(this.name); } }; let otherObj = { name: "lee" }; otherObj.sayName = myObj.sayName; myObj.sa.. 자바스크립트 정리하며 배우기[21] - Arguments : 유동적인 함수 만들기 안녕하세요. Tay 입니다. 함수를 호출할 때 암묵적으로 arguments 객체가 함수 내부로 전달됩니다. 이 arguments 객체를 잘 활용하면 유동적인 함수를 개발할 수 있습니다. Argument 함수 호출과 동시에 함수 내부로 전달되는 유사 배열 객체 1) index.html 2) arguments.js function func(arg1, arg2) { console.log(arg1, arg2); console.log(arguments); } func(2, 3, 4); func(1); console.dir(func); arg1, 2 인자들을 받는 함수 func 를 선언한다. func 함수는 log 로 arg1, 2 를 출력하고, 내부로 전달 된 arguments를 출력한다. 인자 (2, 3, 4).. 자바스크립트 정리하며 배우기[20] - 내부 함수(inner function) 안녕하세요. Tay 입니다. 함수의 내부에서 함수를 정의하는 것이 가능합니다. 그것을 내부함수 라고 합니다. 내부 함수(inner function) 함수 내부에 정의된 함수 1) index.html 2) inner.js function grand() { var a = 20; var b = 300; var c = 5000; function parent() { var a = 100; var b = 400; function child() { var b = 200; console.log(a); console.log(b); console.log(c); } child(); } parent(); } grand(); child(); grand 함수 안에 parent 함수 안에 child 함수를 선언했다. 결과 : gr.. 자바스크립트 정리하며 배우기[19] - 콜백 함수(callback) 안녕하세요. Tay 입니다. 콜백 함수에 대해서 알아보겠습니다. 콜백 함수 이벤트가 발생했거나 특정 시점에 도달했을때 호출되는 함수 1) index.html 2) callback.js function add(a, b, callback) { let result = a + b; callback(result); } add(3, 4, result => console.log(result)); 맨 마지막줄 add(3, 4, 함수) 의 함수가 콜백 함수이다. 인자값으로 3, 4, function(result){console.log(result)} 를 전달한다. add는 callback 함수변수로 받아서 callback(result)를 다시 실행 callback 함수가 실행될때 받은 result 로 console.lo.. 자바스크립트 정리하며 배우기[18] - 함수의 프로토타입(prototype property)과 constructor 안녕하세요. Tay 입니다. 함수의 프로토타입과 프로토타입의 컨스트럭쳐를 알아보겠습니다. 함수의 프로토타입 - prototype property 모든 함수는 객체로서 prototype 을 가지고 있다. - add function 구글 콘솔 창에 add function 을 바로 생성하고, dir 을 통해서 add 의 구조를 살펴보자. add 함수에는 여러 기본 프로퍼티와 prototype 프로퍼티, 모든 객체의 부모를 나타내는 내부 프로퍼티 prototype(__proto__) 가 있다. 함수의 prototype 과 __proto__ 는 다르다. 그 차이를 알아보자. 함수의 prototype 프로퍼티 와 constructor 함수의 프로토타입은 constructor 를 갖고있다. 그렇다면 이 constru.. 이전 1 2 3 4 다음
