设置函数构造函数原型（示例中）
我试图理解“JavaScript：理解奇怪的部分”课程中的一个例子。有一行代码Greeter.init.prototype = Greeter.prototype;用于使函数构造函数Greeter.prototype创建的所有对象成为原型Greeter.init，因此我们可以在Greeter.prototype.
但我不明白为什么不直接在Greeter.init.prototype. 效果是一样的。该行Greeter.init.prototype = Greeter.prototype;看起来像是多余的代码。原始方法的优点是什么？
原始代码：
(function(global, $) {
var Greetr = function(firstName, lastName, language) {
return new Greetr.init(firstName, lastName, language);
}
Greetr.prototype = {
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
};
Greetr.init = function(firstName, lastName, language) {
var self = this;
self.firstName = firstName || '';
self.lastName = lastName || '';
self.language = language || 'en';
}
Greetr.init.prototype = Greetr.prototype;
global.Greetr = global.G$ = Greetr;
}(window, jQuery));
var g = G$('John', 'Doe');
console.log(g);
console.log(g.fullName());
<html>
<head>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>
简化代码：
(function(global, $) {
var Greetr = function(firstName, lastName, language) {
return new Greetr.init(firstName, lastName, language);
}
Greetr.init = function(firstName, lastName, language) {
var self = this;
self.firstName = firstName || '';
self.lastName = lastName || '';
self.language = language || 'en';
}
Greetr.init.prototype = {
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
};
global.Greetr = global.G$ = Greetr;
}(window, jQuery));
var g = G$('John', 'Doe');
console.log(g);
console.log(g.fullName());
<html>
<head>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>
Smart猫小萌1回答
-
慕标琳琳
由于Greetr构造函数调用Greetr.init构造函数，并通过显式返回对象来覆盖其返回值，因此它们之间没有区别。这两段代码创建完全相同的对象结构并以相同的方式工作，但有一点不同：第二段代码保持Greetr.prototype其初始状态。然而，最有可能的是，原始代码对同一个对象进行了创建Greetr.prototype，Greetr.init.prototype因为这样就可以在不输入 的情况下访问和/或扩展它.init，这更具语义性：您打算更改由 所创建的对象的原型Greetr，其原型通常是Greetr.prototype。另外，在第一个代码中，instanceof将把由Greetr和创建的对象视为Greetr.init的实例Greetr。所以：(function(global, $) { var Greetr = function(firstName, lastName, language) { return new Greetr.init(firstName, lastName, language); } Greetr.prototype = { fullName: function() { return this.firstName + ' ' + this.lastName; } }; Greetr.init = function(firstName, lastName, language) { var self = this; self.firstName = firstName || ''; self.lastName = lastName || ''; self.language = language || 'en'; } Greetr.init.prototype = Greetr.prototype; global.Greetr = global.G$ = Greetr; }(window, jQuery));var g = G$('John', 'Doe');console.log(g instanceof G$);<html> <head> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </body></html>(function(global, $) { var Greetr = function(firstName, lastName, language) { return new Greetr.init(firstName, lastName, language); } Greetr.init = function(firstName, lastName, language) { var self = this; self.firstName = firstName || ''; self.lastName = lastName || ''; self.language = language || 'en'; } Greetr.init.prototype = { fullName: function() { return this.firstName + ' ' + this.lastName; } }; global.Greetr = global.G$ = Greetr; }(window, jQuery));var g = G$('John', 'Doe');console.log(g instanceof G$);<html> <head> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </body></html>
随时随地看视频慕课网APP
相关分类
JavaScript