중요한 자바스크립트 개념

1. 프로토타입

프로토타입은 JavaScript 객체가 서로 기능을 상속하는 메커니즘입니다. 프로토타입은 JavaScript에서 기본적으로 모든 함수 및 객체와 연결되는 객체로, 여기서 함수의 프로토타입 속성은 액세스 및 수정할 수 있으며 객체의 프로토타입 속성은 표시되지 않습니다.

프로토타입의 활용

function Bike(model, color) {
 this.model = model;
 this.color = color;

 this.getDetails = function () {
  return this.model + ' bike is ' + this.color;
 };
}
var bikeObj1 = new Bike('BMW', 'BLACK');
var bikeObj2 = new Bike('BMW', 'WHITE');

function Bike(model, color) {
 this.model = model;
 this.color = color;
}
Bike.prototype.getDetails = function () {
 return this.model + ' bike is ' + this.color;
};
var bikeObj1 = new Bike('BMW', 'BLACK');
var bikeObj2 = new Bike('BMW', 'WHITE');

장점

객체 생성자에서 메소드를 정의하면 객체의 모든 인스턴스에서 메소드가 정의됩니다. 메소드를 프로토타입에 정의하면 한 번만 정의되고 객체의 모든 인스턴스에 액세스할 수 있습니다. 메모리에 한 번만 저장됩니다.

2. 범위

범위는 런타임 동안 코드의 일부 특정 부분에 있는 변수, 함수 및 개체의 액세스 가능성입니다. 즉, 범위는 코드 영역에서 변수 및 기타 리소스의 가시성을 결정합니다. 범위의 두 가지 유형은 로컬 및 글로벌입니다.

전역 변수는 블록 외부에서 선언됩니다.

지역 변수는 블록 내부에서 선언됩니다.

범위의 사용

글로벌 범위

function someFunction() {
  // Local Scope #1

  function someOtherFunction() {
    // Local Scope #2
  }
}

로컬 범위

function anotherFunction() {
  // Local Scope #3
}

어휘 범위

function grandfather() {
  var name = 'Hammad';
  // likes is not accessible here

  function parent() {
    // name is accessible here
    // likes is not accessible here

    function child() {
      // name is also accessible here
      var likes = 'Coding';
    }
  }
}

var, let 및 const

if 및 switch 조건이나 for 및 while 루프와 같은 블록 문은 함수와 달리 새 범위를 만들지 않습니다. 블록 문 내부에 정의된 변수는 이미 있던 범위에 남아 있습니다. ECMAScript 6에는 let 및 const 키워드가 도입되었습니다. var 키워드와 달리 let 및 const 키워드는 블록 문 내에서 로컬 범위 선언을 지원합니다.

if (true) {
  // this 'if' conditional block doesn't create
a new scope

  var name = 'Hammad';
  // name is still in the global scope
}


var name = 'Hammad';
let likes = 'Coding';
const skills = 'Javascript and PHP';

if (true) {
   // this if conditional block doesn't create a scope

   // name is in the global scope because of the var keyword
   var name = 'Hammad';

   // likes is in the local scope because of the let keyword
   let likes = 'Coding';

   // skills is in the local scope because of the const keyword
   const skills = 'JavaScript and PHP';
}

console.log(name); // 'Hammad'
console.log(likes); // Uncaught ReferenceError: likes is not defined
console.log(skills); // Uncaught ReferenceError: skills is not defined

질문

결과는 무엇입니까?

for (var i = 0; i < 5; i++) {
 setTimeout(function () {
  console.log(i);
 }, i * 1000);
}

//answer: 5 5 5 5 5

결과는 무엇입니까?

for (let i = 0; i < 5; i++) {
 setTimeout(function () {
  console.log(i);
 }, i * 1000);
}

//answer: 0 1 2 3 4

3. 폐쇄

클로저는 함께 묶인 함수의 조합입니다.
(동봉) 주변 상태(어휘적 환경)에 대한 참조와 함께. 즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 액세스를 제공합니다. JavaScript에서 클로저는 함수 생성 시 함수가 생성될 때마다 생성됩니다.

어휘 범위

function init() {
 var name = 'Mozilla';
 // name is a local variable created by init

 function displayName() {
  // displayName() is the inner function, a
closure
  console.log(name);
 }

 displayName();
}

init();

폐쇄

function makeFunc() {
 var name = 'Mozilla';

 function displayName() {
  console.log(name);
 }

 return displayName;
}

var myFunc = makeFunc();
myFunc();

루프에서 클로저 만들기: 흔한 실수

function showHelp(help) {
 document.getElementById('help').textContent = help;
}

function setupHelp() {
 var helpText = [
  {'id': 'email', 'help': 'Your e-mail address'},
  {'id': 'name', 'help': 'Your full name'}
 ];

 for (var i = 0; i < helpText.length; i++) {
  var item = helpText[i];
  document.getElementById(item.id).onfocus = function() {
   showHelp(item.help);
  }
 }
}

setupHelp();

function showHelp(help) {
 document.getElementById('help').textContent = help;
}

function makeHelpCallback(help) {
 return function() {
  showHelp(help);
 };
}

function setupHelp() {
 var helpText = [
  {'id': 'email', 'help': 'Your e-mail address'},
  {'id': 'name', 'help': 'Your full name'},
 ];

 for (var i = 0; i < helpText.length; i++) {
  var item = helpText[i];
  document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
 }
}

setupHelp();

4. 게양

호이스팅은 코드 실행 전에 변수 및 함수 선언이 해당 범위의 맨 위로 이동되는 JavaScript 메커니즘입니다. 호이스팅의 엄격한 정의
변수 및 함수 선언이 물리적으로 코드의 맨 위로 이동되는 것을 제안하지만 이것은 그렇지 않습니다.
사실 무슨 일이 일어나는지. 대신 변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만 코드에서 입력한 위치는 그대로 유지됩니다.

function catName(name) {
 console.log(name);
}
catName("Tiger");
// Tiger

catName("Chloe");
function catName(name) {
 console.log(name);
}
// Chloe

// JavaScript only hoists declarations, not initializations.
console.log(num); // undefined:
var num = 6; // Declaration and Initialization

console.log(num); // ReferenceError exception
num = 6; // Initialization

a = 1; // Initialization
let a; // ReferenceError: Cannot access 'a' before initialization

a = 1; // Initialization
const a; // SyntaxError: Missing initializer in const declaration

5. 적용, 호출, 바인딩

용법

var obj = {
 num: 2;
};
var add = function (num2, num3, num4) {
 return this.num + num2 + num3 + num4;
};

// Call method
console.log(add.call(obj, 3, 4, 5)); // Output: 14

// Apply method
console.log(add.apply(obj, [3, 4, 5])); // Output: 14

// Bind Method
var bound = add.bind(obj);
console.log(bound(3, 4, 5)); // Output: 14

읽어 주셔서 감사합니다!