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事件列表解说
Dec 22 Javascript
Javascript实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
js操作二级联动实现代码
Jul 27 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 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检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
CodeIgniter框架验证码类库文件与用法示例
2017/03/18 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
vue语法之拼接字符串的示例代码
2017/10/25 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
python实现将内容分行输出
2015/11/05 Python
详解Python做一个名片管理系统
2019/03/14 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
Python切图九宫格的实现方法
2019/10/10 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
python xlsxwriter模块的使用
2020/12/24 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
职业技术学校毕业生推荐信
2013/12/03 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
负责人任命书范本
2014/06/04 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
mysql函数之截取字符串的实现
2022/08/14 MySQL