javascript - 'this' 如何在 Javascript 中创建对象的构造函数中工作

Question

我真的很难理解this如何在构造函数中工作以在Javascript环境中创建对象。

下面是代码片段:

function Employee() {
    basicSalary = 12000;
    overtime = 10;
    rate = 200;
    this.getWage = function () {
        return basicSalary+(overtime*rate);
    }
}
let emp = new Employee();
console.log(emp.basicSalary);//undefined
console.log(emp.getWage());//14000

在上面的代码中，我得到 basicSalary 变量的 undefined 。因此，为了获得 basicSalary 值，我在函数内部添加了 this 前缀，例如:

this.basicSalary = 12000;

但是，这样做时我在访问 getWage() 方法时遇到错误。它说:

Uncaught ReferenceError: basicSalary is not defined
    at Employee.getWage (index.js:6)
    at index.js:11

但是，如果我在 getWage() 函数内的返回语句中将 this 前缀到 basicSalary 中，我就可以访问这两个 basicSalary 变量和 getWage() 方法。

另外，如果我将所有代码替换为工厂函数，即对象文字类型，如下所示:

function employee(){
    return {
        basicSalary : 12000,
        overtime : 10,
        rate : 200,
        getWage:function(){
            return this.basicSalary+(this.overtime*this.rate); // accessing values through `this`
        }
    };
}

const e2 = employee();
console.log(e2.basicSalary);
console.log(e2.getWage());

现在我可以轻松获取 basicSalary 和 getWage() 方法。我唯一需要做的就是将 this 放入 getWage() 方法内的 return 语句中。

在这两种方法中，这的工作方式不同。我很困惑。请分享一些有关如何在 Javascript 中使用 this 的知识。

Answer 1

在第一种情况下，您要么(隐式)声明新的局部变量(作用域为函数的执行)，要么引用存在于更高作用域中的全局变量。

它们不绑定(bind)到通过new返回的对象。

在第二种情况下，您将返回一个对象文字，因此显然它们绑定(bind)到它。

Amit 的代码很好。您还可以这样做:

function Employee() {
    this.basicSalary = 12000;
    this.overtime = 10;
    this.rate = 200;
    this.getWage = () =>  this.basicSalary + (this.overtime*this.rate)
}

如果你有箭头函数，那么你也有 ES6 类。这可能是一个更好的匹配。