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进阶教程(第四课第一部分)
Apr 05 Javascript
javascript 学习之旅 (1)
Feb 05 Javascript
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 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获取网卡地址的代码
2008/04/09 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
webpack 插件html-webpack-plugin的具体使用
2018/04/09 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
python 实现UTC时间加减的方法
2018/12/31 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
详解python内置模块urllib
2020/09/09 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
家长给孩子的评语
2014/01/30 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
市场推广策划方案
2014/06/02 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
刑事上诉状范文
2015/05/22 职场文书
红与黑读书笔记
2015/06/29 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
Python基础之pandas数据合并
2021/04/27 Python
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技