每日挑战，从Javascript面试题目了解一些你可能忽略的概念 - Day17

tags: ItIron2021 Javascript

前言

前两天这样搞下来，相信你们对this已经感到有些疲乏了，但打铁要趁热，我们今天就来看一下这系列最後一题与this直接相关的题目吧! 加油!

本日题目与解释

请问下方程序码的输出结果为?

var hero = {
    _name: 'John Doe',
    getSecretIdentity: function (){
        return this._name;
    }
};

var stoleSecretIdentity = hero.getSecretIdentity;

console.log(stoleSecretIdentity());
console.log(hero.getSecretIdentity());

今天来个厨神防雷

最终的输出结果为

undefined
John Doe

是的，当时面试的公司就直接把网路上的题目拿下来用? 你会觉得眼熟是很正常的。
这个题目其实相当的简单，只要你有搞清楚前两天的内容! 关键在於理解this指向哪，所以首先复习一下几个关键吧!

• 若直接呼叫this，this指向全域环境，也就是window或是global object
• 若在函数中使用this，this指向执行该函数的物件
• 可以用call、bind & apply改变this的指向

观念在手，接着我们很快地来解这道题目吧! 首先下方的程序码是回传一个函数

var stoleSecretIdentity = hero.getSecretIdentity;

注意，虽然它是从hero物件中拉出来的函数，但并不表示这函数就指向hero物件，上述的写法其实跟以下的写法等价

var stoleSecretIdentity = function (){
   return this._name;
}

所以其实你还不确定这个this是指向谁的!

console.log(stoleSecretIdentity());

这里就清楚了，在全域环境中直接执行这个函数，this会指向window或global object，不管是哪个肯定都没有_name这个属性，结果自然会印出undefined

紧接着看最後一段的程序码

console.log(hero.getSecretIdentity());

这个就更简单了，执行这个函数时它指向的是hero物件，最终自然印出John Doe罗!

如果你觉得这样的概念相当难懂，那有两个可能性

1. 我讲得太过於简略
2. 你真的对this还不够熟

你可以选择一个你喜欢的说法相信?

本日核心观念与总结

核心观念

this

总结

• 复习this在不同情况下的指向

本文章同步发布於个人部落格，有兴趣的朋友也可以来逛逛~!