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官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
JavaScript 事件查询综合
Jul 13 Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
jquery实现图片放大镜效果
Dec 23 jQuery
如何让浏览器支持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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
php var_export与var_dump 输出的不同
2013/08/09 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
非常实用的php验证码类
2016/05/15 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
浅说js变量
2011/05/25 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
详解python之多进程和进程池(Processing库)
2017/06/09 Python
深入浅出学习python装饰器
2017/09/29 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
中国旅游网站:同程旅游
2016/09/11 全球购物
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
财务信息服务专业自荐书范文
2014/02/08 职场文书
美国留学经济担保书
2014/05/20 职场文书
校长新学期寄语2016
2015/12/04 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang
Spring Boot实现文件上传下载
2022/08/14 Java/Android