javascript面向对象编程（三）

最新推荐文章于 2024-05-30 11:27:58 发布
最新推荐文章于 2024-05-30 11:27:58 发布
阅读量363 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 编程 function interface constructor methods

Published by canque on February 26, 2008 11:43 pm under [web发展] Tags: ,

[Interface,Class.implement 接口及实现]
接口规定了一些方法，如果一个类实现了接口所定义的所有方法，就叫做实现了这个接口。诚然，javascript来模拟接口会带来一些效率上的损失，但是在大型项目特别是团队开发的时候，接口将带来很大的方便。使项目代码更加规范，更方便地查找错误信息。很多设计模式，像工厂模式、合成模式、装饰模式、命令模式等都依赖于接口来实现。
javascript模拟接口包括两部分:接口的模拟和接口实现的模拟。

[Interface接口类]
这段代码定义一个接口类，同样来自于《javascript design patterns》，略有改动。

PLAIN TEXT
Actionscript:
  1. // Constructor.
  2.     var Interface = function ( name, methods ) {
  3.         if ( arguments. length != 2 ) {
  4.             throw new Error ( "Interface constructor called with " + arguments. length +
  5.             "arguments, but expected exactly 2." );
  6.         }
  7.         this. name = name;
  8.         this. methods = [ ];
  9.         for ( var i = 0, len = methods. length; i <len; i++ ) {
  10.             if ( typeof methods [i ] !== 'string' ) {
  11.                 throw new Error ( "Interface constructor expects method names to be " +
  12.                 "passed in as a string." );
  13.             }
  14.             this. methods. push (methods [i ] );
  15.         }
  16.     };

[Interface.ensureImplements 接口实现检查]
这段代码检查一个对象是否实现了所要实现接口。

PLAIN TEXT
Actionscript:
  1. // Static class method.
  2.     Interface. ensureImplements = function ( object ) {
  3.         if ( arguments. length < 2 ) {
  4.             throw new Error ( 'Interface.ensureImplements:Wrong arguments number' );
  5.         }
  6.         for ( var i = 1, len = arguments. length; i <len; i++ ) {
  7.             var interfaces = arguments [i ];
  8.             if (interfaces. constructor !== Interface ) {
  9.                 throw new Error ( "Function Interface.ensureImplements expects arguments " +
  10.                 "two and above to be instances of Interface." );
  11.             }
  12.             for ( var j = 0, methodLen = interfaces. methods. length; j <methodLen; j++ ) {
  13.                 var method = interfaces. methods [j ];
  14.                 if (! object. prototype [method ] || typeof ( object. prototype [method ] ) !== 'function' ) {
  15.                     throw new Error ( "Function Interface.ensureImplements: object " +
  16.                     "does not implement the " +
  17.                     interfaces. name +
  18.                     " interface. Method " +
  19.                     method +
  20.                     " was not found." );
  21.                 }
  22.             }
  23.         }
  24.     }

[Class.implement类实现接口]
接口定义后，还不能带来任何好处，需要在类中体现出来。看下面的两段代码就很清楚了：程序演示页面(3)

PLAIN TEXT
JavaScript:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns= "http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8"/>
  5. <script language= "JavaScript" src= "http://rssidea.com/labs/OOP/OOP.js"></script>
  6. <title>labs@RSSIDEA javascript OOP</title>
  7. </head>
  8. <body>
  9. <script language= "JavaScript">
  10.     //定义一个computer的接口，要求实现motherborad,memory,cpu,harddisk的方法。
  11.     var computer = new Interface ( 'computer', [ 'motherboard', 'memory', 'cpu', 'harddisk' ] )
  12.     //定义一个PC类，实现computer接口
  13.     var PC = Class. create ( {
  14.         motherboardInfo: '',
  15.         memoryInfo: '',
  16.         cpuInfo: '',
  17.         harddiskInfo: '',
  18.         init: function (motherboard, memory, cpu, harddisk ) {
  19.             this. motherboardInfo = motherboard;
  20.             this. memoryInfo = memory;
  21.             this. cpuInfo = cpu;
  22.             this. harddiskInfo = harddisk;
  23.         },
  24.         motherboard: function ( ) {
  25.             return this. motherboardInfo;
  26.         },
  27.         memory: function ( ) {
  28.             return this. memoryInfo;
  29.         },
  30.         cpu: function ( ) {
  31.             return this. cpuInfo;
  32.         },
  33.         mouse: function ( ) {
  34.             return this. mouseInfo;
  35.         }
  36.     } ). implement (computer ); //浏览器报错,(没有硬盘电脑怎么转啊?)
  37.     var myComputer = new PC ( '微星主板', '现代2G', 'AMD3600+', '三星80G' );
  38.     //输出电脑配置信息
  39.     trace (myComputer );
  40. </script>
  41. </body>
  42. </html>

但是这段代码我们却得到一个浏览器错误，方法harddisk没有实现。（没有硬盘叫什么电脑啊？）
好吧，好吧！我承认是我拿买硬盘的钱去买了一个鼠标……（这鼠标不错吧？）

我原以为可以混过去，却被检查出来了。接口的工作和作用和上面的情况类似。现在，我需要再买个硬盘（harddisk）。程序演示页面(4)

PLAIN TEXT
JavaScript:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns= "http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8"/>
  5. <script language= "JavaScript" src= "http://rssidea.com/labs/OOP/OOP.js"></script>
  6. <title>labs@RSSIDEA javascript OOP</title>
  7. </head>
  8. <body>
  9. <script language= "JavaScript">
  10.     //定义一个computer的接口，要求实现motherborad,memory,cpu,harddisk的方法。
  11.     var computer = new Interface ( 'computer', [ 'motherboard', 'memory', 'cpu', 'harddisk' ] )
  12.     //定义一个PC类，实现computer接口
  13.     var PC = Class. create ( {
  14.         motherboardInfo: '',
  15.         memoryInfo: '',
  16.         cpuInfo: '',
  17.         harddiskInfo: '',
  18.         init: function (motherboard, memory, cpu, harddisk ) {
  19.             this. motherboardInfo = motherboard;
  20.             this. memoryInfo = memory;
  21.             this. cpuInfo = cpu;
  22.             this. harddiskInfo = harddisk;
  23.         },
  24.         motherboard: function ( ) {
  25.             return this. motherboardInfo;
  26.         },
  27.         memory: function ( ) {
  28.             return this. memoryInfo;
  29.         },
  30.         cpu: function ( ) {
  31.             return this. cpuInfo;
  32.         },
  33.         mouse: function ( ) {
  34.             return this. mouseInfo;
  35.         },
  36.         harddisk: function ( ) {
  37.             return this. harddiskInfo;
  38.         } //这是新买的硬盘
  39.     } ). implement (computer ); //实现了computer接口
  40.     var myComputer = new PC ( '微星主板', '现代2G', 'AMD3600+', '三星80G' );
  41.     //输出电脑配置信息
  42.     trace (myComputer );
  43. </script>
  44. </body>
  45. </html>

太好了！浏览器不再报错，这样，我们就实现了computer接口。

liu_zhongjie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 面向对象编程
gako15587481707的博客
06-18 1233
面向对象编程是一种程序设计思想，它具有 3 个显著的特征：封装、继承、多态。
JavaScript面向对象编程详解
m0_75198698的博客
04-24 1371
面向对象编程（Object-oriented programming，简称 OOP）是一种基于对象和类的编程范式，它将数据和操作数据的函数封装在一起，形成一个独立的对象，并允许对象之间通过继承、接口等方式相互联系和交互。在 JavaScript 中，每个对象都有一个原型对象，它定义了该对象的基本属性和方法，而对象之间的继承关系通过原型链来实现。在子类 Child 中，我们定义了自己的属性 age 和方法 sayAge()，并且可以调用父类 Parent 的方法 sayHello()。
JavaScript面向对象编程实战
爱蹦跶的全栈大A阿
01-07 1177
面向对象编程(OOP)是JavaScript中非常重要的一个概念。掌握OOP可以帮助我们写出更加清晰、可维护的代码。本文将详细介绍JavaScript实现OOP的几种主要方式,并通过实例展示OOP在实际编程中的强大威力。​通过本文的讲解,我们已经全面了解了JavaScript实现面向对象编程的几种主要方式,包括构造函数、原型继承、类继承等。面向对象编程是现代JavaScript的基石,可以帮助我们编写出更加清晰、可复用和可维护的代码。
什么叫面向对象编程？
weixin_38982114的博客
03-17 1730
面向对象编程是一种设计思想，它是现实世界的抽象，任何现实世界中的事物都可以用面向对象思想来解决。“万物皆对象”，JavaScript中不是面向对象编程。而是面向函数编程，这里，JavaScript中函数是“一等公民”，那什么又是“一等公民”呢？就是函数和整数、字符串等常见概念的地位是平等的，一个整数和一个字符串等对象可以干的事，一个函数也可以办到。 面向对象我们经常和面向过程做比较，面向过程是C语言编程的核心思想 面向对象注重于抽象事物，而面向过程注重于描述事物 面向对象逻辑清晰有条理，而面向过程比较方面
JavaScript高级教程（面向对象编程）
一只努力搬砖的打工妹纸
01-25 5189
面向对象编程 有两大编程思想：面向过程和面向对象； 面向过程编程POP(Process-oriented programming) 面向过程即分析出解决问题所需要的步骤，然后用函数将这些步骤一步步实现，使用的时候再一个个的一次调用就可以了； 即将大象装进冰箱，从面向过程来看，需要打开冰箱门、装进去大象、关上冰箱门 面向对象编程OOP(Object Oriented Programming) 面向对象即把事务分解成为一个个对象，然后由对象之间分工与合作；是以对象功能来划分问题，而不是步骤；在面向对
JavaScript 面向对象编程思想简介
流楚丶格念的博客
09-28 4164
JavaScript 面向对象编程JavaScript 执行过程JavaScript 面向对象编程面向对象介绍什么是对象什么是面向对象程序中面向对象的基本体现创建对象简单方式简单方式的改进：工厂函数构造函数更优雅的工厂函数：构造函数解析构造函数代码的执行构造函数和实例对象的关系构造函数的问题 JavaScript 执行过程 JavaScript 运行分为两个阶段： 预解析 全局预解析（所有变量和函数声明都会提前；同名的函数和变量函数的优先级高） 函数内部预解析（所有的变量、函数和形参都会参与预解析）
JavaScript 面向对象编程入门案例
jack_newUser的博客
03-23 1449
JavaScript可以说是基于对象的语言，因为它不像其他面向对象的语言那样，有诸如private，public等等的关键字来定义一个类。   但是，JavaScript可以通过它特殊的语法来模拟面向对象语言的写法。     1.public 如果定义一个类，并且在类里添加属性。   在java中，我们常常这么写 public class Person {   public S
JavaScript——面向对象编程
chenzoff的专栏
11-03 896
JavaScript的面向对象编程和大多数其他语言如Java、C#的面向对象编程都不太一样。如果你熟悉Java或C#，很好，你一定明白面向对象的两个基本概念： 类: 类是对象的类型模板，例如，定义Student类来表示学生，类本身是一种类型，Student表示学生类型，但不表示任何具体的某个学生 对象:实例是根据类创建的对象，例如，根据Student类可以创建出xiaoming、xiaohong、xiaojun等多个实例，每个实例表示一个具体的学生，他们全都属于Student类型。 在JavaScript
JavaScript 面向对象详解
qq_36081714的博客
08-09 3575
JavaScript面向对象
漫谈 JavaScript 面向对象编程
HDM1991的专栏
09-11 2389
前言为什么要写这篇博客，JavaScript 面向对象编程有什么值得说的吗？作为一个以 C/C++ 作为主要开发语言，也是自身最熟悉的语言的程序员，JavaScript 面向对象编程真的有很多值得说的（吐槽的）。在最开始接触 JavaScript 面向对象编程时，它真的让我很疑惑，诡异的语法，让人摸不着头脑的 this，都让人抓狂，虽然可以比葫芦画瓢，但内心的疑问却一直存在，而且与日俱增，深入学习之
JavaScript面向对象编程指南
07-22
资源名称：JavaScript面向对象编程指南内容简介： Javaｓｃｒｉｐｔ是一种具有高度表达能力的、基于原型特性的、非常灵活的面向对象编程语言。《Javaｓｃｒｉｐｔ面向对象编程指南》着重介绍Javaｓｃｒｉｐｔ在面向...
Javascript面向对象编程
01-31
这两天有个前同事总在问我Javascript面向对象的东西，所以，索性写篇文章让他看去吧，这里这篇文章主要想从一个整体的角度来说明一下Javascript的面向对象的编程。（成文比较仓促，应该有不准确或是有误的地方，请...
JavaScript面向对象编程
10-30
暂时放弃js框架吧开始写javascript的时候都是自己写，后来发现了prototype.js框架，发现很好用，就一直用的，他的对象创建方法被修改了，但很好用，再后来又转用jquery框架，受此框架影响，也不用自己创建类了，渐渐...
javascript面向对象编程
07-22
资源名称：Javaｓｃｒｉｐｔ面向对象编程   内容简介： 从语言的视角来看，面向对象的程序设计和面向对象的Javaｓｃｒｉｐｔ 语言绝对不是什么摩登的  东西；Javaｓｃｒｉｐｔ 最开始就是被设计成一...
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1089
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1061
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 335
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Vue3 - 实现一个雨水滴落的动画效果
良月柒
05-29 146
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
React-useState
weixin_46479909的博客
05-29 212
本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（useState是一个React Hook（函数），它允许我们向组件添加一个。，从而控制影响组件的渲染结果。
javascript 面向对象编程
01-31
而 ES6 新增的 class 关键字也提供了更加直观和易读的面向对象编程语法，让 JavaScript 的面向对象编程更加灵活和易于理解。 JavaScript 的面向对象编程可以让开发者使用类和对象来模拟现实世界中的各种情景，更好...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值