从一道前端笔试题分析 JavaScript 中 this 的使用陷阱

坚信我们都有看完这样的一道道 JavaScript 的考试题，具体内容如下表所示：

var length = 10;function fn () { console.log(this.length);}var obj = { length: 5, method: function (fn) { fn(); arguments[0](); }}obj.method(fn, 1);

这道题主要实地考察的是 this 的指向和 arguments 第一类，第三个输入为 2 ，这儿我们不探讨那个热门话题。第二个输入的如果对 this 认知模糊不清不然难猜出 5 的标准答案，只不过标准答案为 10 。预测：JavaScript 判断 this 存取的认定准则是初始化边线与否有语句第一类，或是说与否被某一第一类保有或是包涵，先思索如下表所示标识符：

function fn () { console.log(this.a);} var obj = { a: 2, fn: fn}obj.fn(); //2

具体来说须要特别注意的是 fn() 的新闻稿形式，或其后是怎样被当做提及特性加进到 obj 中的。但不论是间接在 obj 表述还是先表述再加进为提及特性，这个表达式严格说来都不属于 obj 第一类。不过，初始化边线会采用 obj 的语句来提及表达式，因而你可以说表达式被初始化时 obj 第一类“保有”或是“包涵”它。不论你怎样称谓那个商业模式，但 fn() 被初始化时，它的后面的确加之了对 obj 的提及。当表达式提及有语句第一类时，表达式初始化中的 this 会存取到那个语句第一类。因而初始化 fn() 时 this 被存取到 obj ，因而 this.a 和 obj.a 时那样的。一类最常用的 this 存取问题是被显式存取的表达式会遗失存取第一类，也是说它会应用领域预设存取，进而把 this 存取到自上而下第一类或是 undefined 上。思索下面的标识符：

function fn () { console.log(this.a);}var obj = { a: 2, fn: fn}var bar = obj.fn; //表达式别称bar();//undefined

尽管 bar 是 obj.fn 的两个提及，但事实上，它提及的是 fn 表达式这类，因而这时的 bar() 只不过是两个峭腹任何人润色的表达式初始化，因而为 undefined 。返回以后的考试题，HTA只不过是一类显式的表达式，下面的范例的HTA和下面范例的 var bar = obj.fn 只不过是那样的。所以标准答案为 10 。

那如果把表达式传入到语言内置的表达式而不是传入你自己新闻稿的表达式，会发生什么呢？结果是那样的，没有区别：

function fn () { console.log(this.a);} var obj = { a: 2, fn: fn}var a = “global”;setTimeout(obj.fn,100);

javascript 环境中内置的 setTimeout() 表达式的实现和下面的伪标识符类似：

function setTimeout (fn,delay) { //等待delay毫秒 fn();//初始化边线}

就像我们看到的那样，回调表达式遗失 this 存取是很常用的。除此之外，还有一类情况 this 的行为出乎我们的意料：初始化回调表达式的表达式可能会修改 this 。在一些流行的 javascript 框架中的事件处理器常会把回调表达式的 this 强制存取到触发事件的 dom 元素上。最后来一道道测试题：

function fn () { console.log(this.a);}var a = 2;var o = { a:3,fn:fn};var p = { a:4}o.fn();//输入？(p.fn = o.fn)();//输入？

标准答案：3 和 2。最后，分享下预测这种显式存取的原则：如果在两个第一类内包涵两个指向表达式的特性，并通过那个特性间接提及表达式，只有在这种情况下的 this 才会存取到那个第一类上。

举报/反馈