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 相关文章推荐
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 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
用PHP产生动态的影像图
2006/10/09 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
js字符串操作方法实例分析
2015/05/06 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
JS实现json数组排序操作实例分析
2019/10/28 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
python logging类库使用例子
2014/11/22 Python
Python标准异常和异常处理详解
2015/02/02 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
django组合搜索实现过程详解(附代码)
2019/08/06 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
python list多级排序知识点总结
2019/10/23 Python
pycharm显示远程图片的实现
2019/11/04 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
为什么要有struct关键字
2012/05/08 面试题
基于Python 函数和方法的区别说明
2021/03/24 Python
珠宝店促销方案
2014/03/21 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
结婚仪式主持词
2015/06/29 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android