`
dondon
  • 浏览: 10472 次
  • 性别: Icon_minigender_1
  • 来自: 南京
最近访客 更多访客>>
社区版块
存档分类
最新评论

javascript 原型模式

 
阅读更多

 

 要想理解closure,最好是写一些代码,或是看一些例子。Closure提供了封装(encapsulation)

 

function myClosure(){

     var date = new Date();

    

     //nested function

     return function(){

           return date.getMilliseconds();

     }

}

 

即使是当myClosure中的匿名函数(closure)返回,但是date变量仍然驻留在内存中,而不想普通的函数执行完成后就被garbage collection回收了。这里把myClosure看作是一个容器,而datenested function被看做是这个容器中的元素。

 

另外一种实现方式:

var myClosure2 = function(){

     var date = new Date();

     var myNestedFunc = function(){

           return date.getMilliseconds();

     }

     return {// revealing modular pattern

           foo: myNestedFunc

     }

}

 

var bar = new myClosure2();

console.log(bar.foo());

 

 

定义变量?

 

标准方式定义变量

var  str = “Hello World”;

如果定义多个变量的话,可以采用:

var str1 = ‘hello’,

       str2 = ‘world’,

       str3 = ‘foo bar’;

 

改写上面的:

var myClosure2 = function(){

     var date = new Date();

     var myNestedFunc = function(){

           return date.getMilliseconds();

     }//这里JSLint会给出警告,并且显得var定义使用了多次

     return {// revealing modular pattern

           foo: myNestedFunc

     }

}

 

改写:

 

var myClosure2 = function(){

     var date = new Date(),

           var1 = 5,

myNestedFunc = function(){

                return date.getMilliseconds();

          };

     return {// revealing modular pattern

           foo: myNestedFunc

     }

}

 

 

 

Prototype Pattern

 

优点:

<!--[if !supportLists]-->l  <!--[endif]-->充分利用JavaScript内建特性

<!--[if !supportLists]-->l  <!--[endif]-->“Modularize”代码为了构建可重用代码

<!--[if !supportLists]-->l  <!--[endif]-->让变量和函数脱离全局作用域

<!--[if !supportLists]-->l  <!--[endif]-->函数在内存中只加载一次

<!--[if !supportLists]-->l  <!--[endif]-->通过prototype可能override函数

缺点:

<!--[if !supportLists]-->l  <!--[endif]-->this指针很容易混淆

<!--[if !supportLists]-->l  <!--[endif]-->Constructor脱离prototype定义

 

Prototype pattern结构

var Calculator = function(eq){//定义一个对象

     this.eqCtl = document.getElementById(eq); 

}

 

Calculator.prototype = {//扩展对象原型链上的方法

     add: function(x, y){//封装,不污染全局作用域

           var val = x + y;

           this.eqCtl.innerHTML = val;

     }

}

 

var calc  = new Calculator(‘eqCtl’);

calc.add(2,2);

 

Prototype Pattern一般用在实现一个类的功能,这个类中有一些属性和操作,这些操作要访问这些属性的值,定义函数对象(可以理解为类的模板)时就是初始化属性值,然后通过原型链来定义操作,这些操作是针对所有后期被实例化的对象,这些操作只被内存加载一次,但是个个实例化对象的属性都是独占内存的。

 

 

<!--EndFragment-->

分享到:
评论

相关推荐

    JavaScript设计模式与开发实践.pdf

    第一部分讲解了JavaScript语言的面向对象和函数式编程的知识,包括静态类型语言和动态类型语言的区别及其在实现设计模式时的异同、封装、继承、多态在动态类型语言中的体现、JavaScript基于原型继承的面向对象系统的...

    JavaScript 设计模式(高清扫描版本)- 张容铭

    此外,张容铭的这本书很可能还会深入讨论JavaScript语言特性如何与设计模式相结合,例如原型继承、闭包和动态类型等在实现设计模式时的独特作用。书中可能会有丰富的实例和代码示例,帮助读者理解和实践这些模式。 ...

    JavaScript设计模式+JavaScript模式+JavaScript异步编程

    设计模式和异步编程是提升JavaScript代码质量和效率的关键。以下将详细介绍这三本书所涵盖的知识点: 1. **JavaScript设计模式**: 设计模式是软件工程中经过实践验证的、解决常见问题的有效方法。在JavaScript中...

    JavaScript设计模式.pdf

    JavaScript设计模式.pdf JavaScript设计模式是指在软件开发中使用JavaScript语言编写的设计模式。这些设计模式旨在提高代码的重用性、可读性、维护性和扩展性。以下是JavaScript设计模式的知识点总结: 1. 单体...

    学用JavaScript设计模式

    因为JavaScript是基于原型的面向对象语言,它在设计模式上的应用有其独特之处。例如,在JavaScript中,我们经常会利用函数作用域和闭包来模拟私有方法和私有属性,以及使用原型链来模拟类继承。 最后,本书提供了...

    Javascript 设计模式 电子书

    在深入探讨《Javascript 设计模式》这本电子书之前,需要先理解设计模式的含义及其在软件开发中的重要性。设计模式是软件工程领域中经过时间验证的一套最佳实践和解决方案,它们针对特定问题提供了模板化设计方案。...

    JavaScript 设计模式 azw3

    《JavaScript设计模式》是JavaScript设计模式的学习指南。全书分为14章。首先介绍了什么是模式、模式的结构、类别、模式的分类、如何编写模式等等;然后,集中介绍了很多流行的设计模式在JavaScript中的应用,包括...

    JAVASCRIPT设计模式[收集].pdf

    JavaScript 设计模式概述 JavaScript 设计模式是一个非常重要的概念,在前端开发中,掌握设计模式可以提高开发效率和代码质量。本文将对 JavaScript 设计模式进行总体介绍,并对闭包、封装等重要概念进行详细讲解。...

    javascript DOM高级程序设计 及 javascript 设计模式

    在吃透了前面所说的书之后,接下来两本书的顺序已经无关紧要了,《JavaScript DOM高级程序设计》(注意和《JavaScript 高级程序设计》相区别)和《JavaScript设计模式》,这两本都是重量级的书,能让你的JS技术上一...

    javascript 设计模式

    在JavaScript中,由于其特殊的原型继承机制和动态类型特性,设计模式的应用有一些独特的特点。 ### 1. 继承机制 在JavaScript中,继承主要通过原型链(Prototype Chain)实现。每个对象都有一个`__proto__`属性,...

    外文翻译:学用JavaScript设计模式

    ### 外文翻译:学用JavaScript设计模式 #### 序言与重要性 设计模式作为软件工程中的一个重要组成部分,其核心在于提供了一套标准的方法论,帮助开发人员以优雅、高效的方式解决常见的软件设计问题。《学用...

    Javascript 设计模式 很经典 第一本

    除了介绍基本的设计模式,《Pro JavaScript Design Patterns》还深入探讨了JavaScript的一些高级特性,如闭包、原型链、异步编程等,以及如何利用这些特性来实现更高效的设计模式。 1. **闭包**:闭包允许一个函数...

    Javascript设计模式源码

    作者针对常见的开发任务,从YUI等实战代码中取材,提供了专家级的解决方案,不仅透彻剖析了JavaScript扣的面向对象编程,而且深入探讨了如何用JavaScript实现以前只在服务器端应用的设计模式,如何根据实际场景选择...

    精通javascript设计模式en版pdf

    **JavaScript设计模式:深入理解与应用** 在编程领域,设计模式是解决常见问题的经验总结,它们代表了软件设计的最佳实践。对于JavaScript这种广泛应用于Web开发的动态语言来说,设计模式同样至关重要。《精通...

    JavaScript设计模式Demo

    JavaScript设计模式是编程实践中的一种重要概念,它是为了在JavaScript环境中编写更加高效、可维护和可扩展的代码而形成的一套通用解决方案。这个"JavaScript设计模式Demo"可能包含了各种常见的设计模式示例,如单例...

    Javascript 设计模式系统讲解与应用视频资源地址.7z

    JavaScript设计模式是编程实践中的一种重要思想,它提供了一套经过时间考验的最佳实践,用来解决常见的编程问题和提高代码的可维护性、可扩展性和可复用性。在JavaScript这种动态类型的脚本语言中,设计模式尤其重要...

    javascript 面向对象编程.pdf javascript 设计模式与开发实践.pdf

    面向对象编程(Object-Oriented Programming, OOP)是JavaScript中的核心概念,而设计模式则是解决常见编程问题的经验总结,对于提升代码质量和可维护性至关重要。这两本书——"JavaScript 面向对象编程.pdf"和...

    学用 JavaScript 设计模式.pdf

    外文翻译:学用JavaScript设计模式,pdf版本,中文版 设计模式是可重用的用于解决软件设计中一般问题的方案。设计模式如此让人着迷,以至在任何编程语言中都有对其进行的探索。 其中一个原因是它可以让我们站在巨人...

    JavaScript设计模式 (美)哈梅斯(Harmes,R), (美)迪亚斯(Diaz,D)著 源码+PDF

    《JavaScript设计模式》共有两部分。第一部分给出了实现具体设计模式所需要的面向对象特性的基础知识,主要包括接口、封装和信息隐藏、继承、单体模式等内容。第二部分则专注于各种具体的设计模式及其在JavaScript...

Global site tag (gtag.js) - Google Analytics