谈谈 js中的几种模式 (一)

  今天看了《JavaScript 高级程序设计》(第三版)这本书,颇有收获,总想写点什么,只恨自己菜鸟一只写不出什么真知灼见,只能。。。。。。好了废话不多说,开篇了。

  大家都知道在js中可以用Object构造函数和对象字面量这

            //利用Object构造函数创建对象
            var person=new Object();
            person.name="DJL";
            person.age=22;
            //利用对象字面量创建对象
            var person2={
                name:"DJL",
                age:22
            }

            alert(person.name);//DJL
            alert(person2.name);//DJL            

  但是上诉两种创建对象的方法都有一个明显的缺点那就是使用同一个接口创建很多对象会产生很多重复的代码。为了解决这个问题js引入了工厂模式:

      function createPerson (name,age,job) {
                var o=new Object();
                o.name=name;
                o.age=age;
                o.job=job;
                o.sayName=function(){
                    alert(this.name);
                }

                return o;
            }

        var person1=createPerson ("DJL1",22,"student1");
        var person2=createPerson ("DJL2",22,"student2");

        alert(typeof createPerson ("DJL2",22,"student2"));//object

 

  

  这样我们在利用createPerson这个函数接口创建很多对象时,就不用每个都要去写o.name=name;o.age=age;这些重复的代码。工厂模式创建对象就在于在这个函数接口内部利用Object构造函数又创建了一个新的对象,然后return出来。但是,但是,但是,这种模式也是有问题的-----你怎么用instanceof ,即你怎么知道某个对象的具体类型,这样吗

alert(person1 instanceof createPerson);//这肯定是false啦

  为了解决这个问题,构造函数模式出来了

      function CreatePerson (name,age,job) {
                this.name=name;
                this.age=age;
                this.job=job;
                this.sayName=function(){
                    alert(this.name);
                }
            }

            var person1= new CreatePerson ("DJL1",22,"student1");
            var person2= new CreatePerson ("DJL2",22,"student2");
            alert(person1 instanceof CreatePerson);//true

与工厂模式不同的是:1  没有显示的创建新对象  2  直接将属性和方法赋值给了this对象  3  没有return 语句  4  函数名首字母大写

要创建CreatePerson的实例必须要使用关键字new。以这种方式新建对象会经历如下有如下4个过程

  1 创建新的对象

  2 将构造函数的作用域赋给新对象(因此this就指向了新对象)

  3 执行构造函数中的代码

  4 返回新对象

  利用构造函数模式,我们可以将来将他的实例标识为一种特定的类型。然而这种模式也是有缺点的,上例中我们创建了person1和person2这两个实例,有相同的方法名sayName,但是这两个同名函数却不是相等的

  

alert(person1.sayName==person2.sayName)  //false

但是有时我们同一个构造函数不同实例中的同名函数来共同完成一件事情怎么办,下面这是一种办法

      function CreatePerson (name,age,job) {
                this.name=name;
                this.age=age;
                this.job=job;
                this.sayName=sayName;
            }

            function sayName(){
                //toDo
            }

            var person1= new CreatePerson ("DJL1",22,"student1");
            var person2= new CreatePerson ("DJL2",22,"student2");

我们把sayName函数的定义转移到了构造函数外部,而在构造函数内部我们把sayName设置成了全局变量。这样person1 和person2就共享了在全局域中定义的sayName()函数。这样做确实解决了共享性问题,但是如果有很多个这样的函数呢,那边要定义多个全局函数,那么封装性就不言而喻了。为了解决这个问题,原型模式就脱颖而出了。

  我们创建的每一个函数都有一个prototype属性,该属性是一个指针,指向一个对象。这个对象包含了所有实例共享的属性和方法。使用原型对象的好处就是可以让所有对象实例共享它所包含的属性和方法。我们不必在构造函数中去定义对象实例的信息,而是可以将这些信息添加到原型对象中。

       function CreatePerson () {

            }

            CreatePerson.prototype.name="DJL";
            CreatePerson.prototype.age=22;
            CreatePerson.prototype.job="student";
            CreatePerson.prototype.sayName=function(){
                alert(this.name);
            }

            var person1= new CreatePerson ();
            person1.sayName();
            var person2= new CreatePerson ();
            person2.sayName();       alert(person1.sayName==person2.sayName);//true

  此时我们仍然可以通过CreatePerson这个构造函数来创建实例,并且能够访问sayName这个函数,与构造函数模式的区别就是,此时sayName()是共享型的, person1和person2 访问的是同一个sayName函数。

  好吧今天就先写到这里,明天继续补上,不然寝室该停电了,那就恐怖了,以上所写是对《JavaScript高级程序设计》这本书就行了提炼和少许自己的见解,如果大家有什么不理解的欢迎讨论,当然更建议大家去买这本书(纸质书),我刚刚看了2天,就觉得受益匪浅,好了,撤了。

  

时间: 2024-08-03 18:14:47

谈谈 js中的几种模式 (一)的相关文章

对称加密和分组加密中的四种模式(ECB、CBC、CFB、OFB)

对称加密和分组加密中的四种模式(ECB.CBC.CFB.OFB) 一. AES对称加密: AES加密 分组 二. 分组密码的填充 分组密码的填充 e.g.: PKCS#5填充方式 三. 流密码:   四. 分组密码加密中的四种模式: 3.1 ECB模式 优点: 1.简单: 2.有利于并行计算: 3.误差不会被传送: 缺点: 1.不能隐藏明文的模式: 2.可能对明文进行主动攻击: 3.2 CBC模式: 优点: 1.不容易主动攻击,安全性好于ECB,适合传输长度长的报文,是SSL.IPSec的标准.

谈谈JS中的面向对象

请先看看下面这段代 1 <script src="jquery.js"></script> 2 <script type="text/javascript"> 3 /** 4 * Object.create() 最近才添加进了ECMAScript第5版规范,有些浏览器不支持 5 * 这里模拟一个Object.create方法解决兼容性问题 6 * Object.create : 该方法只有一个参数,即原型对象,返回一个新对象 7

简单谈谈js中的MVC

MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器). 本文将用一个经典的例子todoList来展开(代码在最后). 一个事件发生的过程(通信单向流动): 1.用户在视图 V 上与应用程序交互 2.控制器 C 触发相应的事件,要求模型 M 改变状态(读写数据) 3.模型 M 将数据发送到视图 V ,更新数据,展现给用户 在js的传统开发模式中,大多基于事件驱动的: 1.hash驱动 2.DOM事件,用来驱动视图 3.模型事件(业务模型事件和数据模型事

浅谈 JS 创建对象的 8 种模式

Objct 模式 工厂模式 构造器模式 通过 Function 对象实现 prototype 模式 构造器与原型方式的混合模式 动态原型模式 混合工厂模式 1.Object 模式 var o1 = {};//字面量的表现形式 var o2 = new Object; var o3 = new Object(); var o4 = new Object(null); var o5 = new Object(undefined); var o6 = Object.create(Object.prot

【js实例】js中的5种基本数据类型和9种操作符

js中的5中基本数据类型 js标识符 第一个字符必须为字母,下划线,或美元符 其他字符可以是字母,下划线,美元符,数字 js标识符区分大小写 标识符不能使关键字和保留字 关键字: break do instanceof typeof case else new var catch finally return void continue for switch while debugger function this with default if throw   delete in try  

js创建对象的几种模式

//javaScript创建对象的几种模式特点 /*//1 工厂模式function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=function() { alert(name); }} createPerson("Tom",18,"Teachaer");createPerson("Jack",20,"Student"

谈谈JS中的原型

不知道大家对JS中的原型理解的怎么样,我想如果大家对JS中的原型对象以及prototype属性十分熟悉的话对后面原型链以及继承的理解会十分的容易,这里想和大家分享自己对其的理解,请先看下面这段代码O(∩_∩)O~~ 1 function Person(){ 2 } 3 Person.prototype.name = "jingzi"; 4 Person.prototype.age = 20; 5 Person.prototype.sayName = function(){ 6 aler

JS中的几种函数

函数可以说是js中最具特色的地方,在这里我将分享一下有关函数的相关知识: 包装函数:        (function foo(){...})作为函数表达式意味着foo只能在...所代表的位置中被访问,外部作用域则不行 (function foo(){...})()        第一个()将函数变成表达式,第二个()执行了这个函数,这种模式代表立即执行函数表达式   包装函数的声明以(function...而不是function开始,函数会被当作函数表达式而不是一个标准的函数声明来处理    

js中创建对象方式----原型模式

一.什么是原型模式 在js中,创建对象的方式有工厂模式和构造函数模式等: 而构造函数模式最大的问题在于:构造函数中的每个方法都需要在实例对象中重新创建一遍,不能复用,所以为了解决这一个问题,就需要使用原型模式来创建对象.原型模式是把所有实例共享的方法和属性放在一个叫做prototype(原型)的属性中 ,在创建一个函数时都会有个prototype属性, 这个属性是一个指针,指向一个对象,是通过调用构造函数而创建的那个对象实例的原型对象. // 构造函数 function Person() {};