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转换农历类实现及调用方法
Jan 27 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
vue中v-model动态生成的实例详解
Oct 27 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
浅析JavaScript预编译和暗示全局变量
Sep 03 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的性能
2013/10/30 PHP
PHP实现根据银行卡号判断银行
2015/04/29 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
对Python中plt的画图函数详解
2018/11/07 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
python实现宿舍管理系统
2019/11/22 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
CSS3 简写animation
2012/05/10 HTML / CSS
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
CK美国官网:Calvin Klein
2016/08/26 全球购物
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
教师申诉制度
2014/01/29 职场文书
公司门卫管理制度
2014/02/01 职场文书
学生党支部先进事迹
2014/02/04 职场文书
2014年端午节活动方案
2014/03/11 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
房屋产权证明书
2014/10/15 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
Python first-order-model实现让照片动起来
2022/06/25 Python