在控制台中打印对象时未定义的输出

Question

假设我有一个包含属性和方法的对象。

当我将this对象分配给另一个对象时，我执行以下代码。它在控制台中打印对象obj1时给出了未定义的未定义输出，任何人都可以帮我解决这个问题，并向我解释这种行为。

谢谢。

var emp = {
  fname: "sachin",
  lname: "pawar",
  getname: function() {
    return this.fname + " " + this.lname;
  }
};
var obj = emp.getname;
var obj1 = obj();
var obj3 = emp.getname();
console.log(obj1);

Answer 1

问题是 getname 方法中的 this 在通过以下行调用时未定义：

var obj1 = obj();

在JavaScript 中，取决于调用函数的上下文。因此，当您将其称为针对emp对象的“点方法”时，此引用其包含的对象。你称之为'独立'的地方没有任何意见，这个是未定义的。

您可以绑定独立调用以为其提供上下文，如下所示：

var obj=emp.getname.bind(emp);
var obj1=obj();

然后当它执行时，它将使用 emp 来获取 this 的上下文。

Answer 2

当您执行obj = emp.getname时，会复制其引用，当您调用它时，obj.function()和function()会有所不同。

执行obj.function时，函数this设置为obj，但是当您复制引用并调用它时，由于没有对象与此调用相关联，因此它具有全局范围（ window）。因此它返回undefined。

示例

window.fname = "Foo";
window.lname = "Bar";
var emp = {
  fname: "sachin",
  lname: "pawar",
  getname: function() {
    return this.fname + " " + this.lname;
  }
};
var obj = emp.getname;
var obj1 = obj();
var obj3 = emp.getname();
console.log(obj1);
console.log(obj3);

替代实施

var emp = (function() {
  // private properties
  var fname = "sachin"
  var lname = "pawar"
  var getname = function() {
    return fname + " " + lname;
  }
  // Selected properties exposed
  return {
    getname: getname
  }
})()

var obj = emp.getname;
var obj1 = obj();
var obj3 = emp.getname();
console.log(obj1);
console.log(obj3);