`

JavaScript征途学习笔记(1)审视JS语言特性<1>

阅读更多


javascript是一门灵活的脚本语言,是一种轻型的解释型的程序设计语言.因此js被作为嵌入式脚本语言使用,这也使它具有巨大的灵活性。

 

例,使用不同的方法设计IO接口对象。

    //实现一 过程化设计
    function set(x) {
        this.x = x;
    }
    function get() {
        return this.x;
    }
    //这种做法很简单但是无法有效地保存操作的数据和状态。
   
    //实现二 定义原型方法
    //为以上两个函数定义一个类,把这两个函数绑定到类的原型对象上,如果需要使用他们,只需要创建类的实例,调用实例对象的方法即可。
    //这样就将函数有机地整合到类结构中,避免了过程化设计的松散。
    var Box = function() {} //定义类
    Box.prototype.set = function(x) { //定义类的原型方法
        this.x = x;
    }
    Box.prototype.get = function() {
        return this.x;
    }
    var box = new Box(); //创建实例对象
    box.set(10);
    var a = box.get();
    alert(a);
    //什么是原型和原型方法?简单地说就是对象的公共方法。
   
    //实现三 封装原型方法
    var Box = function() {}
    Box.prototype = {
        set: function(x) {
            this.x = x;
        },
        get: function() {
            return this.x;
        }
    }
   
    //实现四 造车不如设计标准
    //为Function类定义原型方法,自然这个方法为所有函数所用,包括构造函数。
    //这个原型方法能够根据传入的名称和函数实现,把函数封装成指定名称的方法,并把方法绑定到指定的构造函数(即类)上。
    var Box = function() {}
    Box.prototype.construtor.construtor.prototype.make = function(n, f) {
        this.prototype[n] = f;
    }
    Box.make("set", function(x) {
        this.x = x;
    })
    Box.make("get", function{} {
        return this.x;
    })
   
    //以上实现方法用更明白的表现方式如下
    Function.prototype.make = function(n, f) { //为Funtion类定义原型方法,这个方法用于为函数类制造方法
        this.prototype[n] = f;
    }
    var Box = function() {} //定义类
    //为类制造方法
    Box.make("set", function(x) {
        this.x = x;
    })
    Box.make("get", function(){
        return this.x;
    })
    //这样就明白了,Box.prototype.construtor.construtor指的就是Function类。
    //以上实例演示了如何为Function类定义原型方法,该方法接受两个参数,第一个参数是字符串代表方法名称,第二个参数是函数体,定义了方法的具体实现。
   
    //实现五 方法接龙
    //如果为原型方法make()中添加一行代码 return this; 那么整个程序变得惊心动魄。
    Function.prototype.make = funciton(n, f){
        this.prototype[n] = f;
        return this;
    }
    var Box = function() {}
    Box.make("set", function(x) {
        this.x = x;
    }).make("get", function() {
        return this.x;
    }).make("add", function() {
        return this.x + this.x;
    })

分享到:
评论

相关推荐

    HTML&JavaScript经典PPT 讲的都是重点

    &lt;TITLE&gt;诗词学习&lt;/TITLE&gt; &lt;/HEAD&gt; &lt;BODY&gt; &lt;P&gt;我是第一段&lt;/P&gt; &lt;P&gt;我是第二段&lt;/P&gt; &lt;P align="left"&gt;左对齐显示&lt;P&gt; &lt;P align="center"&gt;居中显示&lt;P&gt; &lt;P align="right"&gt;右对齐显示&lt;P&gt; &lt;/BODY&gt; &lt;/HTML&gt; &lt;HEAD&gt; &lt;SCRIPT ...

    Vue中通过<script></script>引入的Vue.js文件

    &lt;script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"&gt;&lt;/script&gt; src里面的内容根据自己的下载的Vue.js的文件位置决定的,我这里只是拿我自己做的举个例子。这个地方的vue.js是因为我下载了两次...

    JavaScript学习教程

    第一课 &lt;br&gt; Javascript教程 &lt;br&gt; 课程简介 &lt;br&gt; 实际应用 &lt;br&gt; 隐藏JavaScript &lt;br&gt; 第一天复习 &lt;br&gt; 第二课 &lt;br&gt; 第二天课程简介 &lt;br&gt; 变量介绍 &lt;br&gt; 首个变量例子的程序主体 &lt;br&gt; 字符串的魔力 &lt;br&gt; 变量练习 &lt;br...

    js星级评论打分效果

    "&gt;1&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="javascript:;"&gt;2&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="javascript:;"&gt;3&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="javascript:;"&gt;4&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href=...

    jive.chm

    &lt;br&gt;系统设计&lt;br&gt; 1 jive设计思路 &lt;br&gt; 2 jive的工作内幕 &lt;br&gt; 3 Jive源代码研究 &lt;br&gt; 4 Jive中的设计模式 &lt;br&gt; 5 jive学习笔记 &lt;br&gt;&lt;br&gt;&lt;br&gt; &lt;br&gt;设计模式&lt;br&gt; 1 大道至简-Java之23种模式一点就通 &lt;br&gt; 2 设计模式...

    元旦倒计时JavaScript代码

    &lt;div class="djs"&gt; &lt;p&gt;元旦倒计时:&lt;/p&gt; ... &lt;span class="hour"&gt;1&lt;/span&gt; &lt;span&gt;小时&lt;/span&gt; &lt;span class="minute"&gt;2&lt;/span&gt; &lt;span&gt;分&lt;/span&gt; &lt;span class="second"&gt;3&lt;/span&gt; &lt;span&gt;秒&lt;/span&gt; &lt;/div&gt; &lt;/div&gt;

    js效果页面实例及说明文档包html版

    绝对的经典javascript收藏 包含了各个种类的js校验实例&lt;br&gt;web开发绝妙帮手&lt;br&gt;&lt;br&gt;javascript收藏 &lt;br&gt;1.页面校验 &lt;br&gt;1.文本框约束输入 &lt;br&gt;2.表单校验工具库 &lt;br&gt;3.文本框部分内容不让改变 &lt;br&gt;2.下拉框类 &lt;br&gt;...

    JSP图书管理系统

    &lt;script language="JavaScript"&gt;var when=new Date(); document.write("&lt;h4&gt;"); document.write(when.getYear()+"年"); document.write((when.getMonth()+1)+"月"); document.write(when.getDate()+...

    【JavaScript源代码】JavaScript实现网页版贪吃蛇游戏.docx

    DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;&lt;title&gt;贪吃蛇&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="canvas" width="400" height="400"&gt;&lt;/canvas&gt; &lt;script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"&gt;&lt;/...

    通用js日历源码

    &lt;br&gt;&lt;script language=javascript src="images/date.js"&gt;&lt;/script&gt;&lt;br&gt;&lt;br&gt;2、在input上,加上得到焦点事件:&lt;br&gt;&lt;input name="textfield1" type="text" size="16" onfocus="javascript:setday(this)"&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;3...

    firework.html

    方便初学者,借鉴学习javascript语言

    javascrip上百技术总集

    -(4)&lt;br&gt;JavaScript面向对象的支持--(5)&lt;br&gt;JavaScript面向对象的支持--(6)&lt;br&gt;JavaScript精简学习1:基础知识&lt;br&gt;JavaScript精简学习2:浏览器输出&lt;br&gt;JavaScript精简学习3:图像&lt;br&gt;JavaScript精简学习4:表单&lt;br&gt;...

    JS日期控件(橙色)

    &lt;script type="text/javascript" src="js/jquery-1.7.1.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery-...

    JavaScript分页控件1.0(page-navigater_V_1.0.0.zip)

    &lt;br&gt;&lt;br&gt;调用方式:&lt;br&gt;用动态Web语言在HTML界面上输出如下代码:&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;引用:&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;script language="javascript"&gt; &lt;br&gt; &lt;br&gt; pager = new PageNavigater(20, 1000000, 243, "right", ...

    日历(JS)日期控件,带下拉选择模式

    &lt;script type="text/javascript" src="calendar.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;script language=javascript&gt; function aa() { document.getElementById('Calendar1').focus(); setday(document....

    北大青鸟第一学期4.0 S1所有资料一

    我已经把第一学期所有的课件打包在一起了,一共有5部分,这是第一部分&lt;br&gt;&lt;br&gt;大家载时要记得评分,这样你们就不要资源分了&lt;br&gt;&lt;br&gt;C语言&lt;br&gt;&lt;br&gt;HTML && JavaScript 电子档课件ppt.rar&lt;br&gt;&lt;br&gt;java&&OOP &lt;br&gt;&lt;br&gt;SQL...

    HTML+CSS+JavaScript教程学习笔记.zip

    HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 ...

    轻轻松松学用javascript编程(PDF)

    配图列表&lt;br&gt;列表 &lt;br&gt;1 说明&lt;br&gt;1.1 主要的内容&lt;br&gt;1.2 学习目标 &lt;br&gt;2 了解JavaScript 浏览器上的程序语言 &lt;br&gt;2.1 JavaScript 操作对象的简单介绍-- 属性和方法&lt;br&gt;2.2 JavaScript 代码的加入 &lt;br&gt;2.2.1 加入...

    js模拟list和map

    javascript 模拟 java中的 List,Map&lt;br&gt;js文件为 js/utils.js&lt;br&gt;IE6.0 测试通过&lt;br&gt;&lt;br&gt;List:&lt;br&gt;add(var obj) //添加一个元素&lt;br&gt;remove(var index) //删除一个元素&lt;br&gt;get(var index) //获取一个元素&lt;br&gt;remove...

    【JavaScript源代码】javaScript实现网页版的弹球游戏.docx

    &lt;html&gt; &lt;head&gt; &lt;tilie&gt;呼呼哈嘿的网页弹球&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="canvas"width="400"height="400"&gt;&lt;/canvas&gt; &lt;script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"&gt;&lt;/...

Global site tag (gtag.js) - Google Analytics