理解JavaScript 中的 this

本文解释JavaScript中的this，希望有助你理解this的工作机制。作为JavaScript程序员，学习this对于你的发展有很大帮助，可以说利大于弊。

this的工作原理

如果一个函数被作为一个对象的方法调用，那么this将被指派为这个对象。

var parent ={    method:function(){        console.log(this);}};parent.method();//< - parent

注意这种行为非常“脆弱”，如果你获取一个方法的引用并且调用，那么this的值不会是parent了，而是window全局对象。这让大多数开发者迷惑。

var parentless = parent.method;parentless();//< - Window

底线是你应该查看调用链，以理解被调用函数是一个对象的属性还是它自己。如果它被作为属性调用，那么this的值将变成该属性的对象，否则this的值将被指派为全局对象或window。如果在严格模式下，this的值将是undefined。

在被当作构造函数的情况下，当使用new关键字时，this将被指派为被创建的实例对象。

functionThisClownCar(){  console.log(this);}newThisClownCar();//< - ThisClownCar {}

注意，在这种情况下没有办法识别出一个函数是否应该被用作构造函数，因此省略new关键字导致this的结果将是全局对象，就像我们上面看到的没有用parent调用的例子。

ThisClownCar();//< - Window

改动this

.call、 .apply 和.bind 方法用来操作调用函数的方式，帮我们定义this的值和传递给函数的参数值。

Function.prototype.call 可以有任意数量的参数，第一个参数被分配给this，剩下的被传递给调用函数。

Array.prototype.slice.call([1,2,3],1,2)//< - [2]

Function.prototype.apply 的行为和.call类似，但它传递给函数的参数是一个数组，而不是任意参数。

String.prototype.split.apply('13.12.02',['.'])//< - ['13', '12', '02']

var arr =[1,2];var add =Array.prototype.push.bind(arr,3);// effectively the same as arr.push(3)add();// effectively the same as arr.push(3, 4)add(4);console.log(arr);//< - [1, 2, 3, 3, 4]

function scoping (){  console.log(this);returnfunction(){    console.log(this);};}scoping()();//< - Window//<- Window

function retaining (){var self =this;returnfunction(){    console.log(self);};<