4. javascript 中的THIS

THIS指向总结

• window:

• 1、直接在全局输出this;
• 2、函数打印this，并直接调用;
• 3、定时器中普通函数为window;
• 4、匿名函数自执行；

• 事件中的this:

哪个对象触发，this就是那个对象

• 实例：

new 构造函数 -this 就是实例

• 箭头函数：

this走定义箭头函数的域；

• 对象中的this

let obj = {fn:function(){console.log(this)}}
1、给某个元q素绑定方法，当事件触发方法执行的时候，方法中的this是当前操作的元素本身；

2、当方法执行的时候，我们看方法前面是否有没有点，没有点的this是window或者是undefined，有点，点前边是谁this就是谁；

接下来我们通过一些例子来看下

var name='蓝蓝';
function fn(){
    console.log(this.name);
}
var obj={
    name:"你好世界",
    fn:fn
};
obj.fn(); //=>this:obj  =>你好世界
fn(); //=>this:window => 蓝蓝（非严格模式，严格模式下是undefined） window.fn()把window.省略了

(function(){
    //自执行函数中的this是window或undefined    
})();


let obj = {
    fn: (function () {
        // this:window
        return function () {
            console.log(this);
        };
    })()
};
obj.fn(); //=>this.obj  
let fn = obj.fn; //=>把小函数给fn
fn(); //=>this:window 

// 箭头函数this
function fn(){
    //this:window
    console.log(this);
}
document.body.onclick=function(){
    //this:document.body
    fn();
};

window.name = "WINDOW";
let fn = n => {
    console.log(this.name);
};
let obj = {
    name: 'OBJ',
    fn: fn
};
// FN所处的执行上下文中的THIS是WINDOW
fn(10); //=>this:window
fn.call(obj, 10); //=>this:window 不是我们预期的OBJ
document.body.onclick = fn; //=>this:window 不是我们预期的BODY
obj.fn(10); //=>this:window 

===箭头THIS
let obj = {
    name: 'OBJ',
    fn: function () {
        //=>this:obj 普通函数是有自己的THIS的
        let f = () => {
            console.log(this);  // obj 
        };
        f(); //=>this:obj
        return f;
    }
};
let f = obj.fn();   
f(); //=>this:obj;


let obj = {
    name: 'OBJ',
    fn: function () {
        //=>this:obj
        //=>原本期望的需求是：1S后把OBJ中的NAME改为'蓝蓝'
        /* setTimeout(function () {
            console.log(this);//=>WINODOW
            this.name = '蓝蓝';
        }, 1000); */

        /* let _this = this;//=>把需要的THIS提前用变量存储起来
        setTimeout(function () {
            _this.name = '蓝蓝'; //=>需要使用的时候拿出来用即可
        }, 1000); */

        setTimeout(() => {
            console.log(this); //=>OBJ
            this.name = '蓝蓝';
        }, 1000);
    }
};
obj.fn();