为什么我得到未定义的价值

Question

我有这段代码，当我运行它时显示未定义。但是我们可以使用这个关键字访问全局属性。

 var firstName = "Peter",
        lastName = "Ally";

        function showFullName () {
        // "this" inside this function will have the value of the window object
        // because the showFullName () function is defined in the global scope, just like the firstName and lastName
        alert (this.firstName + " " + this.lastName);
        }
        showFullName ();

Answer 1

如果执行得当，这将起作用（为了更简单的示例，将 alert 替换为 console.log）

var firstName = "Peter",
    lastName = "Ally";

function showFullName () {
  // "this" inside this function will have the value of the window object
  console.log("this and window are the same thing", this === window);
  
  // because the showFullName () function is defined in the global scope, just like the firstName and lastName
  console.log(this.firstName + " " + this.lastName);
}

showFullName();

如果将其放在 功能范围内，它将无法工作，但是 - 大概 JS Fiddle 会做类似的事情

(function() {
  var firstName = "Peter",
        lastName = "Ally";

    function showFullName () {
      // "this" inside this function will still have the value of the window object
      console.log("this and window are the same thing", this === window);
      
      // however firstName and lastName are not goint to be attached to it because they are in functional scope
      console.log("the names are still reachable", firstName, lastName)
      
      //but not attached to the window object (which "this" points to)
      console.log(this.firstName + " " + this.lastName);
    }

    showFullName();
})();

请注意，如果您有strict mode enabled，那么this 将是undefined 而不是window，代码会产生错误

var firstName = "Peter",
    lastName = "Ally";

function showFullName () {
  "use strict";
  // "this" inside this function will now have the value "undefined"
  console.log("'this' is actually 'undefined'", this);
  console.log("the actual value 'undefined', not a string", typeof this);
  
  // the following line will throw a TypeError because it's trying to get a property from "undefined"
  console.log(this.firstName + " " + this.lastName);
}

showFullName();

Answer 2

通常使用window 关键字代替。 this 独立于函数声明的位置，但取决于调用（以及如何）调用的位置。

var firstName = "Peter",
    lastName = "Ally";

function showFullName () {
    alert (window.firstName + " " + window.lastName);
}
showFullName();

Answer 3

所以我才知道，当我们使用严格模式时，这个关键字在全局函数中保存了 undefined 的值。 然而，在严格模式下， this 的值保持在进入执行上下文时设置的任何值，因此，在以下情况下， this 将默认为 undefined：

 function f2(){
      "use strict"; // see strict mode
      return this;
    }

    f2() === undefined;

所以，在严格模式下，如果这不是由执行上下文定义的，它仍然是未定义的。我从 MDN 获取了这段代码 sn-p。

所以在我的情况下，值没有出现在小提琴中。但这将是@vlaz 指出的原因。谢谢@vlaz