JavaScript之面向对象学习六原型模式创建对象的问题,组合使用构造函数模式和原型模式创建对象

时间:2022-09-24 11:30:31

一、仔细分析前面的原型模式创建对象的方法,发现原型模式创建对象,也存在一些问题,如下:

1、它省略了为构造函数传递初始化参数这个环节,结果所有实例在默认的情况下都将取得相同的属性值,这还不是最大的问题!

2、最大的问题是原型中的所有属性是被很多实例所共享的,这种共享对于函数非常合适,对于那些包含基本值的属性也说得过去,因为我们知道可以在实例上添加一个同名属性,可以隐藏原型中的对应属性。但是对于包含应用类型值的属性来说,问题就非常严重了,代码如下:

function Person(){
}
Person.prototype={
constructor:Person,
name:"张三",
age:22,
job:"coder",
friends:["李四","王五"],
sayName:function(){
alert(this.name);
}
}
var person1=new Person();
var person2=new Person(); person1.friends.push("赵六");
alert(person1.friends); //输出:李四,王五,赵六
alert(person2.friends);//输出:李四,王五,赵六

分析上面的代码,当我们为person1添加一个朋友的时候,发现person2同时也被添加了一个朋友,但这并不是我们想要的,而这正是因为原型模式的共享的本性所导致的,只要任何一个实例修改了原型属性对象中的属性值,所有与该原型对象关联的实例都会受到影响!

二、组合使用构造函数模式和原型模式

为了解决原型模式不能初始化参数和共享对于引用模式所存在的问题!这里我们可以采用构造函数模式和原型模式的结合模式来创建自定义类型,构造函数用于与解决初始化参数(实例属性的定义),原型模式用于共享  方法和constructor。

这种构造函数与原型组合的模式创建自定义类型,是ECMAScript中使用最广泛、认同度最高的一种创建自定义类型的方法。可以说,这是用来定义引用类型的一种默认模式。

代码如下:

    function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.friends=["小超","大超"];
}
Person.prototype={
constructor:Person,
sayName:function(){
alert(this.name);
}
}
var person1=new Person("张三",22,"coder");
var person2=new Person("李四",22,"coder");
person1.friends.push("Stephen Curry","Kevin Durant");
alert(person1.friends); //输出:小超,大超,Stephen Curry,Kevin Durant
alert(person2.friends);//输出:小超,大超

通过上面的输出我们发现组合使用构造函数模式和原型模式创建的自定义类型及解决了

1、构造函数:构造函数创建类型相同的函数,确是不同的作用域链和标识符解析(因为在JS中每创建一个函数就是一个对象,所以  (导致了构造函数中的方法)  在不同的实例中都需要重新创建一遍,但是这些方法做的确实同一件事情);

2、原型模式:其不能初始化参数,以及它的共享性对与一些引用类型所造成的影响(比如数组);

JavaScript之面向对象学习六原型模式创建对象的问题,组合使用构造函数模式和原型模式创建对象的更多相关文章

  1. JavaScript之面向对象学习七(动态原型模式、寄生构造函数模式、稳妥构造函数模式创建自定义类型)

    一.动态原型模式 在面向对象学习六中的随笔中,了解到组合构造函数模式和原型模式创建的自定义类型可能最完善的!但是人无完人,代码亦是如此! 有其他oo语言经验的开发人员在看到独立的构造函数和原型时,很可 ...

  2. JavaScript之面向对象学习一

    1.通过Object构造函数和对象字面量来创建对象缺点:使用同一个接口创建很多的对象,会产生大量的重复代码.比如我需要创建人的对象,并且需要三类人,医生.工程师.老师,他们可以抽象出很多属性,比如姓名 ...

  3. JavaScript之面向对象学习五(JS原生引用类型Array、Object、String等等)的原型对象介绍

    1.原型模式的重要性不仅仅体现在创建自定义类型方面,就连所有的原生的引用类型(Obejct.Array.String等等)都在构造函数的原型上定义方法和属性.如下代码可以证明: alert(typeo ...

  4. JavaScript之面向对象学习八(继承)

    简介:继承是OO语言中的一个最为人津津乐道的概念.许多OO语言都支持两种继承方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法. 但是JS的函数并没有签名,所以在ECMASc ...

  5. JavaScript之面向对象学习四原型对象的动态性

    1.由于在原型中查找值的过程是一次搜索,因此我们对原型对象所做的任何修改都能够立即从实例上反映出来---即便是先创建了实例后修改原型也是如此.代码如下: function Person(){ } va ...

  6. JavaScript之面向对象学习三原型语法升级

    1.到目前为止,我们是时候分析下前面的使用原型语法来定义对象有哪些不足的地方,代码如下: function Person(){ } Person.prototype.name="张三&quo ...

  7. JavaScript之面向对象学习二(原型属性对象与in操作符)获取对象中所有属性的方法

    1.原型属性对象于in操作符之in单独使用 有两种方式使用in操作符:单独使用和在for-in循环中使用.在单独使用中,代码如下: function Person(){ } Person.protot ...

  8. javascript创建对象的方法--组合模式

    javascript创建对象的方法--组合模式 一.总结 0.作用:解决原型模式对象独有属性创建麻烦的问题 1.组合模式使用普遍:jquery就是用的组合模式,组合模式使用非常普遍 2.组合模式优点: ...

  9. javascript创建对象的方法--原型模式

    javascript创建对象的方法--原型模式 一.总结 1.原型模式解决内存浪费的方法(继承):通过继承,对象继承原型模式下的所有属性,对象不同于其它对象的的属性自己创建或者修改 2.原型的使用(p ...

随机推荐

  1. jQuery Ajax传值给Servlet,在Servlet里Get接受参数乱码的解决方法

    最近在学jquery ui,在做一个小功能的时候需要将前台的值获取到,通过Ajax传递给Servlet,然后再在返回数据结果,但是在Servlet接受参数的时候,通过后台打印,发现接受乱码,代码示例如 ...

  2. Selenium WebDriver Code

    Selenium WebDriver 用于模拟浏览器的功能,可以做网站测试用,也可以用来做crawler.我是用eclipse开发的,导入selenium-server-standalone-***. ...

  3. Git的常用操作

    $ git log //查看commit记录 $ git add <file> //添加文件到commit中 .代表所有改动的文件 $ git commit -m 'meesage' // ...

  4. 【转】转换到 COFF 期间失败&colon; 文件无效或损坏

    不知怎么本来编译好好的VS2010环境,忽然出现“转换到 COFF 期间失败: 文件无效或损坏”的链接错误.花了好多天,试了好多方法,最终解决了这个问题.   现在罗列一下这几种解决方案:   方案1 ...

  5. 【HDOJ】【3530】Subsequence

    DP/单调队列优化 题解:http://www.cnblogs.com/yymore/archive/2011/06/22/2087553.html 引用: 首先我们要明确几件事情 1.假设我们现在知 ...

  6. python类class基础

              44.class类:                      一.类定义的一般形式:                            1.简单的形式:实例化对象没有自己独有 ...

  7. mybatis属性详解

    前言 MyBatis是基于"数据库结构不可控"的思想建立的,也就是我们希望数据库遵循第三范式或BCNF,但实际事与愿违,那么结果集映射就是MyBatis为我们提供这种理想与现实间转 ...

  8. jenkins安装配置

    一.下载Jenkins 官网地址:https://jenkins.io/,图如下所示,点击下载可下载最新版本. 点击下载之后,我们可以看到下面的图,我这边选择的Jenkins.war 文件. 下面,使 ...

  9. 在干净的ubuntu 14&period;10上编译Qemu2&period;2&period;0的过程

    下载Qemu的源代码 从官网http://wiki.qemu.org/Main_Page 中下载最新的源代码,目前是2.2.0. 安装依赖库和编译 编译过程分两步1. ./configure 2. m ...

  10. mongodb相关文章

    1.Windows 平台安装 MongoDB 2.MONGODB基本命令用 3.MongoDB 教程