[JavaScript-10]this指向

1. 默认绑定

// 全局环境指向window
console.log(this);
// 函数独立调用，函数内部this指向window
function fn()
{
    console.log(this);
}
fn();

// 函数当做对象方法来调用，this指向对象
var x = 666;
var obj = 
{
    a:2,
    foo:function ()
    {
        console.log(this);
        var that = this;
        function test()
        {
            // 被嵌套的函数独立调用，this指向window
            console.log(this);
            console.log('x:',this.x);
            // console.log('x:',x); // let这么写
            console.log(that.a);
        }
        test();
    }
}
obj.foo()

2. IIFE自调用函数

// 函数当做对象方法来调用，this指向对象
var x = 666;
var obj = 
{
    a:2,
    foo:function ()
    {
        console.log(this);
        var that = this;
        function test()
        {
            // 被嵌套的函数独立调用，this指向window
            console.log(this);
            console.log('x:',this.x);
            // console.log('x:',x); // let这么写
            console.log(that.a);
        }
        test();
    }
}
obj.foo()

// IIFE自调用函数
var aa =10;
function fooo()
{
    console.log(this);
    (function test(that) // that 获取 this值 obj1
        {
            // 自调用指向window
            console.log(this);
            console.log(this.aa);
            console.log(that.a);
        }
    )(this); // 自调用传参this obj1
}
var obj1 =
{
    a       :2,
    foooo   :fooo // 函数赋值给foooo
}
obj1.foooo();

3. 隐式绑定

// 当函数当做obj对象的方法来调用，this指向当前的obj
function foo()
{
    console.log(this.a);
}
var obj = 
{
    a   :   1,
    foo :   foo,
    obj2:
    {
        a   :   2,
        foo :   foo
    }
}
// foo()直接指向obj
obj.foo();
// foo()直接指向obj2 
obj.obj2.foo();

4. 隐式丢失

4.1 赋值丢失

// 隐式丢失
// 当函数内的方法被赋值给一个变量的时候，则出现隐式丢失
var a = 0;
function foo()
{
    console.log(this.a);
}
var obj = 
{
    a   :   1,
    foo :   foo,
}
var bar = obj.foo;
// 把obj.foo()赋值给别名bar,造成隐式丢失
bar(); //0

4.2 传参丢失

// 当函数内方法被当做参数传递后，会出现隐式丢失
var b = 0;
function fooo()
{
    console.log(this.b);
}
// 传进来的fn是一个函数
function barr(fn)
{
    fn();
}
var obj1 =
{
    b:1,
    fooo:fooo
}
// 把obj1.fooo当做参数传递到barr(fn)就是赋值给fn
barr(obj1.fooo) //0

4.3 内置函数调用

// setTimeout() 载入一次执行后，延时一定时间后，再执行一次表达式；被动触发
// setInterval() 载入后立即进入计算状态，每隔指定时间救赎执行一次表达式；主动触发
setTimeout(
    function()
    {
        console.log(this);
    },
    1000
);

var a = 10;
function foo()
{
    console.log(this.a);
}
var obj =
{
    a:1,
    foo:foo
}
setTimeout(obj.foo,1000) //10

4.4 间接调用

// 间接调用
var a =2;
function foo()
{
    console.log(this.a);
}
var obj =
{
    a:3,
    foo:foo
}
var p =
{
    a:4,
    b:5
};
obj.foo(); //3
// 函数立即调用，内部this指向window
// p对象 添加新的方法
(p.foo = obj.foo)() //2
p.foo = obj.foo;
p.foo(); //4