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 相关文章推荐
List Installed Hot Fixes
Jun 12 Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
vue+AI智能机器人回复功能实现
Jul 16 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
如何让浏览器支持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将XML转数组过程详解
2013/11/13 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
基于jquery的动态创建表格的插件
2011/04/05 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
Python实现批量修改文件名实例
2015/07/08 Python
Python在线运行代码助手
2016/07/15 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
python面向对象 反射原理解析
2019/08/12 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
python实现批处理文件
2020/07/28 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
C#怎么让一个窗口居中显示?
2015/10/20 面试题
导游个人求职信范文
2014/03/23 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
岗位聘任协议书
2015/09/21 职场文书