关于JS中THIS的基本情况

THIS:函数执行的主体(谁执行的函数)

• 事件绑定
• 函数执行(普通函数执行、成员访问、匿名函数、回调函数)
• 构造函数
• 箭头函数(生成器函数generator)
• 基于call/apply/bind强制改变this指向

console.log(this);
//->全局上下文中的this:window
//->块级上下文中没有自己的this,所用的this都是继承上下文中的this(箭头函数也是)

/*
* 事件绑定
*   DOM0: xxx.onxxx = function () {}
*   DOM2:
*       xxx.addEventListener('xxx',function(){})
*       xxx.attachEvent('onxxx',function(){})
*
* 给当前的元素的某个事件行为绑定方法(此时是创建方法，方法没执行)，当事件行为触发，浏览器会把绑定的函数执行，此时函数中的this就是当前元素对象本身
* 特殊：基于attachEvent实现事件绑定，方法执行，方法中的this就是window
*/
document.body.assEventListener('click', function () {
    console.log(this);   //->body
});

/*
* 函数执行
*   正常的普通函数执行: 看函数执行前是否有"点"，"点"前面是谁this就是谁，没有"点",this就是window(严格模式下是undefined)
*   匿名函数：
*      + 函数表达式,等同于普通函数或者事件绑定等机制
*      + 自执行函数:this一般都是window/undefined
*      + 回调函数:一般都是window/undefined,但是如果另外函数执行中，对回调函数的执行做了特殊处理，以自己处理的为主
*   括号表达式：小括号中包含"多项",这样也只取最后一项，但是this受到影响
*/
"use strict";  // 开启JS严格模式(默认是非严格模式)

function fn() {
   console.log(this);
}
let obj = {
    name: 'zhufeng',
    fn
    //fn: fn
}
fn(); // window/undefined
obj.fn(); // obj
(obj.fn)(); // obj
(10, obj.fn)(); // window/undefined

// 自执行函数
(function (x) {
    console.log(this);  // window/undefined
})(10);

// 回调函数：把一个函数A作为实参，传递给另外一个执行的函数B[在B函数执行中，可以把A执行]
function fn(callback) {
    // callback -> 匿名函数
    callback();
}
fn(function () {
    console.log(this); // window/undefined
});

let arr = [10, 20, 30];
// arr.forEach(function (item, index) {
//     console.log(this); // ->window
// });
arr.forEach(function (item, index) {
    console.log(this); // ->forEach第二个参数[对象]，forEach内部处理好了
},{xxx:'xxx'});

setTimeout(function (x) {
    console.log(this, x); //->window 10
}, 1000, 10);