この総括文章はインフラストラクチャの金英宝講師の基礎の上で、JavaScript中級:基本的な核心論理課程を学び、総括した.
JavaScript中級:根本コアロジック

📖 this 2

📌 thisとapply()

区分タイプデータ(値)objectFunction呼び出す関数名パラメータobjectis参照のオブジェクトパラメータAnyパラメータopt Any呼び出しの関数が返す値を返します

getTotal.apply(this, [10, 20])
--関数呼び出し方法はcall()と同じであり、パラメータが配列であることが異なる
--[10,20]をパラメータに渡す

2番目のパラメータ数がフローティングの場合に使用
--call()固定パラメータ数

📌 this, arguments

var obj = {0 : 10, 1 : 20, 2 : 30};
var data = [4, 5, 6];
function get(){
  	for(k=0; k<arguments.length; k++){
     	log(arguments[k] + this[k]); 
    };
};
get.apply(obj.data);

14
25
36

get.apply(obj, data)
--get関数でこの参照objを使用

2番目のパラメータ[4,5,6]をパラメータとして用いて計算する
--パラメータ数はダイナミックなので、使いやすいです

get()の関数コードは変更されず、渡されたパラメータ値と参照するオブジェクトを変更するだけです.

Arrayのような形

📌 this,コールバック関数

var obj = {value : 100};
var data = [5, 6, 7];
function callback(element, index, data){
  	return data.map(callback, obj);
};
function get(data){
  	return data.map(callback, obj);
};
var result = get(data);
log(result);

[105, 106, 107]

ES 5のmap()やforEach()のようなコールバック関数を持つメソッドは、2番目のパラメータで参照されるオブジェクト(option)を作成できます.ES 5のコールバック関数を持つメソッドは7つあります.

function callback(element, index, data){
return element + this.value;
};
--map()呼び出しのコールバック関数

return data.map(callback, obj);
--map()の2番目のパラメータにobjを作成
--callback()でこの参照objを使用

map()のコードは変わらずobj値とデータパラメータ値を変更するだけでよい

-mapはcallbackの内容を知らない(データを転送することを目的としている)-callbackから処理!

📌 bind()

区分タイプデータ(値)objectFunction呼び出す関数名パラメータobjectis参照のオブジェクトパラメータAnyパラメータopt Any呼び出しの関数が返す値を返します

にじしょり
--関数オブジェクトの作成
--作成した関数オブジェクトを関数として呼び出します.

パラメータ
--1番目のパラメータ-関数で参照されるオブジェクト
--2番目のパラメータ-呼び出し関数のパラメータ値

生成された関数を呼び出すときにパラメータを作成できます.
--2つのパラメータを組み合わせて使用

📌 関数オブジェクトの作成、呼び出し

var book = {
  	point : 123,
  	get : function(){
      	return this.point;
    };
};
var obj = book.get.bind(book);
log(typeof obj);
var result = obj();
log(result);

function
123

var obj = book.get.bind(book)
-- book.get()を呼び出さずに関数オブジェクトを作成して返します
--作成した関数オブジェクトを作成したオブジェクトに設定する[TargetFunction]
--別々に処理されているので保存する必要があります

console.log(typeof obj)
--objのタイプは関数オブジェクトです

bind()の最初のパラメータ
--get()関数で参照するオブジェクトを作成します.
--get()の前に作成したオブジェクトは参照されません
--作成しない場合、設定は定義されていません
--作成された関数オブジェクトに設定されている[BoundThis]

var result = obj()
--bind()によって作成された関数オブジェクトを呼び出します.
-- book.get()関数の呼び出し

return this.point
--[BoundThis]を参照してください.
--bookオブジェクトを参照しているため123を返します.

📌 連結パラメータ

var book = {
  	get : function(){
      	return Array.prototype.slice.call(arguments)
    };
};
var obj = book.get.bind(this, 10, 20);
var result = obj(30, 40);
log(result);

[10, 20, 30, 40]

var obj = book.get.bind(this, 10, 20)
--2番目と3番目のパラメータに値を作成します.
-- book.get()に渡されるパラメータ値
--関数オブジェクトとして設定されている[BoundArcguments]

get()関数でパラメータ名を作成せずにパラメータを使用する

return Array.prototype.slice.call(arguments)
--slice()インデックス範囲内のレイヤーを配列に戻す
--インデックスを作成しない場合は、すべてのパラメータが返されます.

var result = obj(30, 40)
-- book.get()関数はbookを呼び出します.get.bind(this,10,20)は[10,20]の形で10と20を返す
--obj(30,40)の30と40をマージして返します.

📌 bind()利用率/イベント処理

var book = {
  	myPoint : 100,
  	setEvent : function(){
      	var node = document.getElementById("point");
      	node.onclick = this.show.bind(book, node);
    },
  	show : function(node, event){
     	log(node, textContent);
      	log(this.myPoint);
    };
};
book.setEvent();

(値出力ボタンをクリックした場合)
値出力
100 (book.myPoint)

イニシアチブ
--値出力ボタンをクリックすると値が表示されます

HTML形式:
-- <script src = "point.js" defer></script> <button id = point> 값 출력 </button>

イベントの処理が困難なのは、プロセッサがイベントを設定するときのオブジェクトをこのオブジェクトに参照できないことです.
--イベント設定:onClick/addEventLister
--bind()で解決可能

document.getElementById("point")
--button#pointを使用してエンティティオブジェクトを作成する

node.onclick = this.show.bind(book, node)
--show()はonclickイベントのハンドラです
--show()でこのバインドを使用してbookオブジェクトを参照します.
--ノードをshow()パラメータ値に移動

show : function(node, event){...}
--ボタン#pointをクリックして呼び出す
--node:イベントのエンティティを設定する
--event:イベントオブジェクト

console.log(this.myPoint)
--bind()の最初のパラメータにbookオブジェクトを作成し、参照タグ123として使用します.