javascript - Explain this Uncaught TypeError: Property 'x' of object [object Object] is not a function - Stack O

admin管理员组

文章数量:1410717

Can someone please explain why I get the results I do in each of the following situations? I wish to understand why the outes are what they are regarding how JavaScript works with scope, if this is what the issue is. In the first example, my code functions properly.

var Employees = function(name, salary) {
    this.name = name;
    this.salary = salary;

    this.addSalary = addSalaryFunction;

    this.getSalary = function() {
        return this.salary;
    };

};

var addSalaryFunction = function(addition) {
        this.salary = this.salary + addition;
    };


var ceo = new Employees("Chris", 400000);
ceo.addSalary(20000);
document.write(ceo.getSalary());

If I move the addSalaryFunction into the Employees function, and below this.addSalary I get the Uncaught TypeError.

var Employees = function(name, salary) {
    this.name = name;
    this.salary = salary;

    this.addSalary = addSalaryFunction;

    this.getSalary = function() {
        return this.salary;
    };

    var addSalaryFunction = function(addition) {
        this.salary = this.salary + addition;
    };
};

var ceo = new Employees("Chris", 400000);
ceo.addSalary(20000);
document.write(ceo.getSalary());

But if I move the addSalaryFunction above this.addSalary if works properly again. Although my IDE tells me that my local variable addSalaryFunction is redundant.

var Employees = function(name, salary) {
    this.name = name;
    this.salary = salary;

    var addSalaryFunction = function(addition) {
        this.salary = this.salary + addition;
    };

    this.addSalary = addSalaryFunction;

    this.getSalary = function() {
        return this.salary;
    };

};


var ceo = new Employees("Chris", 400000);
ceo.addSalary(20000);
document.write(ceo.getSalary());

Can someone please explain why I get the results I do in each of the following situations? I wish to understand why the outes are what they are regarding how JavaScript works with scope, if this is what the issue is. In the first example, my code functions properly.

var Employees = function(name, salary) {
    this.name = name;
    this.salary = salary;

    this.addSalary = addSalaryFunction;

    this.getSalary = function() {
        return this.salary;
    };

};

var addSalaryFunction = function(addition) {
        this.salary = this.salary + addition;
    };


var ceo = new Employees("Chris", 400000);
ceo.addSalary(20000);
document.write(ceo.getSalary());

If I move the addSalaryFunction into the Employees function, and below this.addSalary I get the Uncaught TypeError.

var Employees = function(name, salary) {
    this.name = name;
    this.salary = salary;

    this.addSalary = addSalaryFunction;

    this.getSalary = function() {
        return this.salary;
    };

    var addSalaryFunction = function(addition) {
        this.salary = this.salary + addition;
    };
};

var ceo = new Employees("Chris", 400000);
ceo.addSalary(20000);
document.write(ceo.getSalary());

But if I move the addSalaryFunction above this.addSalary if works properly again. Although my IDE tells me that my local variable addSalaryFunction is redundant.

var Employees = function(name, salary) {
    this.name = name;
    this.salary = salary;

    var addSalaryFunction = function(addition) {
        this.salary = this.salary + addition;
    };

    this.addSalary = addSalaryFunction;

    this.getSalary = function() {
        return this.salary;
    };

};


var ceo = new Employees("Chris", 400000);
ceo.addSalary(20000);
document.write(ceo.getSalary());

• javascript
• scope

Share Improve this question Follow asked May 17, 2013 at 13:11 chris_schris_s 1,05144 gold badges1414 silver badges2828 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

It's because you're trying to assign the function before it was created.

this.addSalary = addSalaryFunction; // there's no function yet

//...

var addSalaryFunction = function(addition) {  // now there is, but too late
    this.salary = this.salary + addition;
};

---

When you moved the variable assignment above the this.addSalary = addSalaryFunction, you're now creating the function before trying to reference it.

var addSalaryFunction = function(addition) {  // here's the function
    this.salary = this.salary + addition;
};
this.addSalary = addSalaryFunction;  // now we can assign it

---

If you had used function declaration syntax instead, the first version would work, because the function declarations are "hoisted" (as they say) to the top of the variable scope.

this.addSalary = addSalaryFunction; // This now works because of the magic below

//...

// This is magically hoisted to the top
function addSalaryFunction(addition) {
    this.salary = this.salary + addition;
}

Second method does not work because addSalaryFunction is being referenced before it has been declared.

You could eliminate some code and just declare:

this.addSalary = function(addition) {
    this.salary = this.salary + addition;
}

In a much simpler form:

var foo = function() {
    var x = y;
    var y = 2;
    return x;
};

var bar = function() {
    var y = 2;
    var x = y;
    return x;
};

Obviously, bar() will return 2. foo, however, gets undefined when it looks for a value of y on the first line, so returns undefined. While variable declarations are hoisted to the top of their scope, variable initialisations are not.

It's a specific hoisting problem. Have a look at this explanation: http://www.sitepoint./back-to-basics-javascript-hoisting/

本文标签：