제3장: JS의 근원 발굴

프로그램은 기본적으로 데이터를 처리하고 데이터에 대해 결정을 내리기 위해 구축된 것이다.

점차적으로 데이터를 조회하는 데 사용되는 모델은 프로그램의 가독성에 큰 영향을 미친다.

번갈아

교체기 모델은 원본의 데이터를 한 번에 하나씩 사용할 수 있는 표준화된 방법을 제시했다.

교체기 모델은 교체기라는 데이터 구조를 정의했다. 이 구조는 밑바닥 데이터 원본(예를 들어 조회 결과 줄)에 대한 인용이 있고 넥스트()와 유사한 방법을 공개했다.다음 데이터 (즉 데이터베이스 조회의 '기록' 이나 '줄') 을 되돌려줍니다.

ES6는 교체기 모드의 특정 프로토콜을 언어에서 직접 표준화했다.이 프로토콜은 next() 방법을 정의했는데 그 반환은 교체기 결과라는 대상이다.이 대상은 value과done 속성을 가지는데 그 중에서done는 하나의 브리 값으로 기초 데이터 원본의 교체가 완성되기 전에 가짜이다.

이 next() 방법은 수동적이기 때문에 ES6에는 교체기 표준에 사용되는 몇 가지 API가 포함되어 있다.

소모 교체기

for..of 주기:

// given an iterator of some data source:
var it = /* .. */;

// loop over its results one at a time
for (let val of it) {
  console.log(`Iterator value: ${val}`);
}
// Iterator value: ..
// Iterator value: ..
// ..

보시다시피, 위의 코드는 모든 교체기 값을 하나하나 인쇄합니다.

도 ... 또는 확장 연산자를 사용하여 교체기를 사용할 수 있다.예를 들면 다음과 같습니다.

// An Array spread: spread an iterator into an array, 
// with each iterated value occupying an array element position.
var vals = [ ...it ];

// OR

// A function call spread: spread an iterator into a function, 
// call with each iterated value occupying an argument position.
doSomethingUseful( ...it );

화를 잘 내다

교체기 소비 협의는 기술적으로 소비에 사용되는iterables로 정의되었다.iterable는 교체할 수 있는 값입니다.

ES6는 JS의 기본 데이터 구조/집합 유형을iterables로 정의합니다.이것은 문자열, 그룹, 맵, 집합 등을 포함한다.

// an array is an iterable
var arr = [10, 20, 30];
for (let val of arr) {
  console.log(`Array value: ${val}`);
}
// Array value: 10
// Array value: 20
// Array value: 30

수조는 중용할 수 있기 때문에 우리는 shallow-copy 연산자...를 사용하여 for..of 수조를 만들 수 있다.예를 들면 다음과 같습니다.

var arrCopy = [ ...arr ];

다음과 같이 문자열을 교체할 수도 있습니다.

var greeting = "Hello world!";
var chars = [...greeting];
chars;
// [ "H", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!" ]

지도.

지도 데이터 구조는 대상을 키로 하고 (어떤 유형의) 값을 이 대상과 연결시킨다.

// given two DOM elements, `btn1` and `btn2`
var buttonNames = new Map();
buttonNames.set(btn1, "Button 1");
buttonNames.set(btn2, "Button 2");

for (let [btn, btnName] of buttonNames) {
  btn.addEventListener("click", function onClick() {
    console.log(`Clicked ${btnName}`);
  });
}

순환 덮어쓰기 문법(기본 맵 교체라고 함)에서 우리는 [btn, btnName]("수조 해체")을 사용하여 모든 원조를 각자의 키/값 쌍(btn1/"버튼 1"과 btn2/"버튼 2")으로 분해한다.

우리는 values()를 호출해서 값만 있는 교체기를 얻을 수 있다.

for (let btnName of buttonNames.values()) {
  console.log(btnName);
}
// Button 1
// Button 2

또는, 만약 우리가 그룹 교체에 색인과 값을 사용하기를 원한다면, 우리는 entries () 방법으로 entries 교체기를 생성할 수 있습니다.

var arr = [10, 20, 30];
for (let [idx, val] of arr.entries()) {
  console.log(`[${idx}]: ${val}`);
}
// [0]: 10
// [1]: 20
// [2]: 30

대부분의 경우 JS에 내장된 iterables는 세 가지 교체기 형식이 있는데 그것이 바로 키(keys()), 값(values())과 항목(entries()이다.

닫기

클로즈업은 함수가 그 작용역 밖에서 변수를 기억하고 계속 접근하는 것을 말한다. 설령 이 함수가 서로 다른 작용역에서 실행된다 하더라도.

클립은 함수 성질의 일부분이다.대상이 클립되지 않았습니다. 함수가 있습니다.

패킷을 관찰하려면 최초 정의된 함수와 다른 범위 내에서 함수를 실행해야 한다.

function greeting(msg) {
  return function who(name) {
    console.log(`${msg}, ${name}!`);
  };
}

var hello = greeting("Hello");
var howdy = greeting("Howdy");

hello("Kyle");
// Hello, Kyle!
hello("Sarah");
// Hello, Sarah!
howdy("Grant");
// Howdy, Grant!

외부 함수를 먼저 실행하고 내부 함수greeting(..)의 실례를 만들고 이 함수는 변수를 닫는다who(..).내부 함수의 실례는 각각 msg와 hello라는 변수에 분배된다.

내부 함수 실례가 여전히 활성 상태이기 때문에 (hello와howdy에 각각 분배됨) 그들의 클립은 howdy 변수를 보류한다.

이 클립은 스냅숏이 아니라 실제 변수이다.따라서 내부 함수를 사용하여 변경할 수 있습니다.

function counter(step = 1) {
  var count = 0;
  return function increaseCount() {
    count = count + step;
    return count;
  };
}

var incBy1 = counter(1);

incBy1(); // 1
incBy1(); // 2

참고: 외부 역할 영역이 반드시 일반적인 함수는 아니지만 항상 외부 역할 영역에서 하나 이상의 변수가 내부 함수에 액세스할 수 있는 것은 아닙니다.

for (let [idx, btn] of buttons.entries()) {
  btn.addEventListener("click", function onClick() {
    console.log(`Clicked on button (${idx})!`);
  });
}

이 키워드.

작용역은 정적이며, 함수를 정의할 때와 위치에서 사용할 수 있는 고정된 변수를 포함한다.

상하문을 실행하는 것은 동적이며, 그것의 호출 방식에 전적으로 달려 있다. (그것이 어디에서 정의되었든지, 심지어는 어디에서 호출되었든지.)

msg는 함수의 정적/고정 특성이 아니라 함수를 호출할 때마다 정의합니다.

function classroom(teacher) {
  return function study() {
    console.log(`${teacher} says to study ${this.topic}`);
  };
}
var assignment = classroom("Kyle");

outerthis 함수는 classroom(..) 키워드를 인용하지 않았기 때문에 지금까지 우리가 본 다른 함수와 같습니다.그러나 내부this 함수는 인용study()이 없기 때문에 이것은 의식적인 함수가 된다.다시 말하면, 그것은 상하문 집행에 의존하는 함수이다.

대상에 정의가 없기 때문에 this 호출topic:

assignment()
// Kyle says to study undefined

지금 생각해 보자.

var homework = {
  topic: "JS",
  assignment: assignment,
};
homework.assignment();
// Kyle says to study JS

여기서 이 함수를 호출하는this는 global 대상이 될 것이다.따라서 이 예에서 assignment()는'JS'로 해석된다.
주의: homework 함수와 동적 상하문의 장점은 단일 함수와 서로 다른 대상에서 온 데이터를 더욱 유연하게 사용할 수 있다는 것이다.

원형

원형은 물체의 특징이다.

원형은 두 대상 간의 링크로 여겨질 수 있는데 이런 링크는 대상을 만들 때 발생한다.

원형을 통해 연결된 일련의 대상을 원형 체인이라고 한다.

이 원형 링크(즉 한 대상 B에서 다른 대상 A로)의 목적은 B에 없는 속성/방법에 대한 접근을 A에 위탁하여 처리하는 것이다.

var homework = {
  topic: "JS",
};

(this.topic 대상은 하나의 속성만 있지만 기본 원형 링크는 this-aware 대상에 연결되며 이 대상에는 흔히 볼 수 있는 내장 방법이 있다. 예를 들어 homework,Object.prototype 등이다.

homework.toString();
// [object Object]

객체 링크

객체 원형 링크를 정의하려면 toString()를 사용하여 객체를 만듭니다.

var homework = {
  topic: "JS",
};

var otherHomework = Object.create(homework);
otherHomework.topic;
// "JS"

이 그림은 대상이 원형 체인에 연결되는 방식을 보여 준다.

알림: valueOf() 대상을 만듭니다. 이 대상은 원형에 연결된 곳이 없기 때문에 독립된 대상일 뿐입니다.어떤 경우에, 이것은 더욱 취할 수 있을 것이다.
참고:

homework.topic;
// "JS"
otherHomework.topic;
// "JS"

otherHomework.topic = "Math";
otherHomework.topic; // "Math"

homework.topic;
// "JS" -- not "Math"

Object.create(..)에 대한 분배는 Object.create(null)에 이 명칭의 속성을 직접 생성한다.topic의otherHomework 속성에 영향을 미치지 않습니다.

재검토

원형 위탁 함수 호출에 권한을 제공하는 방법을 고려할 때topic의 진정한 중요성은 특히 두드러진다.

var homework = {
  study() {
    console.log(`Please study ${this.topic}`);
  },
};

var jsHomework = Object.create(homework);
jsHomework.topic = "JS";
jsHomework.study();
// Please study JS

var mathHomework = Object.create(homework);
mathHomework.topic = "Math";
mathHomework.study();
// Please study Math

이 두 대상은 homework 함수를 호출할 때 서로 다른 this 결과를 얻었다.더 잘 이해하기 위해:

이 장은 여기까지입니다.나는 다음 장의 필기를 가지고 돌아올 것이다.
그 전에 즐겁게 코딩하세요!
만약 당신이 이 노트들을 읽는 것을 좋아하거나, 어떤 건의나 의문이 있다면, 평론에서 당신의 관점을 저에게 알려 주십시오.
연락하려면 다음 링크를 클릭하십시오.
| GitHub |