JavaScript的继承的封装介绍


Posted in Javascript onOctober 15, 2013
/** 
* 当调用此函数时,只有第一次参数传入,第二个不存在的情况下,就创建类 
* 当调用此函数时,传入了两个参数,第一个参数为基类,第二个参数则在基类的基础上添加内容 
*/ 
function extend(obj,prop){ 
function F(){ } 
//如果第一个参数为object类型(即json对象)的话,则将json的key value赋值给F函数的原型 F.prototype.key = value 
if (typeof(obj) == "object") { 
for(var name in obj){ 
F.prototype[name] = obj[name]; 
} 
} else {//如果第一个参数为function类型的话,则将次函数的原型赋值给F函数,prop肯定是传值的(json对象),所以将prop赋值给F函数的原型 
F.prototype = obj.prototype; 
for(var name in prop){ 
F.prototype[name] = prop[name]; 
} 
} 
return F; 
} 
//因为这里只有一个参数,所以此时会将json对象的key,value赋值给extend函数中的F函数的原型,然后用person变量接收F函数,此时person也成为了一个函数,此函数也拥有了F函数的原型 name和sex 
var person = extend({ 
name:"xxc", 
sex:"man" 
}); 
//将person函数传入,进入extend函数后,首先将person的原型赋值给F函数,然后将第二个参数hope:"more money"赋值给F函数,此时F函数的原型有三个东西name,sex,hope 
//最后将F函数返回,导致person的原型也和F函数一样,有name,sex,hope 
var person = extend(person,{ 
hope:"more money" 
}); 
alert(person.prototype.name);//xxc 
alert(person.prototype.sex);//man 
alert(person.prototype.hope);//more money

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>function.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<script src="../jquery/jquery-1.10.2.min.js"></script> 
<script src="extends2.js"></script> 
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
</head> 
<body> 
</body> 
</html>
Javascript 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
JS原型与继承操作示例
May 09 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
layui table 表格模板按钮的实例代码
Sep 21 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 #Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 #Javascript
js算法中的排序、数组去重详细概述
Oct 14 #Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 #Javascript
不同Jquery版本引发的问题解决
Oct 14 #Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 #Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 #Javascript
You might like
深入apache host的配置详解
2013/06/09 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
php常用hash加密函数
2014/11/22 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
ASP SQL防注入的方法
2008/12/25 Javascript
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
JS高级笔记
2011/07/13 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
python Django模板的使用方法
2016/01/14 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
Julep官网:美容产品和指甲油
2017/02/25 全球购物
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
个人党性剖析材料
2014/02/03 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
故宫英文导游词
2015/01/31 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis