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 相关文章推荐
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
百度地图自定义控件分享
Mar 04 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
jQuery实现简单隔行变色的方法
Feb 20 Javascript
js自定义select下拉框美化特效
May 12 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 Javascript
一百多行代码实现react拖拽hooks
Mar 23 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
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
JS中字符串trim()使用示例
2015/05/26 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
python搭建微信公众平台
2016/02/09 Python
Python 基础知识之字符串处理
2017/01/06 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
python 用下标截取字符串的实例
2018/12/25 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
Python中return函数返回值实例用法
2020/11/19 Python
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
.net开发工程师面试题
2014/02/25 面试题
设计师个人求职信范文
2014/02/02 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
个性与发展自我评价
2014/02/11 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python