//JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展
            var aClass = function(){}

//1 定义这个类的静态方法
            aClass.sayHello = function(){
                alert('say hello');
            }

//2 定义这个类对象的对象方法
            aClass.prototype.protoSayHello = function(){
                alert('prototype say hello');
            }

aClass.sayHello() ;//aClass的静态方法

var aObject = new aClass();
            aObject.protoSayHello();  //类对象的方法扩展

//JQuery的方法扩展

//定义jquery的扩展方法
            //1 定义JQuery的静态方法
            jQuery.extend({
                staticHello: function () {
                    alert("wwg, staticHello");
                }
            });

var str = $.staticHello();

//2 定义JQuery对象的扩展方法
            jQuery.fn.ObjHello = function () {
                return alert("ObjHello");
            }

$("#htmlDiv").ObjHello();

---------------------------------------------------------------------------------

<script type="text/javascript">

        //自定义的函数(类)
        function selfFun(name) {
            this.m_Name = name;
        }
        // 为自定义类添加一个扩展一个方法
        selfFun.prototype.Hello = function() {
            document.write("你好!" + this.m_Name);
        };
        var self = new selfFun("张占岭")//为类通过它的构架方法赋值
        self.Hello();
    </script>
<script type="text/javascript">
        //通过函数(类)的prototype属性来继承另一个函数
        function A() {
            this.MethodA = function() {
                document.write("MethodA");
            }
        }
 
        function B() {
            this.MethodB = function() {
                document.write("MethodB");
            }
        }
 
        B.prototype = new A(); //TestObjectB继承了TestObjectA类
        var testObjectB = new B();
        testObjectB.MethodA();
    </script>
*********************************************************************************
<script type="text/javascript">
 
        // 注意,prototype只对本script段起作用
        // prototype原型关键字,为一个JS原对象扩展一个方法
        Array.prototype.max = function() {
            var i, min = this[0];
            for (i = 1; i < this.length; i++) {
                if (min > this[i])
                    min = this[i];
            }
            return min;
        };
 
        var myArray = new Array();
        myArray[0] = 1;
        myArray[1] = 3;
        myArray[2] = 2;
        document.write(myArray.min());
    </script>

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

   4、组合构造函数及原型模式

目前最为常用的定义类型方式,是组合构造函数模式与原型模式。构造函数模式用于定义实例的属性,而原型模式用于定义方法和共享的属性。结果,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方方法的引用,最大限度的节约内存。此外,组合模式还支持向构造函数传递参数,可谓是集两家之所长。

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.lessons = ['Math', 'Physics'];
}
Person.prototype = {
    constructor: Person,//原型字面量方式会将对象的constructor变为Object,此外强制指回Person
    getName: function () {
        return this.name;
    }
}
var person1 = new Person('Jack', 19, 'SoftWare Engneer');
person1.lessons.push('Biology');
var person2 = new Person('Lily', 39, 'Mechanical Engneer');
alert(person1.lessons);//Math,Physics,Biology
alert(person2.lessons);//Math,Physics
alert(person1.getName === person2.getName);//true,//共享原型中定义方法

在所接触的JS库中,jQuery类型的封装就是使用组合模式来实例的!!!

 

5、动态原型模式

组合模式中实例属性与共享方法(由原型定义)是分离的,这与纯面向对象语言不太一致;动态原型模式将所有构造信息都封装在构造函数中,又保持了组合的优点。其原理就是通过判断构造函数的原型中是否已经定义了共享的方法或属性,如果没有则定义,否则不再执行定义过程。该方式只原型上方法或属性只定义一次,且将所有构造过程都封装在构造函数中,对原型所做的修改能立即体现所有实例中:

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.lessons = ['Math', 'Physics'];

}
if (typeof this.getName != 'function') {//通过判断实例封装
  Person.prototype = {
    constructor: Person,//原型字面量方式会将对象的constructor变为Object,此外强制指回Person
    getName: function () {
      return this.name;
    }
  }
}
var person1 = new Person('Jack', 19, 'SoftWare Engneer');
person1.lessons.push('Biology');
var person2 = new Person('Lily', 39, 'Mechanical Engneer');
alert(person1.lessons);//Math,Physics,Biology
alert(person2.lessons);//Math,Physics
alert(person1.getName === person2.getName);//true,//共享原型中定义方法

注:以上内容参考《JavaScript 高级程序设计》第3版

扩展JS的更多相关文章

  1. [No00007A]没有文件扩展".js"的脚本引擎 解决办法

    在命令行运行JScript脚本时,遇到如下的错误提示: “输入错误: 没有文件扩展“.js”的脚本引擎.” 这样的错误,原因是因为JS扩展名的文件被其他软件关联了,需要取消关联. 如系统中安装了ULT ...

  2. 没有文件扩展".js"的脚本引擎 解决办法

    在命令行运行JScript脚本时,遇到如下的错误提示: “输入错误: 没有文件扩展“.js”的脚本引擎.” 这样的错误,原因是因为JS扩展名的文件被其他软件关联了,需要取消关联. 如系统中安装了ULT ...

  3. 没有文件扩展“.js”的脚本引擎问题解决

    安装MinGW的时候提示没有文件扩展".js"的脚本引擎. 原因:系统安装Dreamwear.UltraEdit.EditPlus后修改了.js文件的默认打开方式.当想直接执行js ...

  4. 没有文件扩展js的脚本引擎

    没有文件扩展js的脚本引擎 没有文件扩展js的脚本引擎怎么解决_百度经验 https://jingyan.baidu.com/article/ff42efa93a7ad9c19e2202f0.html

  5. 我的前端架构之二--统一扩展Js方法

    我的前端架构汇总 MyJs_Core.js 这是一个核心的Js文件,它扩展了原生的Js方法.如下: Array对象: 1) indexOf 2) max 3) min 4) removeAt 5) i ...

  6. 『开源』扩展 JS 的 Date 处理函数

    背景: JS 有自己的 时间类型 Date  —— 但是,在某些情况下 这个对象似乎 不太好用. 本文 基于 JQuery 扩展了一些  JS日期函数,包括: > 字符串 转 Date 对象 万 ...

  7. 扩展JS Date对象时间格式化功能

    在自己JS代码中引入一下代码: Date.prototype.format =function(format) { var o = { "M+" : this.getMonth() ...

  8. js 日报 周报 月报 时间扩展 js

    当初做统计业务需要处理时间 周报:本周 上周 下周 近一周 月报上月 本月 等 需要使用时间处理 所以扩展了这些方法 <!DOCTYPE html> <html xmlns=&quo ...

  9. 扩展js,实现c#中的string.format方便拼接字符串

    //"{0}-{1}-{2}".format("xx","yy","zz") //显示xx-yy-zz String.p ...

随机推荐

  1. 缺陷的严重程度(Severity)

    该bug对用户造成的影响有多大.(1)Urgent 死机重启等致命bug(2)Veryhigh 非常严重的bug(3)High 严重的bug(4)Medium 中等程度的bug(5)Low 小的bug

  2. mysql 为啥用b+ 树

    原因就是为了减少磁盘io次数,因为b+树所有最终的子节点都能在叶子节点里找见, 所以非叶子节点只需要存`索引范围和指向下一级索引(或者叶子节点)的地址` 就行了, 不需要存整行的数据,所以占用空间非常 ...

  3. 银联高校极客挑战赛第一场 A.码队女朋友的王者之路[水题]

    目录 题目地址 题干 代码和解释 题目地址 计蒜客回顾比赛 码队女朋友的王者之路 题干 代码和解释 本题难度不大,但是一开始没有读懂题,以为净胜场次是确定的,没有"最高净胜场次"的 ...

  4. qtcreator 添加 cppreference 离线文档

    https://en.cppreference.com/w/File:qch_book_20190607.zip 下载后放到 D:\Qt\Qt5.10.0\Docs\Qt-5.10.0目录下, 并在q ...

  5. Java线程的wait(), notify()和notifyAll()

    Java线程生命周期 类java.lang.Thread包含一个静态的State enum用于定义每种可能的状态. 在任意的时间点, 线程会处于以下的状态之一: NEW – 新创建的线程, 还未启动( ...

  6. python开发--列表当全局变量来使用

    python中,申明全局变量的时候,一般该变量类型基本上是:字符串或数字: 比较少用“列表”当做变量, 当有作用域限制的情况下,想要外部调用内部作用域的“列表”变量时,可以用这种方式,外部申明一个空列 ...

  7. mysql Last_SQL_Errno: 1197 Coordinator stopped because there were error(s) in the worker(s)问题处理

    Last_SQL_Errno: 1197 Coordinator stopped because there were error(s) in the worker(s). The most rece ...

  8. linux环境,无dig命令-bash: dig: command not found?

    背景描述: 今天使用dig命令,报错命令不存在,-bash: dig: command not found 解决: 通过yum方式安装 yum -y install bind-utils 备注:之前尝 ...

  9. 413(Request Entity Too Large)

    场景,在现金速达后台上传图片的时候,fetch请求报错,图片虽然不大,只有几百kb但是需要转成bese64传给后台, 413(Request Entity Too Large) 一开始以为是fetch ...

  10. plsql 32位,Oracle Client 64位 无法读取tnsnames.ora文件

    ORACLE_HOME=C:\app\fjz\product\11.2.0\client_1 1)设置windows系统环境变量: TNS_ADMIN=C:\app\fjz\product\11.2. ...