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函数
May 27 Javascript
Javascript hasOwnProperty 方法 &amp; in 关键字
Nov 26 Javascript
jquery连缀语法如何实现
Nov 29 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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 get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
javascript 框架小结 个人工作经验
2009/06/13 Javascript
JavaScript 面向对象之命名空间
2010/05/04 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
AngularJS封装指令方法详解
2016/12/12 Javascript
简单的三步vuex入门
2018/05/20 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
2020/11/13 Javascript
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
Python中使用PDB库调试程序
2015/04/05 Python
Python正则表达式使用范例分享
2016/12/04 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
VICHY薇姿英国官网:全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
马来西亚网上购物:Youbeli
2018/03/30 全球购物
TheFork葡萄牙:欧洲领先的在线餐厅预订平台
2019/05/27 全球购物
市场营销专业毕业生自荐信
2013/11/02 职场文书
机电专业毕业生推荐信
2013/11/10 职场文书
新闻记者个人求职的自我评价
2013/11/28 职场文书
员工年终演讲稿
2014/01/03 职场文书
学生检讨书如何写
2014/10/30 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
Vue+Flask实现图片传输功能
2022/04/01 Vue.js