首先，必須搞清楚在JS里面，函數的幾種調用方式(但是不管函數是按哪種方法來調用的，請記住一點：誰調用這個函數或方法,this關鍵字就指向誰,跟定義在哪沒有關系)
- 自執行函數調用 this是window
- 普通函數調用
- 作為方法來調用
- 作為構造函數來調用
- 定時器里面的this是window
- 使用apply/call方法來調用
- Function.prototype.bind方法
- es6箭頭函數
//this--->> 函數運行的主體, 誰執行他，this就是誰
**** 在非嚴格模式下，如果沒有運行的主體，默認this是window,如果是嚴格模式，沒有運行主體的話，this默認是undefined
1. 自執行函數運行，this是window，沒有主體，默認為window，在非嚴格模式下
;(function () {
console.log(this); //this--->window
})();
2. 函數執行，點前面是誰，this就是誰, 沒有點的話，默認為window，在非嚴格模式下
function fn() {
console.log(this);
}
var obj = {
fn: fn
};
fn(); //this----->> window
obj.fn(); //this---->> object
3. call 和 apply，this指向第一個參數，如果第一個參數為null/undefined，或則沒有傳入， 默認為window，在非嚴格模式下
fn.call(10,2); //this--->> 10
fn.apply(2,[2]); //this----->> 2
obj.fn.apply(undefined); //this---window
obj.fn.call(null); //this---window
obj.fn.call(); //this---window
4.給一個元素的行為綁定事件，那么事件觸發，里面的this就是當前元素
document.getElementById('div1').onclick = function () {
console.log(this); //--->> div1
fn(); //---->> window, 函數執行前面沒有點，默認為window
fn.call(obj); //this--->>obj
};
5. 構造函數里面this是當前類的實例對象
function Point(x, y) {
this.x = x;
this.y = y;
console.log(this);
}
var point1 = Point(1, 2); //this--->>window，普通函數執行，前面沒有執行主體，默認為window，非嚴格模式下
var point2 = new Point(1, 2); //this--->> Point類的一個實例
//*** new 一個函數發生了四步:(里面的this變了，成了構造函數)
// 1.函數執行
// 2.當前函數主體this就是當前這個類的實例
//3.以這個實例，給這個實例增加私有的屬性和方法 this.xx =xx;
//4.返回這個實例對象，如果函數返回基本數據類型或者沒有return，那么是這個實例對象，如果返回的是引用數據類型(object,function)會覆蓋這個實例對象
箭頭函數this指向上級對象
習題:
1. this問題
function fn() {
console.log(this === window);
}
var obj = {fn: fn};
fn(); //true
new fn(); // false
obj.fn(); //false
obj.fn.call(); //true
2.this問題
var name = 'window';
var obj = {
name: 'obj',
fn: function () {
return function () {
console.log(this.name);
}
}
};
obj.fn()();
3. 函數返回函數，匿名函數里面的this是window對象
var name = 10;
var obj = {
name: 20,
getName: function () {
var _this = this;
return function () {
console.log(_this.name);
}
}
};
obj.getName()();
4. 關于定時器里面的this
var name = 10;
var obj = {
name: 20,
getName: function () {
var _this = this;
return function () {
setTimeout(function () {
console.log(_this.name);
}, 1000);
}
}
};
obj.getName()();
鏈接：
