使用原型添加功能

Question

After looking through some of the other threads inheritance looks a bit complicated. the why does the getAge() function not return the this._age value in Option 1? and what is best practice between Option 1 and Option 2?

---

Option 1

function Person(){
    this._age = 21;
}

Person.prototype.getAge(){
    return this._age;//undefined
}

var person = new Person();
person.getAge();

---

Option 2

function Person(){
    var _age = 21,
    getAge:function(){
        return _age;
    }
}

---

Finally what would be the different be between the above two and the following?

---

var person = new Person();
person.age = 21;

---

I just might be confusing myself.

Answer 1

Try this code:

var Person = function(){
    this._age = 21;
}

Person.prototype.getAge = function(){
    return this._age;
}

var person = new Person();
alert(person.getAge());

Option 2:

var Person = function(){
    this._age = 21;
    this.getAge=function(){
        return this._age;
    }
}
var person = new Person();
alert(person.getAge());

Answer 2

There's no real "best practice" to speak of. The issue in your first example is a simple syntax error:

function Person(){
    this._age = 21;
}

Person.prototype.getAge = function(){
    return this._age; //21
}

var person = new Person();
person.getAge();

Option 2 also has a lot of syntax errors. Too many to go into detail here. This is the best explanation of these concepts that I know of: http://javascript.crockford.com/private.html

In option 1 and your third example, external code can modify the value of _age and age respectively. Which is to say that in option 1 I can come along and go:

person._age = 1000;

and that will actually update the value of _age within the object. In the case of what you're trying to do with option 2, no functions that are declared outside the Person "class" (really an Object) can modify the value of _age , which is probably a good thing in this context.

Answer 3

Inheritance can be easy:

inheritance using underscore

or if you like ExtJS

ExtJs inheritance behaviour