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 动态将数字金额转化为中文大写金额
May 14 Javascript
Javascript 圆角div的实现代码
Oct 15 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
Node调用Java的示例代码
Sep 20 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 Javascript
详解vue中v-for的key唯一性
May 15 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中出现空白页的原因及解决方法汇总
2014/07/08 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
javascript 主动派发事件总结
2011/08/09 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
2018/07/09 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
python 七种邮件内容发送方法实例
2014/04/22 Python
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
python九九乘法表的实例
2017/09/26 Python
python八大排序算法速度实例对比
2017/12/06 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
python不同系统中打开方法
2020/06/23 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
html+css3实现的登录界面
2020/12/09 HTML / CSS
餐饮主管岗位职责
2013/12/10 职场文书
宣传普通话标语
2014/06/27 职场文书
小学捐书活动总结
2014/07/05 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android