<!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript">

         /**

          * 为了解决原型带来的所有问题，此时需要通过组合构造函数和原型来实现对象的创建

          * 将属性在构造函数中定义，将方法在原型中定义

          * 这种有效集合了两者的有点，是目前最为有效的一种方式

          * @constructor

          */

         function Person(name , age , friends){

             this.name = name;

             this.age = age;

             this.friends = friends;

         }

         Person.prototype = {

             constructor : Person,

             //方法在原型中定义

             say : function(){

                 console.info(this.name + "[" + this.friends + "]");

             }

         }

         //此时所有的属性都保存在自己的空间

         var p1 = new Person("leon" , 23 , ["Ada" , "Chris"]);

         p1.name  = "John";

         p1.say();  //John[Ada,Chris]

         p1.friends.push("Mike");

         p1.say();  //John[Ada,Chris,Mike]

         var p2 = new Person("Ada" , 33 , ["Leon"]);

         p2.say();//Ada[Leon]

     </script>

 </head>

 <body>

 </body>

 </html>

为了让定义的方法更加符合java的写法，如下：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript">

         /**

          * 为了让定义的方式更加符合java的需求，就需要把定义方法的原型代码放置到Person这个构造函数中

          */

         function Person(name , age , friends){

             //属性在构造器中定义

             this.name = name;

             this.age = age;

             this.friends = friends;

             /**

              * 不能使用重写的方式定义

              *   Person.prototype = {

                      constructor : Person,

                      //方法在原型中定义

                      say : function(){

                           console.info(this.name + "[" + this.friends + "]");

                      }

                   }

              */

             console.info(Person.prototype.say);   //undefined

             //每次new一个对象 将再次定义该方法

             Person.prototype.say = function(){

                 console.info(this.name + "[" + this.friends + "]");

             }

             console.info(Person.prototype.say);  //function()

             /**

              *  解决每次创建对象将再次定义该方法的方案：

              *  判断Person.prototype.say是否凑在，如果不存在就标识创建，

              *  当存在之后就不再创建

              */

             if(!Person.prototype.say){

                 Person.prototype.say = function(){

                     console.info(this.name + "[" + this.friends + "]");

                 }

             }

         }

         //此时所有的属性都保存在自己的空间

         var p1 = new Person("leon" , 23 , ["Ada" , "Chris"]);

         p1.name  = "John";

         p1.say();  //John[Ada,Chris]

         p1.friends.push("Mike");

         p1.say();  //John[Ada,Chris,Mike]

         var p2 = new Person("Ada" , 33 , ["Leon"]);

         p2.say();//Ada[Leon]

     </script>

 </head>

 <body>

 </body>

 </html>

js 解决原型问题的方案 ： 构造器和原型的组合的更多相关文章

  1. 三张图搞懂JavaScript的原型对象与原型链 / js继承，各种继承的优缺点（原型链继承，组合继承，寄生组合继承）

    摘自:https://www.cnblogs.com/shuiyi/p/5305435.html 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__pro ...

  2. js---12对象创建方式，构造器，原型

    <script type="text/javascript"> var o = {}; var o1 = new Object();//这2种方式创建对象是一样的,因为 ...

  3. Spirit带你彻底搞懂JS的6种继承方案

    JavaScript中实现继承的6种方案 01-原型链的继承方案 function Person(){ this.name="czx"; } function Student(){ ...

  4. JavaScript简单重写构造器的原型

    //简单重写原型对象: //一个构造函数Person function Person(){ } //重写Person的原型 //把Person的原型赋值给一个新的对象 是我们重写的过程 Person. ...

  5. JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)

    什么是面向对象?面向对象是一种思想. 面向对象可以把程序中的关键模块都视为对象, 而模块拥有属性及方法. 这样如果我们把一些属性及方法封装起来,日后使用将非常方便,也可以避免繁琐重复的工作.   工厂 ...

  6. JavaScript (JS) 面向对象编程 浅析 (含对象、函数原型链、闭包解析)

    1. 构造函数原型对象:prototype ① 构造函数独立创建对象,消耗性能 function Person(name) { this.name = name; this.sayHello = fu ...

  7. JS面向对象（1）——构造函数模式和原型模式

    1.构造函数模式 构造函数用来创建特定的类型的对象.如下所示: function Person(name,age,job){ this.name=name; this.job=job; this.ag ...

  8. js静态私有变量（将方法变成原型模式，被所有实例共享，而方法操作变量，故变量是静态）

    js静态私有变量(将方法变成原型模式,被所有实例共享,而方法操作变量,故变量是静态) 一.总结 1.js函数中的private和public:js函数中的私有变量 var 变量名,公有变量 this. ...

  9. 搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

    什么是跨域 跨域:一个域下的文档或脚本试图去请求另一个域下的资源 广义的跨域包含一下内容: 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源请求(内部的引用,脚本script,图片img,fr ...

  10. HTML5 respond.js 解决IE6~8的响应式布局问题

    HTML5 respond.js 解决IE6~8的响应式布局问题   响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...

随机推荐

  1. Android Studio你不知道的调试技巧

    写代码不可避免有Bug,通常情况下除了日志最直接的调试手段就是debug:那么你的调试技术停留在哪一阶段呢?仅仅是下个断点单步执行吗?或者你知道 Evaluate Expression, 知道条件断点 ...

  2. 25个有用的jQuery日历和日期选取插件

    jQuery被认为是最好的JavaScript库,因为它简单易用.灵活,并有大量的插件.本文介绍25个非常不错的jQuery日历和日期选取插件,希望对各位有用. 1. Simple JQuery Da ...

  3. 数据绑定表达式(上)：.NET发现之旅(一)

    数据绑定表达式(上):.NET发现之旅(一) 2009-06-30 10:29:06 来源:网络转载 作者:佚名 共有评论(0)条 浏览次数:859 作为.NET平台软件开发者,我们频繁与各种各样的数 ...

  4. [Everyday Mathematics]20150304

    证明: $$\bex \frac{2}{\pi}\int_0^\infty \frac{1-\cos 1\cos \lm-\lm \sin 1\sin \lm}{1-\lm^2}\cos \lm x\ ...

  5. C++模板知识小结

    模板定义:模板就是实现代码重用机制的一种工具,它可以实现类型参数化,即把类型定义为参数, 从而实现了真正的代码可重用性.模版可以分为两类,一个是函数模版,另外一个是类模版. 由于类模板包含类型参数,因 ...

  6. delphi 中字符串与16进制、10进制转换函数

      //字符串转成16进制代码function strToHexStr(str:string):string;varc:char;ss:string;i:integer;beginwhile str& ...

  7. Win7+VS2013初试Thrift

    win7环境下VS2013编译boost_1_58_0步骤: 官网下载boost_1_58_0(直接下载),解压 cmd窗口cd到boost_1_58_0,执行bootstrap.bat cmd窗口获 ...

  8. Linux 下C++编写

    今天搞了一天Linux下C++编程,还没有什么成效.好烦躁好心焦,想砸电脑的冲动.抽根烟理下思路一定要把它拿下!! ===搞了两天,真是搞到生无可恋,试了共享文件, 试了网络配置,各种博客就是各种行不 ...

  9. C++中cin、cin.get()、cin.getline()、getline()、gets()等函数的用法----细节决定成败 （sort用法）

    C++中cin.cin.get().cin.getline().getline().gets()等函数的用法 学C++的时候,这几个输入函数弄的有点迷糊:这里做个小结,为了自己复习,也希望对后来者能有 ...

  10. Spring MVC 问题列表：目录

    学习SpringMVC时遇到不少问题,这里将其汇总. 1.怎么搭建SpringMVC 2.SpringMVC和Spring使用是配置到一个文件中还是两个配置文件 3.SpringMVC接受从前台请求 ...