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 验证浏览器是否支持javascript的方法小结
May 17 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
js处理表格对table进行修饰
May 26 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
JS 验证码功能的三种实现方式
Nov 26 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 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读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
拖拉表格的JS函数
2008/11/20 Javascript
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
vue使用exif获取图片旋转,压缩的示例代码
2020/12/11 Vue.js
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
python实现简单图片物体标注工具
2019/03/18 Python
Python3.8中使用f-strings调试
2019/05/22 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
关于python字符串方法分类详解
2019/08/20 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
毕业生多媒体设计求职信
2013/10/12 职场文书
《影子》教学反思
2014/02/21 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python