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 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
js调用屏幕宽度的简单方法
Nov 14 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
jQuery实现简单全选框
Sep 13 jQuery
浅谈Web Storage API的使用
Jun 23 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
星际争霸秘籍
2020/03/04 星际争霸
社区(php&amp;&amp;mysql)六
2006/10/09 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
Python实现截屏的函数
2015/07/25 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
python程序 创建多线程过程详解
2019/09/23 Python
Django继承自带user表并重写的例子
2019/11/18 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
群众路线批评与自我批评发言稿
2014/10/16 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python