JavaScript中this指向的console.log输出格式及对象名显示问题咨询

Hey there! Let's unpack your questions about this values and why console.log behaves differently for your custom object vs. the Window object.

First: Why doesn't console.log show the object's name? #

Great observation! The difference boils down to how JavaScript and browser consoles handle built-in vs. custom objects:

• The Window object is a predefined global singleton—browsers recognize it by name, so the console labels it clearly.
• When you create an object literal like var myName = { ... }, the object itself doesn't have an intrinsic "name" property tied to the variable referencing it. The console only shows the object's actual properties because there's no built-in metadata telling it "this object is called myName".

In your code, when you call myName.sayName(), this points directly to the object literal—not the variable name myName. The variable is just a reference to the object, not part of the object itself.

Second: Can we make console.log show the object's name? #

Absolutely! Here are two simple approaches:

1. Add a custom identifier property to your object:

   var myName = { 
       name: "James",
       _objLabel: "myName", // Custom property to label the object
       sayName: function() { 
           console.log(`${this._objLabel}:`, this, 4); 
           console.log(this.name);
       } 
   }
   

   Now when you log, you'll see the label alongside the object's structure.

2. Use a constructor function instead of an object literal:
   Constructor functions give your objects a prototype with a name, so the console will display the constructor's name alongside the object:

   function MyName() {
       this.name = "James";
       this.sayName = function() {
           console.log(this, 4); // Will show `MyName {name: "James", sayName: ƒ}`
           console.log(this.name);
       }
   }
   var myName = new MyName();
   

Third: Are there simple alternatives to console.log? #

Sure! Here are a couple of easy options:

• Custom logging function: Wrap your log to include context automatically:

  function logWithLabel(label, obj) {
      console.log(`${label}:`, obj);
  }
  // Use it in your method:
  sayName: function() { 
      logWithLabel("myName", this);
      console.log(this.name);
  }
  

• Override toString() for the object: Define a custom string representation so when you log the object, it shows a human-readable label:

  var myName = { 
      name: "James",
      sayName: function() { 
          console.log(this.toString()); // Outputs "Object: myName (name: James)"
          console.log(this.name);
      },
      toString: function() {
          return `Object: myName (name: ${this.name})`;
      }
  }
  

• Use console.dir(): While similar to log, it expands the object in a more structured, hierarchical view, which can make nested properties easier to parse.

Quick recap of your code's this values #

Just to confirm your observations are spot-on:

• console.log(this, 1): Global scope, so this is Window.
• console.log(this, 2): Regular function call in non-strict mode, this defaults to Window.
• console.log(this, 3): Inner nested function (still non-strict mode), so this is Window.
• console.log(this, 4): Called as a method of myName, so this is the myName object.

内容的提问来源于stack exchange，提问作者rbrtn