为了账号安全,请及时绑定邮箱和手机立即绑定

设置函数构造函数原型(示例中)

设置函数构造函数原型(示例中)

Smart猫小萌 2023-08-18 17:06:27
我试图理解“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>
查看完整描述

1 回答

?
慕标琳琳

TA贡献1830条经验 获得超9个赞

由于Greetr构造函数调用Greetr.init构造函数,并通过显式返回对象来覆盖其返回值,因此它们之间没有区别。

这两段代码创建完全相同的对象结构并以相同的方式工作,但有一点不同:第二段代码保持Greetr.prototype其初始状态。

然而,最有可能的是,原始代码对同一个对象进行了创建Greetr.prototypeGreetr.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>


查看完整回答
反对 回复 2023-08-18
  • 1 回答
  • 0 关注
  • 98 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信