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 Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
重写javascript中window.confirm的行为
Oct 21 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
JavaScript函数柯里化
Nov 07 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
main.php
2006/12/09 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
js常用代码段收集
2011/10/28 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
Python实现线程池代码分享
2015/06/21 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
python实现串口自动触发工作的示例
2019/07/02 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
django model object序列化实例
2020/03/13 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
python实现马丁策略的实例详解
2021/01/15 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
毕业生优秀推荐信
2013/11/26 职场文书
打架检讨书500字
2014/01/29 职场文书
初中生评语大全
2014/04/24 职场文书
行政专员求职信范文
2014/05/03 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers