javascript面向对象特性代码实例


Posted in Javascript onJune 12, 2014

一、基本的类的使用
方法一:

function sth(a) // 构造函数 
{ 
 this.a = a; 
 this.fun = output; // 成员函数 
} 
function output(a, b, c) 
{ 
 document.write(this.a); 
} 
//调用
var s = new sth(250); 
s.fun(1, 2, 3); 
ouput(1, 2, 3); //如果output在sth之前就是错的

方法二:

function sth(a) 
{   
 this.a = a; 
 this.output = function() 
 { 
  document.write(this.a); 
 } 
} var s = new sth(2); 
s.output(); // 输出2

二、继承
方法一:
function A(x) 
{ 
 this.x = x; 
} 
function B(x, y) 
{ 
 // 方法1 
 /* 
 this.construct = A; 
 this.construct(x); 
 delete this.construct; 
 */  
 // 方法2 
 //A.call(this, x); 
 // 方法3 
 A.apply(this, new Array(x)); // 亦可A.apply(this, arguments), 不过arguments参数顺序一定要对 
 this.y = y; 
 this.print = function() 
 { 
  document.write("x = ", x, 
         ", y = ", y); 
 } 
} 
var b = new B(1, 2); 
b.print();
alert(B instanceof A); // 输出false

优点:可以实现多继承(多调用call就好)

缺点:
· 必须以构造函数方式使用
· 使用instanceof运算符运算此类继承结果为false

方法二:

function A() 
{ 
} 
A.prototype.x = 1; 
function B() 
{ 
} 
B.prototype = new A(); // 不能带参数! 
B.prototype.y = 2;  
B.prototype.print = function() 
{ 
 document.write(this.x, ", ", this.y, "<br>"); 
} 
var b = new B(); 
b.print(); 
document.write(b instanceof A); // 输出true

缺点:
· 不能实现多继承
· 构造函数不带参数

Tips

通常使用混合模式,两者一起用

function A(x) 
{ 
 this.x = x; 
} 
A.prototype.printx = function()  // 写到A类里面this.printx = function....也是可以的,下同
{ 
 document.write(this.x, "<br>"); 
} function B(x, y) 
{ 
 A.call(this, x); 
 this.y = y; 
} 
B.prototype = new A(); // 不能带参数!  
B.prototype.printxy = function() 
{ 
 document.write(this.x, ", ", this.y, "<br>"); 
} 
var b = new B(1, 2); 
b.printx();  // 输出1 
b.printxy(); // 输出1, 2 
document.write(b instanceof A); // 输出true

三、类似静态成员函数的使用

function sth(a) 
{   
 this.a = a; 
} sth.fun = function(s) 
{ 
 document.write(s.a); 
} 
var s = new sth(2); 
sth.fun(s); // 输出2

四、对象的释放

var obj = new Object; // obj是引用
obj = null; // 取消引用,会自动进行垃圾回收;如果需要根本释放此对象,要将它的所有引用都赋值为null

五、函数对象

var v = new Function("arg1", "arg2", "document.write(arg1 + arg2);"); // 定义一个函数对象,参数分别是arg1,arg2 
v(1, 2); // 将会输出3

六、回调函数

function callback(func, arg) 
{ 
 func(arg); 
} function fun(arg) 
{ 
 document.write(arg); 
}
//callback(func, "sb"); // 这种做法不行 
var func = new Function("arg", "fun(arg);"); 
// 当然也可以把func(arg)换成具体的执行代码,   
// 但是函数代码庞大了就最好这样做了 
callback(func, "sb");

七、函数的重载

function fun() 
{ 
 switch (arguments.length) 
 { 
 case 1: 
  document.write(arguments[0]); 
  break; 
 case 2: 
  document.write(arguments[0] + arguments[1]); 
  break; 
 default: 
  document.write("ERROR!"); 
  break; 
 } 
} fun(1); 
fun(1, 2);

八、利用函数闭包实现有“静态变量”的函数

function fun() 
{ 
 var v = 1; 
 function fun2() 
 { 
  ++v; 
  document.write(v); 
  document.write("<br>"); 
  return v; 
 }  return fun2; 
} 
var func = fun(); 
func(); // 输出2 
func(); // 输出3 
func(); // 输出4
Javascript 相关文章推荐
通过jquery实现tab标签浏览效果
Feb 20 Javascript
jquery随意添加移除html的实现代码
Jun 21 Javascript
jquery中获取元素的几种方式小结
Jul 05 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
基于jquery编写分页插件
Mar 07 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 #Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 #Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 #Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 #Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 #Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 #Javascript
自己封装的javascript事件队列函数版
Jun 12 #Javascript
You might like
PHP安装全攻略:APACHE
2006/10/09 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
写js时遇到的一些小问题
2010/12/06 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
Python自动生产表情包
2017/03/17 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
python怎么判断模块安装完成
2020/06/19 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
银行门卫岗位职责
2013/12/29 职场文书
王老吉广告词
2014/03/20 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
导游词之杭州西湖
2019/09/19 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers