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 urldecode URL解码的问题
Jan 08 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
jquery插件jquery倒计时插件分享
Dec 27 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
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者的疑难问答(1)
2006/10/09 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
node.js中的console.info方法使用说明
2014/12/09 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
使用Vue实现简单计算器
2020/02/25 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
python3爬取各类天气信息
2018/02/24 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
《池塘边的叫声》教学反思
2014/04/12 职场文书
影视后期实训报告
2014/11/05 职场文书
保证书格式
2015/01/16 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
Vue+Flask实现图片传输功能
2022/04/01 Vue.js
nginx 配置缓存
2022/05/11 Servers