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 相关文章推荐
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
详解vue express启动数据服务
Jul 05 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
js通过循环多张图片实现动画效果
Dec 19 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 Javascript
小程序中手机号识别的示例
Dec 14 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实现文件安全下载
2006/10/09 PHP
PHP中Session的概念
2006/10/09 PHP
php购物车实现代码
2011/10/10 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
利用python求相邻数的方法示例
2017/08/18 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
高考考python编程是真的吗
2020/07/20 Python
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
优秀员工推荐信
2014/05/10 职场文书
关于建议书的格式范文
2014/05/20 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
MySql数据库触发器使用教程
2022/06/01 MySQL