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一元操作符(递增、递减)使用示例
Aug 07 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
详解http访问解析流程原理
Oct 18 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
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
改造一台复古桌面收音机
2021/03/02 无线电
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
详解YII关联查询
2016/01/10 PHP
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
简单谈谈Python中函数的可变参数
2016/09/02 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
Nike瑞士官网:Nike CH
2021/01/18 全球购物
应聘自荐书
2013/10/08 职场文书
高中生物教学反思
2014/02/05 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
买卖合同协议书范本
2014/10/18 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
2016教师节感恩话语
2015/12/09 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server