Как это работает в функции конструктора для создания объектов в Javascript - PullRequest
Новая
       3

Как это работает в функции конструктора для создания объектов в Javascript

0 голосов
/ 22 февраля 2020

Мне действительно трудно понять, как this работает в constructor function для создания объектов в 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

в Приведенный выше код я получаю undefined для basicSalary переменной. Поэтому, чтобы получить значение basicSalary, я добавляю к нему префикс с this внутри функции, например: 

this.basicSalary = 12000;

Но при этом я получаю ошибку при доступе к методу getWage(). В нем говорится: 

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

Однако, если я префикс this добавлю к basicSalary в возвращаемом операторе внутри функции getWage(), я получу доступ как к переменной basicSalary, так и к методу getWage().

Кроме того, если я заменю весь свой код на factory function, т. Е. Литеральный тип объекта, как здесь: 

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 в return в метод getWage().

в обоих этих подходах this работает по-разному. Я запутался. Пожалуйста, поделитесь некоторыми знаниями о том, как использовать this в Javascript.

Ответы [ 2 ]

1 голос
/ 22 февраля 2020

В первом случае вы либо (неявно) объявляете новые локальные переменные (ограниченные выполнением функции), либо ссылаетесь на глобальные переменные, которые существуют в более высокой области видимости.

Они не привязаны к объекту, возвращенному с new.

Во втором случае вы возвращаете литерал объекта, поэтому они привязаны к нему, очевидно.

Код Амит хорошо. Вы также можете сделать это: 

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

Если у вас есть функции стрелок, у вас также есть классы ES6. Это может быть лучше.

0 голосов
/ 22 февраля 2020

Прочитав статью, которую я прокомментировал, вы можете попробовать это. 

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