首先，必须搞清楚在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()();
链接：
