js中this的理解和实践【包含箭头函数中的this】

2018-02-07

最近在做项目的时候，因为对this的理解不清楚，导致了不清不楚的bug,因此抽出时间进行了js中this的学习。
1、js中this的理解要点。

(1、)对普通函数，this指向的是调用者[‘.’之前的，没有’.’则为全局对象];
(2、)箭头函数中的this指向为定义箭头函数的作用域中的this【是作用域中的this而不是定义的作用域】;
友情提示：此处是可以根据内存中this的指向来理解的，但是我们理解this是为了更好更快的做项目，记住一般的规律即可。

2、js中的this理解和实践的demo。

function test1() {
    console.log(this);
    alert("打印出了全局对象【global/window】[Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}]");
};
test1();
console.log("----------------作为对象的方法调用-------------------");
var obj1 = {
    name: 'qiutc',
    foo: function () {
        console.log(this.name);
    }
}
obj1.foo();
console.log("-----------------------------------");
function test2() {
    console.log(this.name);
}
var obj2 = {
    name: 'qiutc',
    foo2: test2
}
obj2.foo2();
console.log("--------------把对象的方法赋值给一个变量，然后直接调用这个变量---------------------");
var obj3 = {
    name: 'qiutc',
    foo3: function () {
        console.log(this);
    }
}
var test3 = obj3.foo3;
test3();
console.log("--------------利用 闭包 的特性来绑定this---------------------");
//为了避免对下面测试中定时器的影响，注释了当前代码块;
/**
  * var obj4 = {
    name: 'qiutc',
    foo: function () {
        console.log(this);
    },
    foo2: function () {
        console.log(this);
        var _this = this;
        setTimeout(function () {
           // console.log(this);
           console.log(_this);
        }, 1000);
    }
}
obj4.foo2();
  */
console.log("--------------箭头函数---------------------");
/**
 * 箭头函数中的 this 只和定义它时候的作用域的 this 有关;
 * 即：[箭头函数中的this和定义它的作用域中的this相等];
 * 函数参数列表中的箭头函数的是定义在外部的，但是其作用域在方法内部;
 * 而与在哪里以及如何调用它无关，同时它的 this 指向是不可改变的。
 */
/**
 * var obj5 = {
    name: 'qiutc',
    foo: function () {
        console.log(this);
    },
    foo2: function () {
        console.log("obj5--》a" + this);
        setTimeout(() => {
            console.log("obj5--》b" + this);
        }, 1000);
    }
}
obj5.foo2();
 */
console.log("--------------通过call, apply, bind给函数绑定指定的this对象---------------------");
console.log("-----------------------为一个普通函数指定 this---------------------");
var obj7 = {
    name: 'qiutc'
};
function foo7() {
    console.log(this);
}
foo7.call(obj7);
console.log("-----------------------为对象中的方法指定一个 this---------------------");
var obj = {
    name: 'qiutc',
    foo: function () {
        console.log(this);
    }
}
var obj2 = {
    name: 'tcqiu222222'
};
obj.foo.call(obj2);
console.log("-----------------------为箭头函数指定 this【无效性验证】---------------------");
var afoo = (a) => {
    console.log(a);
    console.log(this);
}
afoo(1);
var obj = {
    name: 'qiutc'
};
afoo.call(obj, 2); //期望输出：obj;实际输出:全局对象;
/**
 * 可以看到，这里的 call 指向 this 的操作并没有成功，所以可以得出： 
 * 箭头函数中的 this 在定义它的时候已经决定了（执行定义它的作用域中的 this），
 * 与如何调用以及在哪里调用它无关，包括 (call, apply, bind) 等操作都无法改变它的 this。
 *只要记住箭头函数大法好，不变的 this。
 */

3、参考文章
JavaScript 中的 this

4、demo源码。