JavaScript 학습 구현 노트 2

이것은 첫 번째 학자의 필기다.만약 착오가 있다면 당신의 평론을 기다리세요.
https://zenn.dev/yuki_kanayama/articles/37022f0373e38d
네, 저번에 계속.기본적으로 각각 10개씩 기재되어 있다.

변수 참조 및 복사

원래 유형의 경우

1. let a = "hello";
2. let b = a; // bにaを代入
3. b = "bye"; // bへ再代入

상기 상황에서 변수 a를 설명할 때'hello'와 a는 메모리 공간에 저장됩니다.
다음에 a를 b에 대입할 때 다른 'Hello' 를 만들어서 메모리 공간에 저장합니다.
따라서 b를 다시 대입해도 a의 값은 바뀌지 않는다.복사를 하더라도 변수는 독립적으로 존재합니다.

대상의 상황

1. let a = {
2.   hoge: "vhoge",
3.   props: "vprops",
4. }
5.  
6. let b = a;
7.  
8. b.props = "changeProps"

원시 속성과 다른 {hoge: "vhoge",props: "vprops",}에 대한 참조를 저장합니다.따라서 b.props에서 props의 값을 변경할 때 a.proops도'change Propos'의 참고가 된다.

기간을 나누어 대입하다.

객체가 있는 경우

1. const a = {
2.   props :  1,
3.   hoge : "hoge",
4. };

let  {hoge} = a;선언을 통해 분할 대입을 할 수 있다.이것은 a의 대상에서 hoge 이름의 속성을 복제하고 hoge라는 이름으로 변수를 만들어 값이 원래의'hoge'에 들어간다.이 때, 다시 hoge를 대입할 때 변수 hoge의 값은 바뀌었지만 대상은 변하지 않습니다.
겸사겸사 여러 계층의 경우

1. const c = {
2.     prop1: {
3.         prop2: 0
4.     }
5. }
6.  
7. let { prop1 } = c;
8.  
9. prop1.prop2 = 1;

비교 참조

원시 유형의 값을 비교하고 대상의 인용을 비교한다.

1. const a = {
2.     prop: 0
3. }
4.  
5. const b = {
6.     prop: 0
7. }
8.  
9. console.log(a === b);

이러한 상황에서 서로 새로 발표된 것이기 때문에 같은 설명 내용에서도 메모리의 참고 목표가 다르기 때문에 컨트롤러에 가짜를 표시한다.겸사겸사 말씀드리겠습니다.

1. const c = a;
2.  
3. console.log(a === c);

이면 a와 같은 대상에 대한 인용이 복사되었기 때문에 c에 진짜를 표시합니다.

함수식

1. function fn(a, b) {
2.   console.log(a, b);
3. }

함수도 이름이 같은 함수를 설명할 수 있지만 이런 상황에서 마지막으로 발표한 함수를 실행한다.이런 상황을 방지하기 위해 함수 공식을 사용한다.

1. const fn = (a, b) => {
2.   console.log(a, b);
3. }

변수를 선포하고 대입하여 다시 선언할 수 없으면 같은 명칭이면 오류가 발생한다.

arguments

1. function fn() {
2.     const a = arguments[0];
3.     const b = arguments[1];
4.     console.log(arguments);
5.     console.log(a, b);
6. }
7.  
8. fn(1, 10);

arguments는 함수 상하문에 있는 매개 변수로 처리할 수 있다.
이러한 경우 함수 선언에 매개변수가 설정되어 있지 않지만 함수를 사용할 때 매개변수가 있는 경우 함수 컨텍스트에서 이 매개변수는 arguments로 간주되므로 다음과 같이 표시됩니다.
표시

Arguments(2) [1, 10, callee: ƒ, Symbol(Symbol.iterator): ƒ]
1 10

.
다만, 배열이 없어 처리가 어렵고, ES6(2017)에서 일시 중단 매개 변수가 나와 지금은 잘 사용하지 않는다.

콜백 함수

매개 변수로 다른 함수에 전달되는 함수를 가리킨다.
함수 Hello는 호출 함수로 함수 fn

1. function hello(name) {
2.   console.log('hello' + name);
3. }
4.  
5. function fn(cb) {
6.   cb('Tom');
7. }
8.  
9. fn(hello);

에 전달된다.함수 fn이 먼저 실행됩니다. 거기서 cb=hello

hello('Tom);

로 집행하다.

this

호출 대상에 대한 인용을 저장하는 데 사용되는 키워드입니다.
그러나 함수로 실행될 경우 글로벌 객체에 대한 참조는 유지됩니다(예외 있음).

1. const person = {
2.     name: 'Tom',
3.     hello: function() {
4.         console.log('Hello' + this.name) 
5.     }
6. }
7.  
8. person.hello();

이때this는 변수preson의 인용 목적지를 포함한다.그래서preson.name이 됩니다.이때 속성 Hello의 실행 상하문에서 볼 때person은 프록시 용접이기 때문에 직접 실행할 수 있다.

1. window.name = 'John';
2.  
3. const person = {
4.     name: 'Tom',
5.     hello: function() {
6.         console.log('Hello ' + this.name);
7.     }
8. }
9. person.hello();
10.  
11. function fn(cb) {
12.     cb();
13. }
14.  
15. fn(person.hello);

bind

새 함수를 만들기 위해this와 파라미터를 고정합니다.
bind로this나 파라미터를 고정시킨 경우 참고가 아닌 새 함수로 복사합니다.
참고로 매개 변수를 지정할 때

1. const b = a.bind(null, 'Tim');

처럼 기술하다.bind의 첫 번째 파라미터는this의 값을 고정시키고, 두 번째 파라미터는 함수 a의 값을 고정시킨다.

응용 프로그램 및 콜

bind와 마찬가지로,this와 파라미터를 고정합니다.(이 경우 this를 사용하지 않았기 때문에 두 번째 파라미터에 고정할 값을 지정함)
그냥 bind랑 달라요.

1. function a(name) {
2.     console.log('hello ' + name);
3. }
4.  
5. const b = a.bind(null, 'Tim');
6.  
7. b(); // 実行される
8.  
9. a.bind(null, 'Tim'); // 実行されない
10.  
11. a.apply(null, ['Tim']); // 実行される
12.  
13. a.call(null, 'Tim'); // 実行される

위에서 말한 바와 같이bind는 실행해야 하지만 apply,call은 선언할 때 직접 실행한다.
apply와call의 차이는 apply가 고정된 매개 변수를 배열 방식으로 진행하는 데 있다.콜은 동시 실행 이외에bind와 같습니다.

화살 함수

무명 함수의 간소화 기술법.그러나 기능이 모두 같은 것은 아니다.this,arguumetns,new 등의 기능은 사용할 수 없다.
Arror 함수에this가 없기 때문에 다음과 같다

1. window.name = 'John';
2.  
3. const person = {
4.     name: 'Tom',
5.     hello: () => {
6.         console.log('Hello ' + this.name);
7.     }
8. }
9. person.hello(); // 結果は、「Hello Johe」が表示される

설명에서 Hello 함수 내부의this는person이 아닙니다.
작용 체인은 통심가루이고 에폭시가 용접할 수 있는 window는this이다.
Arro 함수의 this 참조 에폭시 콜로이드.