脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-揭秘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将被指派为被创建的实例对象。
function ThisClownCar () {
console.log(this);
}
new ThisClownCar();
// <- 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']
Function.prototype.bind 创建一个特殊的函数，该函数将永远使用传递给.bind的参数作为this的值，以及能够分配部分参数，创建原函数的珂里化（curride）版本。
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]
作用域链中的this
在下面的例子，this将无法在作用域链中保持不变。这是规则的缺陷，并且常常会给业余开发者带来困惑。
function scoping () {
console.log(this);
return function () {
console.log(this);
};
}
scoping()();
// <- Window
// <- Window
一个常见的方法是创建一个局部变量保持对this的引用，并且在子作用域中不能有同命变量。子作用域中的同名变量将覆盖父作用域中对this的引用。
function retaining () {
var self = this;
return function () {
console.log(self);
};
}
retaining()();
// <- Window
除非你真的想同时使用父作用域的this,以及当前this值，由于某些莫名其妙的原因,我更喜欢是使用的方法.bind函数。这可以用来将父作用域的this指定给子作用域。
function bound () {
return function () {
console.log(this);
}.bind(this);
}
bound()();
// <- Window
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-揭秘JavaScript中谜一样的this全部内容，希望文章能够帮你解决javascript代码实例教程-揭秘JavaScript中谜一样的this所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。