JavaScripts高阶（4）前端逃不过的this、同步异步

this

function eat(){
    console.log(this)     //window
}
eat();

function fn(){
    function b(){
        console.log(this);   //window
    }
    b()
}
fn()


function n(){
    console.log(this)           //window
}
~function (){
    n()
}()

var obj={
    fn:function (){
        console.log(this)
    }
}
obj.fn()   //this: obj
var f=obj.fn;
f()    //this: window

在js非严格模式下this：

1、自执行函数中的this一般都是window

var obj={
    fn:(function(){
        // this  window
        return function(){}
    })()
}

2、给元素的某个事件绑定方法，当事件触发执行对应事件的时候，方法中的this一般都是元素本身

oBox.onclick=function(){
    //this : oBox
}

3、还有一种方式能快速区分this：当方法执行的时候，看方法前边是否有 . ：有 .， .前边是谁this就是谁，没有 .this一般就是window

var obj={
    fn:function (){
        console.log(this)
    }
}
obj.fn()   //this :obj
var f=obj.fn;
f()    //this:window

在js严格模式下this：

如果执行主体不明确，this指向的是undefined（非严格模式下指向的是window）

"use strict"
function fn(){
    console.log(this);
}
fn()   //=>this:undefined
window.fn()  //=>  this:window

案例

function fn(){
    //this:window
    console.log(this)
}
document.body.onclick=function(){
    //this:body
    fn();   //执行前边没`.`this : window
}

//window全局作用域
//变量提升 var num; var obj;var fn;
//执行代码 num=1；
//开辟堆内存空间  aaaffff000
    //存储键值对  num = 2； fn:自执行函数返回的结果
        //自执行函数执行形成私有作用域A  （栈内存A是不能被销毁的  因为被 obj.fn使用了）
            //形参赋值  num = 1
            //变量提升 没有
            //代码执行
            //this.num*=2  (this 是window)           全局num=2
            //num+=2  (私有的形参)                   私有的num =3
            //return  一个函数（引用数据类型）
                //开辟一个堆内存空间 AAAFFF111
                //存储字符串
                //return AAAFFF111
    //fn =AAAFFF111
//把aaaffff000 赋值给 obj

//fn=obj.fn;   fn = AAAFFF111
//fn()  找到AAAFFF111 形成私有作用域B
    //形参和变量提升都没有
    //this.num*=3;  this为window            全局  num=6
    //num++;私有作用域中没有向上找到私有作用域A的形参    私有的num =4
    //打印 4
    //作用域B销毁
//obj.fn()  还是找到AAAFFF111  形成私有作用域
    //形参和变量提升都没有
    //this.num*=3;  this为obj                            obj  num=6
    //num++;私有作用域中没有向上找到私有作用域A的形参    私有的num =5
    //打印 5
    //作用域 销毁
// 全局 num =6
// obj  num=6
//销毁堆内存
    //fn=null;
    //obj.fn=null
    //obj=null

//4  5 6  6 
var num=1;
var obj={
    num:2,
    fn:(function(num){
        this.num*=2;
        num+=2;
        return function(){
            this.num*=3;
            num++;        //主要在于 这个num是上级作用域的
            console.log(num)
        }
    })(num)
}
var fn=obj.fn;
fn();
obj.fn();
console.log(num,obj.num)

异步 同步