ECMA Javascript中this的深入理解（附示例）

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

本篇文章给大家带来的内容是关于ECMA Javascript中this的深入理解（附示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

this 实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数的调用位置（也就是函数的调用方法）。

四条规则：(你不知道的JS)

1. 默认绑定

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

无论是否在严格模式下，在全局执行上下文中（在任何函数体外部）this 都指代全局对象。(MDN)
在严格模式下，this将保持他进入执行上下文时的值，如果 this 没有被执行上下文（execution context）定义，那它将保持为 undefined。(MDN)

function foo() { "use strict"; console.log( this.a ); } var a = 2; foo(); // TypeError: this is undefined

2. 隐式绑定/丢失

当函数作为对象里的方法被调用时，它们的 this 是调用该函数的对象，且绑定只受最靠近的成员引用的影响。(MDN)

//隐式绑定
function foo() {
    console.log( this.a );
}
var obj2 = {
    a: 42,
    foo: foo
};
var obj1 = {
    a: 2,
    obj2: obj2
};
obj1.obj2.foo(); // 42//隐式丢失
function foo() {
    console.log( this.a );
}
function doFoo(fn) {
    // fn 其实引用的是 foo
    fn(); // <-- 调用位置！
}
var obj = {
    a: 2,
    foo: foo
};
var a = "oops, global"; // a 是全局对象的属性
doFoo( obj.foo ); // "oops, global"3. 显示绑定
如果要想把 this 的值从一个上下文传到另一个，就要用 call 或者apply 方法。(MDN)
调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。
var obj = {
    count: 0,
    cool: function coolFn() {
    if (this.count < 1) {
        setTimeout( function timer(){
            this.count++; // this 是安全的
                            // 因为 bind(..)
            console.log( "more awesome" );
            }.bind( this ), 100 ); // look, bind()!
        }
    }
};
obj.cool(); // 更酷了。硬绑定
创建一个包裹函数，传入所有的参数并返回接收到的所有值。
硬绑定会大大降低函数的灵活性，使用硬绑定之后就无法使用隐式绑定或者显式绑定来修改 this 。
// 简单的辅助绑定函数
function bind(fn, obj) {
    return function() {
        return fn.apply( obj, arguments );
    };
}软绑定
给默认绑定指定一个全局对象和 undefined 以外的值，那就可以实现和硬绑定相同的效果，同时保留隐式绑定或者显式绑定修改 this 的能力。
Function.prototype.softBind = function(obj) {
    var fn = this;
    var curried = [].slice.call( arguments, 1 );// 捕获所有 curried 参数
    var bound = function() {
        return fn.apply(
            (!this   关键词：ECMA Javascript中this的深入理解（附示例）