在Javascript中访问对象和原型

我不太了解JavaScript中的对象创建和添加/扩展方法。我知道一切都是一个对象，使用函数作为构造函数，但我不太了解原型和创建/调用新方法

var c1 = {
    name: "Neil",
};

var c2 = function() {
this.name = "Neil";
};

通过以上两项，我可以添加新内容：

c1.town = "a town";
c2.town = "a town";

c1.setTown = function(newTown) { this.town = newTown;};
c2.setTown = function(newTown) { this.town = newTown;};

当我遇到问题时，我可以使用函数方法：

c2.prototype.setTown2 = function(newTown) { this.town = newTown;};
c3 = new c2();
c3.setTown2("new3");

1：setTown和setTown2之间有什么区别？为什么对于c3，我可以调用c3.town=“x”和c3.setTown2（“x”），但不能调用c3.setTown（“x”）

2：我似乎无法访问c1的“原型”（字面构造函数方法），这是为什么

---

谢谢。

这是因为像

c1

这样的JavaScript文本构造函数创建了一个实际的

对象

，而像

c2

这样的

函数创建的构造函数可以用来创建像
c3
那样的对象。下面是通过JavaScript注释对代码的分析：

//This is a literal object with property name equal to "Neil":
var c1 = {
    name: "Neil",
};
//We do not need to access the prototype here because c1 is an object, not a constructor:
console.log(c1.name);

//This is a constructor that creates an object with property name of "Neil".
var c2 = function() {
    this.name = "Neil";
};

//This creates a property town of "a town" on c1. This works because c1 is a regular object.
c1.town = "a town";
//This creates a property town of "a town" on c2. However, if you create an object with c2, the object will not inherit town because it is not on the prototype.
//This does not throw an error because even though c2 is a function, you can still set the property town on it because this property is what's called a _static property_. Static properties are properties that are set without the prototype like the property below:
c2.town = "a town";
//With c1, we do not need to access prototype because it's a regular object and with c2, we do not need to access prototype because it's a static property.
console.log(c1.town, c2.town);

//This works the same as above, except now, we're using functions instead of regular properties.
c1.setTown = function(newTown) { this.town = newTown;};
c2.setTown = function(newTown) { this.town = newTown;};
//This sets the town property of c1 like with a regular object:
c1.setTown("HI!");
//This sets the static property town of c2 because "this" in the static method c2.setTown is c2, so "this.town" is "c2.town", or the static property town which we set above:
c2.setTown("HI!");
//Both of the following outputs "HI!" because of the .setTown() calls above.
console.log(c1.town, c2.town);

//This method is set on the prototype of c2, meaning that objects made with c2 will inherit this method.
c2.prototype.setTown2 = function(newTown) { this.town = newTown;};

//This is an object made with the constructor c2. It inherits name because of the actual constructor function and it inherits setTown2 from the prototype. However, it does NOT inherit c2.town and c2.setTown because those are static properties not on the prototype.
c3 = new c2();
//This sets the town property of c3 because c3 inherited the setTown2 method from c2.prototype, so that method now sets the properties of c3.
c3.setTown2("new3");
//c3.name outputs "Neil" because of the c2 constructor function and c3.town outputs "new3" because of the above c3.setTown2() call:
console.log(c3.name, c3.town);

这是因为像
c1
这样的JavaScript文本构造函数创建了一个实际的
对象
，而像
c2
这样的
函数则创建了可以用来创建对象的构造函数，就像你使用
c3
那样。下面是通过JavaScript注释对代码的分析：

//This is a literal object with property name equal to "Neil":
var c1 = {
    name: "Neil",
};
//We do not need to access the prototype here because c1 is an object, not a constructor:
console.log(c1.name);

//This is a constructor that creates an object with property name of "Neil".
var c2 = function() {
    this.name = "Neil";
};

//This creates a property town of "a town" on c1. This works because c1 is a regular object.
c1.town = "a town";
//This creates a property town of "a town" on c2. However, if you create an object with c2, the object will not inherit town because it is not on the prototype.
//This does not throw an error because even though c2 is a function, you can still set the property town on it because this property is what's called a _static property_. Static properties are properties that are set without the prototype like the property below:
c2.town = "a town";
//With c1, we do not need to access prototype because it's a regular object and with c2, we do not need to access prototype because it's a static property.
console.log(c1.town, c2.town);

//This works the same as above, except now, we're using functions instead of regular properties.
c1.setTown = function(newTown) { this.town = newTown;};
c2.setTown = function(newTown) { this.town = newTown;};
//This sets the town property of c1 like with a regular object:
c1.setTown("HI!");
//This sets the static property town of c2 because "this" in the static method c2.setTown is c2, so "this.town" is "c2.town", or the static property town which we set above:
c2.setTown("HI!");
//Both of the following outputs "HI!" because of the .setTown() calls above.
console.log(c1.town, c2.town);

//This method is set on the prototype of c2, meaning that objects made with c2 will inherit this method.
c2.prototype.setTown2 = function(newTown) { this.town = newTown;};

//This is an object made with the constructor c2. It inherits name because of the actual constructor function and it inherits setTown2 from the prototype. However, it does NOT inherit c2.town and c2.setTown because those are static properties not on the prototype.
c3 = new c2();
//This sets the town property of c3 because c3 inherited the setTown2 method from c2.prototype, so that method now sets the properties of c3.
c3.setTown2("new3");
//c3.name outputs "Neil" because of the c2 constructor function and c3.town outputs "new3" because of the above c3.setTown2() call:
console.log(c3.name, c3.town);

这是因为像
c1
这样的JavaScript文本构造函数创建了一个实际的
对象
，而像
c2
这样的
函数则创建了可以用来创建对象的构造函数，就像你使用
c3
那样。下面是通过JavaScript注释对代码的分析：

//This is a literal object with property name equal to "Neil":
var c1 = {
    name: "Neil",
};
//We do not need to access the prototype here because c1 is an object, not a constructor:
console.log(c1.name);

//This is a constructor that creates an object with property name of "Neil".
var c2 = function() {
    this.name = "Neil";
};

//This creates a property town of "a town" on c1. This works because c1 is a regular object.
c1.town = "a town";
//This creates a property town of "a town" on c2. However, if you create an object with c2, the object will not inherit town because it is not on the prototype.
//This does not throw an error because even though c2 is a function, you can still set the property town on it because this property is what's called a _static property_. Static properties are properties that are set without the prototype like the property below:
c2.town = "a town";
//With c1, we do not need to access prototype because it's a regular object and with c2, we do not need to access prototype because it's a static property.
console.log(c1.town, c2.town);

//This works the same as above, except now, we're using functions instead of regular properties.
c1.setTown = function(newTown) { this.town = newTown;};
c2.setTown = function(newTown) { this.town = newTown;};
//This sets the town property of c1 like with a regular object:
c1.setTown("HI!");
//This sets the static property town of c2 because "this" in the static method c2.setTown is c2, so "this.town" is "c2.town", or the static property town which we set above:
c2.setTown("HI!");
//Both of the following outputs "HI!" because of the .setTown() calls above.
console.log(c1.town, c2.town);

//This method is set on the prototype of c2, meaning that objects made with c2 will inherit this method.
c2.prototype.setTown2 = function(newTown) { this.town = newTown;};

//This is an object made with the constructor c2. It inherits name because of the actual constructor function and it inherits setTown2 from the prototype. However, it does NOT inherit c2.town and c2.setTown because those are static properties not on the prototype.
c3 = new c2();
//This sets the town property of c3 because c3 inherited the setTown2 method from c2.prototype, so that method now sets the properties of c3.
c3.setTown2("new3");
//c3.name outputs "Neil" because of the c2 constructor function and c3.town outputs "new3" because of the above c3.setTown2() call:
console.log(c3.name, c3.town);

这是因为像
c1
这样的JavaScript文本构造函数创建了一个实际的
对象
，而像
c2
这样的
函数则创建了可以用来创建对象的构造函数，就像你使用
c3
那样。下面是通过JavaScript注释对代码的分析：

//This is a literal object with property name equal to "Neil":
var c1 = {
    name: "Neil",
};
//We do not need to access the prototype here because c1 is an object, not a constructor:
console.log(c1.name);

//This is a constructor that creates an object with property name of "Neil".
var c2 = function() {
    this.name = "Neil";
};

//This creates a property town of "a town" on c1. This works because c1 is a regular object.
c1.town = "a town";
//This creates a property town of "a town" on c2. However, if you create an object with c2, the object will not inherit town because it is not on the prototype.
//This does not throw an error because even though c2 is a function, you can still set the property town on it because this property is what's called a _static property_. Static properties are properties that are set without the prototype like the property below:
c2.town = "a town";
//With c1, we do not need to access prototype because it's a regular object and with c2, we do not need to access prototype because it's a static property.
console.log(c1.town, c2.town);

//This works the same as above, except now, we're using functions instead of regular properties.
c1.setTown = function(newTown) { this.town = newTown;};
c2.setTown = function(newTown) { this.town = newTown;};
//This sets the town property of c1 like with a regular object:
c1.setTown("HI!");
//This sets the static property town of c2 because "this" in the static method c2.setTown is c2, so "this.town" is "c2.town", or the static property town which we set above:
c2.setTown("HI!");
//Both of the following outputs "HI!" because of the .setTown() calls above.
console.log(c1.town, c2.town);

//This method is set on the prototype of c2, meaning that objects made with c2 will inherit this method.
c2.prototype.setTown2 = function(newTown) { this.town = newTown;};

//This is an object made with the constructor c2. It inherits name because of the actual constructor function and it inherits setTown2 from the prototype. However, it does NOT inherit c2.town and c2.setTown because those are static properties not on the prototype.
c3 = new c2();
//This sets the town property of c3 because c3 inherited the setTown2 method from c2.prototype, so that method now sets the properties of c3.
c3.setTown2("new3");
//c3.name outputs "Neil" because of the c2 constructor function and c3.town outputs "new3" because of the above c3.setTown2() call:
console.log(c3.name, c3.town);

你熟悉继承吗？这是编程中的一个常见概念，是在javascript中模拟继承的方法

基本上，当您向原型添加新方法或变量时，您会修改对象的主结构。。。因此，当您决定从modify'class（我知道JS中没有类）创建一个新对象时，它剩下的唯一方法就是原型中的方法

更多信息：
您熟悉继承吗？这是编程中的一个常见概念，是在javascript中模拟继承的方法

基本上，当您向原型添加新方法或变量时，您会修改对象的主结构。。。因此，当您决定从modify'class（我知道JS中没有类）创建一个新对象时，它剩下的唯一方法就是原型中的方法

更多信息：
您熟悉继承吗？这是编程中的一个常见概念，是在javascript中模拟继承的方法

基本上，当您向原型添加新方法或变量时，您会修改对象的主结构。。。因此，当您决定从modify'class（我知道JS中没有类）创建一个新对象时，它剩下的唯一方法就是原型中的方法

更多信息：
您熟悉继承吗？这是编程中的一个常见概念，是在javascript中模拟继承的方法

基本上，当您向原型添加新方法或变量时，您会修改对象的主结构。。。因此，当您决定从modify'class（我知道JS中没有类）创建一个新对象时，它剩下的唯一方法就是原型中的方法

更多信息：

1:
setTown
和
setTown2

它们都是函数，但是每次您想将其添加为方法时都会创建一个新函数，其中使用
prototype
自动继承它：

var c3 = new c2();
var c4 = new c2();

c3.setTown = function(newTown) { this.town = newTown;};
c4.setTown = function(newTown) { this.town = newTown;};

console.log(c3.setTown === c4.setTown) // false
console.log(c3.setTown2 === c4.setTown2) // true 

另外，
setTown
是对象
c3
和
c4
的属性，其中
setTown2
不是。这是遗传的。这意味着：

console.log(c3.hasOwnProperty("setTown")); // true
console.log(c3.hasOwnProperty("setTown2")); // false

因此，
Object.keys
不会返回
setTown2
；但是如果在
循环中为…执行一个
，您将获得自己的属性和继承的属性

为什么我可以为c3打电话给c3.town=“x”

因为您只是添加了一个属性。除非对象是，或者您可以随时添加所需的任何属性。您还可以添加
c3.foo=“bar”
，即使它不在原型中或未添加在构造函数中

和c3.setTown2（“x”），但不称为c3.setTown（“x”）

因为它是一个继承的方法，所以对象可以通过原型链获得它；但您永远不会将
setTown
添加到
c3
实例或其原型链中的任何对象

2：我似乎无法访问c1的“原型”（字面构造函数方法），这是为什么

因为
prototype
仅是函数的属性，所以可以将其用作构造函数
c1
已经是一个对象，因此不需要将另一个对象作为“原型”。您可以直接使用
c1
作为对象的原型，在其基础上创建其他对象：

var cc1 = Object.create(c1);

它将继承
c1
拥有的所有方法和属性，因此：

console.log(cc1.name) // "Neil"
console.log(cc1.hasOwnProperty("name")) // false

正如我们在第一点中看到的

希望能有帮助

1:
setTown
和
setTown2

它们都是函数，但是每次您想将其添加为方法时都会创建一个新函数，其中使用
prototype
自动继承它：

var c3 = new c2();
var c4 = new c2();

c3.setTown = function(newTown) { this.town = newTown;};
c4.setTown = function(newTown) { this.town = newTown;};

console.log(c3.setTown === c4.setTown) // false
console.log(c3.setTown2 === c4.setTown2) // true 

另外，
setTown
是对象
c3
和
c4
的属性，其中
setTown2
不是。这是遗传的。这意味着：

console.log(c3.hasOwnProperty("setTown")); // true
console.log(c3.hasOwnProperty("setTown2")); // false

因此，
Object.keys
不会返回
setTown2
；但是如果在
循环中为…执行一个
，您将获得两个自己的属性