扩展JS
//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,此外强制指回PersongetName: 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,Biologyalert(person2.lessons);//Math,Physicsalert(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,此外强制指回PersongetName: 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,Biologyalert(person2.lessons);//Math,Physicsalert(person1.getName === person2.getName);//true,//共享原型中定义方法
注:以上内容参考《JavaScript 高级程序设计》第3版
扩展JS的更多相关文章
- [No00007A]没有文件扩展".js"的脚本引擎 解决办法
在命令行运行JScript脚本时,遇到如下的错误提示: “输入错误: 没有文件扩展“.js”的脚本引擎.” 这样的错误,原因是因为JS扩展名的文件被其他软件关联了,需要取消关联. 如系统中安装了ULT ...
- 没有文件扩展".js"的脚本引擎 解决办法
在命令行运行JScript脚本时,遇到如下的错误提示: “输入错误: 没有文件扩展“.js”的脚本引擎.” 这样的错误,原因是因为JS扩展名的文件被其他软件关联了,需要取消关联. 如系统中安装了ULT ...
- 没有文件扩展“.js”的脚本引擎问题解决
安装MinGW的时候提示没有文件扩展".js"的脚本引擎. 原因:系统安装Dreamwear.UltraEdit.EditPlus后修改了.js文件的默认打开方式.当想直接执行js ...
- 没有文件扩展js的脚本引擎
没有文件扩展js的脚本引擎 没有文件扩展js的脚本引擎怎么解决_百度经验 https://jingyan.baidu.com/article/ff42efa93a7ad9c19e2202f0.html
- 我的前端架构之二--统一扩展Js方法
我的前端架构汇总 MyJs_Core.js 这是一个核心的Js文件,它扩展了原生的Js方法.如下: Array对象: 1) indexOf 2) max 3) min 4) removeAt 5) i ...
- 『开源』扩展 JS 的 Date 处理函数
背景: JS 有自己的 时间类型 Date —— 但是,在某些情况下 这个对象似乎 不太好用. 本文 基于 JQuery 扩展了一些 JS日期函数,包括: > 字符串 转 Date 对象 万 ...
- 扩展JS Date对象时间格式化功能
在自己JS代码中引入一下代码: Date.prototype.format =function(format) { var o = { "M+" : this.getMonth() ...
- js 日报 周报 月报 时间扩展 js
当初做统计业务需要处理时间 周报:本周 上周 下周 近一周 月报上月 本月 等 需要使用时间处理 所以扩展了这些方法 <!DOCTYPE html> <html xmlns=&quo ...
- 扩展js,实现c#中的string.format方便拼接字符串
//"{0}-{1}-{2}".format("xx","yy","zz") //显示xx-yy-zz String.p ...
随机推荐
- process.env.NODE_ENV理解
1.理解NODE_ENV 在node中,有全局变量process表示的是当前的node进程.process.env包含着关于系统环境的信息.但是process.env中并不存在NODE_ENV这个东西 ...
- css3学习之--transition属性(过渡)
一.理解transition属性 W3C标准中对CSS3的transition是这样描述的: CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击,获得焦 ...
- C#构建可扩展的应用程序(插件)
构建可扩展的应用程序,特别是对于WinForm应用程序是特别有好处的.我们知道,企业的需求是瞬息万变的,企业在使用软件的过程中,很可能对于现有的需求有变动甚至是提出新的需求来,可是我们的软件已经部署在 ...
- 第2课第5节_Java面向对象编程_异常_P【学习笔记】
摘要:韦东山android视频学习笔记 java的异常处理的原则如下: 1.我们先写一个没有对异常处理的程序,在进行除法运算的时候,除数是非零的话,运行时没有问题的,但是除数为零的时候,运行就会有问 ...
- k8s记录-yum本地仓库部署
#1.安装插件yum install -y yum-plugin-downloadonly createrepo rsync #2.创建仓库目录mkdir -p /mirrors/centos#3.下 ...
- 【c++基础】C与C++接口相互调用
前言 编译程序的时候出现错误,入口程序如果是cpp文件可以编译成功,如果是c程序则出错.一般这个问题是c与c++之间接口相互调用出现的问题. 出现的错误是undefined reference to ...
- Spring boot后台搭建二为Shiro权限控制添加缓存
在添加权限控制后,添加方法 查看 当用户访问”获取用户信息”.”新增用户”和”删除用户”的时,后台输出打印如下信息 , Druid数据源SQL监控 为了避免频繁访问数据库获取权限信息,在Shiro中加 ...
- Tracking-Learning-Detection (TLD算法总结)
一.TLD算法简介 TLD(Tracking-Learning-Detection)是英国萨里大学的一个捷克籍博士生ZdenekKalal在2012年7月提出的一种新的单目标长时间跟踪算法.该算法与传 ...
- PHPExcel 中文使用手册参数详解 三
设置excel的属性:创建人$objPHPExcel->getProperties()->setCreator("Maarten Balliauw");最后修改人$ob ...
- 带CheckBox美化控件的表格全选
带CheckBox美化控件 <table class="positionTable commonListTable" id="positionTable" ...