189 8069 5689
这篇文章主要介绍“JavaScript中的this工作原理”，在日常操作中，相信很多人在JavaScript中的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将被指派为被创建的实例对象。
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到此，关于“JavaScript中的this工作原理”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！