深入理解this机制系列第一篇——this的4种绑定规则

一、默认绑定

全局环境中,this默认绑定到window。

console.log(this === window); //true

函数独立调用时,this默认绑定到window。

function foo() {
    console.log(this === window)
}
foo(); //true

被嵌套的函数独立调用时,this默认绑定到window。

//虽然test()函数被嵌套在obj.foo()函数中,但test()函数是独立调用,而不是方法调用,所以this默认绑定到window。
var a = 0;
var obj = {
    a : 2,
    foo:function(){
            function test(){
                console.log(this.a);
            }
            test();
    }
}
obj.foo();//0

[IIFE]:IIFE立即执行函数实际上就是函数声明后直接调用执行。

var a = 0;
function foo(){
    (function test(){
        console.log(this.a);
    })()
};
var obj = {
    a : 2,
    foo:foo
}
obj.foo();//0

等价于

//等价于上例
var a = 0;
var obj = {
    a : 2,
    foo:function(){
            function test(){
                console.log(this.a);
            }
            test();
    }
}
obj.foo();//0

【闭包】:类似的,test()函数是独立调用,而不是方法调用,所以this默认绑定到window。

注意:函数共有四种调用模式,函数调用模式,方法调用模式,构造函数调用模式,间接调用模式。

var a = 0;
function foo(){
    function test(){
        console.log(this.a);
    }
    return test;
};
var obj = {
    a : 2,
    foo:foo
}
obj.foo()();//0 //obj.foo()调用这个会返回test函数,虽然foo函数调用结束后,其执行环境被销毁了,但其变量对象一直存在在内存空间中。所以在这里,test()函数属于函数调用模式。

由于闭包中的this默认绑定到window对象,但又常常需要访问嵌套的函数的this,所以常常在嵌套函数中使用var that = this,然后在闭包中使用that代替this,使用作用域查找的方法来找到嵌套函数的this值。

var a = 0;
function foo(){
    var that = this;
    function test(){
        console.log(that.a);
    }
    return test;
};
var obj = {
    a : 2,
    foo:foo
}
obj.foo()();//2

二、隐式绑定

一般地,被直接对象所包含的函数调用时,也称为方法调用,this隐式绑定到该直接对象。

function foo(){
    console.log(this.a);
};
var obj1 = {
    a:1,
    foo:foo,
    obj2:{
        a:2,
        foo:foo
    }
}

//foo()函数的直接对象是obj1,this隐式绑定到obj1
obj1.foo();//1

//foo()函数的直接对象是obj2,this隐式绑定到obj2
obj1.obj2.foo();//2

隐式丢失:隐式丢失是指被隐式绑定的函数丢失绑定对象,从而默认绑定到window。这种情况容易出错却又很常见。

【函数别名】

var a = 0;
function foo(){
    console.log(this.a);
};
var obj = {
    a : 2,
    foo:foo
}
//把obj.foo赋予别名bar,造成了隐式丢失,因为只是把foo()函数赋给了bar,而bar与obj对象则毫无关系
var bar = obj.foo;
bar();//0

等价于

//等价于
var a = 0;
var bar = function foo(){
    console.log(this.a);
}
bar();//0

【参数传递】

var a = 0;
function foo(){
    console.log(this.a);
};
function bar(fn){
    fn();
}
var obj = {
    a : 2,
    foo:foo
}
//把obj.foo当作参数传递给bar函数时,有隐式的函数赋值fn=obj.foo。与上例类似,只是把foo函数赋给了fn,而fn与obj对象则毫无关系,并且foo函数传进去后是函数调用模式,所以this在全局。
bar(obj.foo);//0 

等价于

//等价于
var a = 0;
function bar(fn){
    fn();
}
bar(function foo(){
    console.log(this.a);
});

【内置函数】:内置函数与上例类似,也会造成隐式丢失。

var a = 0;
function foo(){
    console.log(this.a);
};
var obj = {
    a : 2,
    foo:foo
}
//setTimeout第一个参数传的一定是一个函数引用,而不是执行函数
setTimeout(obj.foo,100);//0

等价于

//等价于
var a = 0;
setTimeout(function foo(){
    console.log(this.a);
},100);//0

【间接引用】:函数的“间接引用”一般都是在无意间创建的,最容易发生在赋值时,也会造成隐式丢失。

function foo() {
    console.log( this.a );
}
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); // 3
//将o.foo函数赋值给p.foo函数,然后立即执行。相当于仅仅是foo()函数的立即执行
(p.foo = o.foo)(); // 2这里赋值的是一个函数,最后调用时是以函数调用模式调用的。所以this指向全局。
function foo() {
    console.log( this.a );
}
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); // 3
//将o.foo函数赋值给p.foo函数,之后p.foo函数再执行,是属于p对象的foo函数的执行
p.foo = o.foo;
p.foo();//4

【其他情况】:在javascript引擎内部,obj和obj.foo储存两个内存地址(都是复杂类型),简称为M1和M2。只有obj.foo()这样调用时,是从M1调用M2,因此this指向obj,但是,下面这三种情况,都是直接取出M2进行运算,然后在全局执行环境中执行运算(还是M2),因此this指向全局环境。

var a = 0;
var obj = {
    a : 2,
    foo:foo
};
function foo() {
    console.log( this.a );
};

(obj.foo = obj.foo)();//0

(false || obj.foo)();//0

(1, obj.foo)();//0

三、显示绑定

通过call()、apply()、blid()方法把对象绑定到this,也就是把函数中的this手动的指向了传入的对象。这种方法叫做显示绑定,但对于被调用的函数来说,叫做间接调用。

var a = 0;
function foo(){
    console.log(this.a);
}
var obj = {
    a:2
};
foo();//0
foo.call(obj);//2

普通的显示绑定无法解决隐式丢失问题。

var a = 0;
function foo(){
    console.log(this.a);
}
var obj1 = {
    a:1
};
var obj2 = {
    a:2
};
foo.call(obj1);//1
foo.call(obj2);//2

【硬绑定】
硬绑定是显示绑定的一个变种,使this不能再被修改。

var a = 0;
function foo(){
    console.log(this.a);
}
var obj = {
    a:2
};
var bar= function(){
    foo.call(obj); //foo函数和obj绑定到一起了,所以无论怎么调用bar函数。始终也不会改变什么。
}
//在bar函数内部手动调用foo.call(obj)。因此,无论之后如何调用函数bar,它总会手动在obj上调用foo
bar();//2
setTimeout(bar,100);//2
bar.call(window);//2

【API】: javascript中新增了许多内置函数,具有显式绑定的功能,如数组的5个迭代方法:map()、forEach()、filter()、some()、every()

var id = 'window';
function foo(el){
    console.log(el,this.id);
}
var obj = {
    id: 'fn'
};
[1,2,3].forEach(foo);//1 "window" 2 "window" 3 "window"
[1,2,3].forEach(foo,obj);//1 "fn" 2 "fn" 3 "fn"

new绑定

如果函数或者方法调用之前带有关键字new,它就称之为构造函数调用,对于this绑定来说,称为new绑定。

【1】构造函数通常不使用return关键字,它们通常初始化新对象,当构造函数的函数体执行完毕时,它会显式返回。在这种情况下,构造函数调用表达式的计算结果就是这个新对象的值

function fn(){
    this.a = 2;
}
var test = new fn(); //this绑定到了新创建的对象上。
console.log(test);//{a:2}

【2】如果构造函数使用return语句但没有指定返回值,或者返回一个原始值,那么这时将忽略返回值,同时使用这个新对象作为调用结果。

function fn(){
    this.a = 2;
    return;
}
var test = new fn();
console.log(test);//{a:2}

【3】如果构造函数显式地使用return语句返回一个对象,那么调用表达式的值就是这个对象。

var obj = {a:1};
function fn(){
    this.a = 2;
    return obj;
}
var test = new fn();
console.log(test);//{a:1}

[注意]尽管有时候构造函数看起来像一个方法调用,它依然会使用这个新对象作为this。也就是说,在表达式new o.m()中,this并不是o,而是新创建的对象。

var o = {
    m: function(){
        return this;
    }
}
var obj = new o.m();
console.log(obj,obj === o);//{} false
console.log(obj.constructor === o.m);//true

五、严格模式

【1】严格模式下,独立调用的函数的this指向undefined。

function fn(){
    'use strict';
    console.log(this);//undefined
}
fn();

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

【2】在非严格模式下,使用函数的call()或apply()方法时,null或undefined值会被转换为全局对象。而在严格模式下,函数的this值始终是指定的值。(这个指定的值是什么)

var color = 'red';
function displayColor(){
    console.log(this.color);
}
displayColor.call(null);//red

var color = 'red';
function displayColor(){
    'use strict';
    console.log(this.color);
}
displayColor.call(null);//TypeError: Cannot read property 'color' of null

总结:this的四种绑定规则:默认绑定,隐式绑定、显示绑定,和new绑定,分别对应函数的四种调用方式:独立调用,方法调用,间接调用和构造函数调用。

说到底,javascript如此复杂的原因是因为函数过于强大。因为,函数是对象,所以原型链比较复杂;因为函数可以作为值被传递,所以执行环境栈比较复杂;同样地,因为函数具有多种调用方式,所以this的绑定规则也比较复杂

转载自:小火柴的蓝色理想

http://www.cnblogs.com/xiaohuochai/p/5613593.html
在阅读老师的博客时,我把它当做看书来对待,所以我的博客大部分来自老师的原话以及实例,再加上自已的一些理解,并且做了适当的标注,还有对老师的代码进行了一些测试。

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页