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 相关文章推荐
javascript第一课
Feb 27 Javascript
基于逻辑运算的简单权限系统(实现) JS 版
Mar 24 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
javascript图片滑动效果实现
Jan 28 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 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
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
PHP模块化安装教程
2016/06/01 PHP
js异或加解密效果代码
2008/06/25 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
python抓取京东商城手机列表url实例代码
2013/12/18 Python
Python中的魔法方法深入理解
2014/07/09 Python
python操作ie登陆土豆网的方法
2015/05/09 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
PyTorch实现AlexNet示例
2020/01/14 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
Jupyter安装链接aconda实现过程图解
2020/11/02 Python
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
外科实习自我鉴定
2013/10/06 职场文书
中英文求职信范文
2014/01/27 职场文书
小学二年级评语
2014/04/21 职场文书
入职担保书范文
2014/05/21 职场文书
论文诚信承诺书
2014/05/23 职场文书
流动人口婚育证明
2014/10/19 职场文书
关于学习的决心书
2015/02/05 职场文书
PHP命令行与定时任务
2021/04/01 PHP