490 JS 에서 THIS 에 대한 다섯 가지 상황 분석

* THIS：
           THIS WINDOW；
               THIS，  THIS          THIS ；【       。】
              ，THIS        ，         .
 *
 * THIS       (EC       )，THIS     
 *      ：                         （        ，      ，           【THIS】，      ，               【EC】）
 *
 *
 *         ？
 *    1.     ：              ，       ，    ，    THIS       （  ：IE6~8   attachEvent     DOM2    ，    ，    THIS WINDOW，       ）。
 * 
 *    2.       （         、      、             ）：           ，        “ ”， “ ”，“ ”    ，THIS   ，  “ ”，THIS  WINDOW[     ]/UNDEFINED[    ]。
 * 
 *    3.       （NEW XXX）：       THIS       。
 * 
 *    4. ES6    ARROW FUNCTION（    ）:          THIS，  THIS          THIS。
 * 
 *    5.     CALL/APPLY/BIND   ，          THIS  ：             （                 ，         ）。

//      DOM0  DOM2
let body = document.body;
body.onclick = function () {
	//     ，    ，    THIS BODY
	console.log(this);
};
body.addEventListener('click', function () {
	console.log(this); // => BODY
});


// IE6~8  DOM2    
box.attachEvent('onclick', function () {
	console.log(this); // => WINDOW
});


// ----------------------------------


// IIFE
(function () {
	console.log(this); // => window
})();


// ----------------------------------


let obj = {
	fn: (function () {
		console.log(this); // => window
		return function () {}
	})() //               OBJ.FN
};


// ----------------------------------


function func() {
	console.log(this);
}
let obj = {
	func: func
};
func(); // =>     THIS: WINDOW 【     ，window  func】
obj.func(); // =>     THIS: OBJ【    ，obj  func】


// ----------------------------------


// =>            ，  ARRAY    SLICE  （[].slice），    SLICE    ，  SLICE    THIS       
[].slice(); 
Array.prototype.slice(); // => SLICE      THIS：Array.prototype
[].__proto__.slice(); // => SLICE      THIS：[].__proto__ === Array.prototype


// ----------------------------------


function func() {
	// THIS  =>  WINDOW
	console.log(this);
}
document.body.onclick = function () {
	// THIS  =>  BODY
	func();
};


// ----------------------------------



function Func() {
    this.name = "F";
    // =>        THIS “      ”    ，         ，  THIS.XXX = XXX             
	console.log(this); 
}

Func.prototype.getNum = function getNum() {
	//          THIS       ，        ，“ ”     
	console.log(this);
};
let f = new Func; // Func {name: "F"}
f.getNum(); // Func {name: "F"}
f.__proto__.getNum(); // {getNum: ƒ, constructor: ƒ}
Func.prototype.getNum(); // {getNum: ƒ, constructor: ƒ}


// ----------------------------------


let obj = {
	func: function () {
		console.log(this);
	},
	sum: ()  =>  {
		console.log(this);
	}
};
obj.func(); // => THIS:OBJ
obj.sum(); // => THIS      (EC(G))  THIS: WINDOW
obj.sum.call(obj); // => THIS:WINDOW，       THIS，            


// ----------------------------------


let obj = {
	i: 0,
	// func:function(){}
	func() {
		// THIS: OBJ
		let _this = this;
		setTimeout(function () {
			// THIS:WINDOW       THIS    WINDOW（       ）
			_this.i++;
			console.log(_this);
		}, 1000);
	}
};
obj.func();


// ----------------------------------


let obj = {
	i: 0,
	func() {
		setTimeout(function () {
			//   BIND     THIS     OBJ
			this.i++;
			console.log(this);
		}.bind(this), 1000);
	}
};
obj.func();


// ----------------------------------


//           （                ）
let obj = {
	i: 0,
	func() {
		setTimeout(()  =>  {
			//           THIS，  THIS      THIS，   OBJ
			this.i++;
			console.log(this);
		}, 1000);
	}
};
obj.func();