对象构造:原型是否真的有必要
Object construction: is the prototype really necessary?
我正在探索JavaScript中的遗产概念,我认为我错过了一些东西。
我的目标:我想创建一个继承自另一个对象的对象。JavaScript,我认为我错过了一些东西。
例如,我创建了一个对象"Student",该对象继承自对象"Personne"。
我可以通过两种方式实现这一目标:
- 第一种方法:我在构造函数的原型中声明属性和方法(参见示例 1)。
- 第二种方法:我在构造函数本身中声明属性和方法(参见示例 2)。
从我的角度来看,这两种方式都很好。我的意思是:显然,无论哪种方式都可以正常工作。
但是,如果我看第二种方式,那么我注意到该对象没有原型。因此,我认为:这正常吗?事实上,我更喜欢第二种方式,因为我发现它更优雅。
注意:我给出了一个应该与 NodeJs 一起使用的现成脚本。我也给出执行结果。
所以我的问题是:
- 两种方式是否等效?
- 如果是,那么:"原生型"属性的目的是什么?(似乎,按照第二种方式,它没有定义)。
谢谢
示例 1:我在构造函数的原型中声明属性和方法
// ---------------------------------------------
// We define a Personne.
// ---------------------------------------------
var Personne = function(inName) { // This is the constructor.
// Do some initialization.
console.log("Executing the constructor Personne.");
if ('undefined' != typeof inName) {
this.name = inName;
}
}
var PersonnePrototype = { // This is the prototype.
name: undefined,
setName: function(inName) { this.name = inName; },
getName: function() { return this.name; }
};
Personne.prototype = PersonnePrototype;
// ---------------------------------------------
// We define a Student.
// ---------------------------------------------
var Student = function(inAge, inName) { // This is the constructor.
// Do some initialization.
console.log("Executing the constructor Student with inAge=%d and inName=%s.", inAge, inName);
if ('undefined' !== typeof inAge) {
this.setAge(inAge);
}
if ('undefined' !== typeof inName) {
this.setName(inName);
}
}
Student.prototype = new Personne();
Student.prototype.age = undefined;
Student.prototype.setAge = function(inAge) { this.age = inAge; };
Student.prototype.getAge = function() { return this.age; };
示例 2:我在构造函数本身中声明属性和方法
// ---------------------------------------------
// We define a Personne.
// ---------------------------------------------
var Personne = function(inName) {
// We define the prototype here.
this.name = undefined;
this.setName = function(inName) { this.name = inName; },
this.getName = function() { return this.name; }
// Do some initialization.
console.log("Executing the constructor Personne with inName=%s.", inName);
if ('undefined' !== typeof inName) {
this.name = inName;
}
}
// ---------------------------------------------
// We define a Student.
// ---------------------------------------------
var Student = function(inAge, inName) {
// We define the prototype here.
Personne.call(this, inName);
this.age = undefined;
this.setAge = function(inAge) { this.age = inAge; };
this.getAge = function() { return this.age; }
// Do some initialization.
console.log("Executing the constructor Student with inAge=%d and inName=%s.", inAge, inName);
if ('undefined' !== typeof inAge) {
this.setAge(inAge);
}
}
即用型脚本
if (process.argv.length < 3) {
console.log('Usage: node "%s" <test number (1|2)>', process.argv[1]);
return;
}
var test = process.argv[2];
if (test == 1) {
// -------------------------------------------------
// Executing test 1.
// -------------------------------------------------
console.log("Executing test 1");
(function() {
// ---------------------------------------------
// We define a Personne.
// ---------------------------------------------
var Personne = function(inName) { // This is the constructor.
// Do some initialization.
console.log("Executing the constructor Personne.");
if ('undefined' != typeof inName) {
this.name = inName;
}
}
var PersonnePrototype = { // This is the prototype.
name: undefined,
setName: function(inName) { this.name = inName; },
getName: function() { return this.name; }
};
Personne.prototype = PersonnePrototype;
// ---------------------------------------------
// We define a Student.
// ---------------------------------------------
var Student = function(inAge, inName) { // This is the constructor.
// Do some initialization.
console.log("Executing the constructor Student with inAge=%d and inName=%s.", inAge, inName);
if ('undefined' !== typeof inAge) {
this.setAge(inAge);
}
if ('undefined' !== typeof inName) {
this.setName(inName);
}
}
Student.prototype = new Personne();
Student.prototype.age = undefined;
Student.prototype.setAge = function(inAge) { this.age = inAge; };
Student.prototype.getAge = function() { return this.age; };
var Tom = new Student(12, "Tom");
console.log("The student %s is %d years old.", Tom.getName(), Tom.getAge());
var Joe = new Student();
Joe.setName("Joe");
Joe.setAge(20);
console.log("The student %s is %d years old.", Joe.getName(), Joe.getAge());
console.log(Joe.__proto__);
console.log(Object.getPrototypeOf(Joe));
})();
return;
}
if (test == 2) {
// -------------------------------------------------
// Executing test 2.
// -------------------------------------------------
console.log("Executing test 2");
(function() {
// ---------------------------------------------
// We define a Personne.
// ---------------------------------------------
var Personne = function(inName) {
// We define the prototype here.
this.name = undefined;
this.setName = function(inName) { this.name = inName; },
this.getName = function() { return this.name; }
// Do some initialization.
console.log("Executing the constructor Personne with inName=%s.", inName);
if ('undefined' !== typeof inName) {
this.name = inName;
}
}
// ---------------------------------------------
// We define a Student.
// ---------------------------------------------
var Student = function(inAge, inName) {
// We define the prototype here.
Personne.call(this, inName);
this.age = undefined;
this.setAge = function(inAge) { this.age = inAge; };
this.getAge = function() { return this.age; }
// Do some initialization.
console.log("Executing the constructor Student with inAge=%d and inName=%s.", inAge, inName);
if ('undefined' !== typeof inAge) {
this.setAge(inAge);
}
}
var Tom = new Student(12, "Tom");
console.log("The student %s is %d years old.", Tom.getName(), Tom.getAge());
var Joe = new Student();
Joe.setName("Joe");
Joe.setAge(20);
console.log("The student %s is %d years old.", Joe.getName(), Joe.getAge());
console.log(Joe.__proto__);
console.log(Object.getPrototypeOf(Joe));
})();
return;
}
console.log("Bad test number %d.", test);
执行:
$ node oo.js 1
Executing test 1
Executing the constructor Personne.
Executing the constructor Student with inAge=12 and inName=Tom.
The student Tom is 12 years old.
Executing the constructor Student with inAge=NaN and inName=undefined.
The student Joe is 20 years old.
{ age: undefined, setAge: [Function], getAge: [Function] }
{ age: undefined, setAge: [Function], getAge: [Function] }
和
$ node oo.js 2
Executing test 2
Executing the constructor Personne with inName=Tom.
Executing the constructor Student with inAge=12 and inName=Tom.
The student Tom is 12 years old.
Executing the constructor Personne with inName=undefined.
Executing the constructor Student with inAge=NaN and inName=undefined.
The student Joe is 20 years old.
{}
{}
-
在您的示例中,它们确实是等效的。
-
请注意,在构造函数中定义属性将为对象的每个实例创建它们的副本,但在原型中定义它们只会创建一个副本(原型中的副本)。
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 使用js/jQuery检查对象(而不是元素)是否真的存在
- 有没有办法检测用户是否真的远离计算机
- 检查数组位置是否真的未定义
- 对象构造:原型是否真的有必要
- res.writehead是否真的写到我的html页面的头部
- 检测 Javascript 变量是否真的未定义
- AngularJS:判断没有(各种类型的)输入是否为真的最简单方法
- 如何检查这个由空 json 输出导致的空对象是否真的为空
- 我怎么知道谷歌脚本是否真的在运行
- 检查是否设置了cookie以及是否真的启动功能
- 如何判断播放HTML5音频是否真的是在制造声音
- Fullcalendar 2是否与Bootstrap 3和Rails 4不兼容(我真的需要帮助……在这个问题上)
- 当键名具有数值时,JSON.parse()是否真的对属性进行排序?
- Angular 2 -验证一个文件是否真的是一个图像
- 选择.调用是否真的返回 d3 中的选择
- 我真的需要用jQuery检查元素是否存在吗
- 如何判断一个文件是否真的被下载和保存,尽管浏览器预取/缓存
- 在JavaScript中读取数组的' length '属性是否真的是一个昂贵的操作