JavaScript関数の中でthisは問題を指します.

21960 ワード
同前 JavaScript 学習ノートセット フロントエンドの学習ノート js。 this コール ビッド appy
記事の目次
  • thisキーワード
  • thisを変更する
  • コール
  • appy
  • bind
    • thisキーワード
  • どのオブジェクトが関数を呼び出しますか?関数の中のthisはどのオブジェクトを指しますか?
  • ＊厳格モードでは、＊＊グローバル環境において、thisはundefined
    • を指す.
  • ＊非厳格モードでは、＊＊グローバル環境において、thisはwindow
    • を指す.
  • グローバル定義の関数を直接呼び出します.this => window 
    • function fn(){
     
	console.log(this);
	//    this    window
}
fn();
//     window.fn()
  • オブジェクト内部の関数呼び出し
    var obj = {
     
	fn:function(){
     
		console.log(this);
	}
}
obj.fn();
//    this    obj
  • タイマーの処理関数、this => 
    • setTimeout(function(){
     
	console.log(this);	
},0)
//             this    window
  • イベントハンドリング関数、this => window 
    • div.onclick = function(){
     
	console.log(this);
}
//     div    ，this   div
  • コール機能、this => 
    • (function () {
     
  console.log(this)
})()
//    this    window
    thisの方向を変える
    先ほど私たちが話したのは全部関数の基本的な呼び方の中のthisを指しています.また、関数自体のthisを無視して他のところを指す3つの方法があります.この3つの方法はcall/apply/bindで、thisの方向を強制的に変える方法です.
  • this => windowは、関数呼び出しの後に付加されて使用され、関数自体のthis指向を無視することができる
    • .
  • call/apply/bindは使用するとすぐに関数を呼び出します.call applyは使用すると関数を作成しますが、別途手動で
    • を呼び出す必要があります.
    コール
  • 文法:bind
  • 機能:バインディングされた関数fnを呼び出し、そのthisを指定して
    • を参照する.
  • パラメータ:
  • 最初のパラメータ:this指向
    • です.
  • 他のパラメータ:入力が必要な値は、複数であってもいいです.カンマで
    • を分離します.
    callを使って方法を伝えません.
    var num = 666;

function fn() {
     
  console.log('num = ', this.num);
}

fn.call();  // num = 666
    コール方法でthisを指定します.
    var name = 'Rose';
var obj = {
     name:'Jack'};
function fn(){
     
	console.log(this.name);
}
fn();	// Rose
fn.call();	// Rose
fn.call(obj);  // jack
    call方法でthisを指定し、参照してください.
    var name = 'Rack';
var obj = {
     name:'Jack'};
function fn(a,b){
     
	console.log(this,a,b);
}
fn(1,2);	// window 1 2
fn.call(obj,1,2);	// obj 1 2
fn(1,3);	// window 1 3
    appy
  • fn.call(fn this ,arg1, arg2, ...);方法で許容されるのは、複数のパラメータを含む配列
    • である.
  • 文法:apply
  • 機能:バインディングされた関数fnを呼び出し、そのthisを指定して
    • を参照する.
  • パラメータ:
  • 最初のパラメータ:thisオブジェクト
  • 番目のパラメータ:複数のパラメータを含む配列
    • var obj = {
     name:'jack'};
function fn(a,b){
     
	console.log(this,a,b);
}
fn(1,2);	// window 1 2
fn.apply(obj,[1,2]);	// obj 1 2
    appy結合配列を使う
  • は、fn.apply(fn this ,[arg1, arg2, ...]);を使用して要素を配列に追加し、パラメータが配列であれば、配列を単一の要素として追加します.この配列内の各要素を追加するのではなく、最終的には1つの配列内の配列
    • を得ることができます.
    var arr1 = [1,2];
var arr2 = [3,4];
arr1.push(arr2);
console.log(arr1);	//	[1,2,[3,4]]
  • pushは、配列を統合することができますが、要素を既存の配列に追加するのではなく、新しい配列を作成して戻すことができます.
    • var arr1 = [1,2];
var arr2 = [3,4];

var arr3 = arr1.concat(arr2);
console.log(arr1);	// [1,2]
console.log(arr3);	// [1,2,3,4]
  • もし元素を既存の配列に追加するなら、どうすればいいですか?ループ?No!これはconcatです.役に立ちました.
    var arr1 = [1,2];
var arr2 = [3,4];

arr1.push.apply(arr1,arr2);
console.log(arr1);	// [1,2,3,4]
    appyを使って内蔵関数と接続します.
    /*        /     */
var numbers = [5, 6, 2, 3, 7];

var max = Math.max(numbers)
var min = Math.min(numbers)
console.log(min,max);	// NaN NaN

var max = Math.max.apply(null, numbers); 
/*       Math.max(numbers[0], ...)   Math.max(5, 6, ..) */
var min = Math.min.apply(null, numbers);
console.log(min,max);	// 2 7
    ビッド
  • 文法:apply
  • の役割:新しいバインディング関数を作成し、そのthisを指し示して参照するよう指定します.それを起動してから
    • を実行する必要があります.
  • パラメータ:
  • 最初のパラメータ:thisオブジェクト
  • 他のパラメータ:入力が必要な値は、複数であってもいいです.カンマで
    • を分離します.
    var obj = {
     name:'jack'};
function fn(a,b){
     
	console.log(this,a,b);
}
fn(1,2);	// window 1 2
fn.bind(obj,1,2);	//       
fn.bind(obj,1,3)()	// obj 1 3
var newFn = fn.bind(obj,3,4);
newFn();	// obj 1 4
newFn(5,6);	// obj 3 4
    javaScript概要