Question

我正在学习JavaScript，我在w3schools.com上看到了这个例子（是的，我知道w3fools）：

<script>
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.changeName=changeName; 
function changeName(name)
{
this.lastname=name;
}

}
myMother=new person("Sally","Rally",48,"green");
myMother.changeName("Doe");
document.write(myMother.lastname);
</script>

当我尝试删除this.changeName=changeName;部分时，该功能不再起作用。我的问题是为什么需要这部分？没有任何解释，就在那里。

Answer 1

我们可能会重写代码以使其更清晰：

function person(firstname,lastname,age,eyecolor) {
    ...
    var myChangeNameFunc = function(name) {
        this.lastname = name;
    }
    this.changeName = myChangeNameFunc; 
}

甚至更短，使用匿名函数：

function person(firstname,lastname,age,eyecolor) {
    ...
    this.changeName = function(name) {
        this.lastname = name;
    }
}

new关键字创建一个新对象，允许您通过this标识符修改该对象，然后返回新对象。通过执行this.changeName=changeName，您可以将changeName函数分配给changeName中新创建的对象的this属性。

这有点令人困惑，所以在我上面的第一个例子中，我做了this.changeName = myChangeNameFunc以明确构造函数范围变量myChangeNameFunc和对象属性this.changeName是不同的变量（虽然在这种情况下，他们最终会引用同一个对象）。

如果没有该赋值，myChangeNameFunc函数永远不会附加到新创建的对象 - 它只是person构造函数中定义的函数。

一些奖金背景：

function(name) { this.lastname = name; }是函数表达式。
var myNameChangeFunc = function() { } 将该函数表达式赋给构造函数中的局部变量。（JS中的变量是函数范围的，因此在构造函数之外无法访问myNameChangeFunc。）
function changeName（）{}是函数定义。这与var changeName = function() { }基本相同，只是赋值被“提升”到包含函数的顶部（所以想象它是构造函数的第一行）。

因此，该函数最初存储在构造函数局部变量中。通过将其存储在this的属性中，它将成为构造对象的方法，而不仅仅是构造函数本地的函数。

Answer 2

单独看，function changeName是person构造函数范围的本地，因此在该范围之外不可见 - 它有点像私有方法。

如果您希望该方法可以从外部世界调用，那么您必须在新创建的人员上创建一个属性并将其值设置为该函数。这样，它可以作为myMother.changeName访问（就像任何其他属性一样）并被调用。

Answer 3

让我们考虑这个例子：

var object = {};

function someFn() {}

您可以清楚地看到object没有someFn成员。如果您希望object拥有我们需要执行的someFn功能：

object.someFn = someFn;

在您的示例中，您可以想象前一个示例中的this是object。 changeName只是在构造函数的函数范围内声明的私有变量，因此如果您希望它是实例化对象上的公共函数，则需要将其分配给this。

为什么需要将用作对象构造函数的函数内的JavaScript方法分配给对象的属性？

3 个答案: