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 相关文章推荐
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
Node.js进阶之核心模块https入门
May 23 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
JS如何在不同平台实现多语言方式
Jul 16 Javascript
JS变量提升及函数提升实例解析
Sep 03 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
python读文件逐行处理的示例代码分享
2013/12/27 Python
python实现在windows服务中新建进程的方法
2015/06/30 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
python+pygame实现坦克大战
2019/09/10 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
python字典按照value排序方法
2020/12/28 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
python绘制汉诺塔
2021/03/01 Python
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
行政助理的岗位职责
2014/02/18 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
开天辟地观后感
2015/06/09 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript