本文详细解析JavaScript中基于原型链的继承与封装机制。通过自定义extend函数,演示如何根据参数类型(对象或构造函数)动态扩展原型属性。文章包含单参数创建类与双参数继承基类的两种模式,并附带完整的HTML测试代码,帮助开发者理解原型扩展的核心逻辑。
JavaScript原型继承封装实现
代码如下:
/**
当调用此函数时,若仅传入第一个参数且不存在第二个参数,则用于创建一个新的类。
当调用此函数时,若传入了两个参数,第一个参数指定基类,第二个参数则用于在基类的基础上添加新的内容。
*/
function extend(obj, prop) {
function F() {
}
// 如果第一个参数是对象类型(即JSON对象),则将JSON对象的键值对赋值给F函数的原型,即 F.prototype.key = value。
if (typeof(obj) == "object") {
for (var name in obj) {
F.prototype[name] = obj[name];
}
} else { // 如果第一个参数是函数类型,则将次函数的原型赋值给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 HTML测试环境配置
代码如下:
<!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>