JS的Call方法实现的继承

最新推荐文章于 2025-05-24 10:02:27 发布

psyuhen

最新推荐文章于 2025-05-24 10:02:27 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： function javascript java html

本文链接：https://blog.youkuaiyun.com/psyuhen/article/details/7230658

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

本文通过实例详细介绍了如何使用JavaScript的Call方法实现继承。通过一个Person构造函数和一个继承自Person的小明构造函数，展示了如何利用Call方法将父类的方法和属性引入子类。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

call 方法
调用一个对象的一个方法，以另一个对象替换当前对象。

call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

参数
thisObj

可选项。将被用作当前对象的对象。

arg1, arg2,  , argN

可选项。将被传递方法参数序列。

说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

以上为JavaScript里面对Call方法的解释。

使用Call方法实现JavaScript里面的继承。

看例子：
function person(name,age){
	this.name = name;
	this.age = age;
	
	this.alertName = function (){
		alert(this.name);
	};
	
	this.alertAge = function (){
		alert(this.age);
	};
	
	
}

function xiaoming(name,age,sex){
	person.call(this,name,age);
	
	this.sex = sex;
	
	this.alertSex = function(){
		alert(this.sex);
	};
}

定义了一个Person的函数，相当于Java中的类。

然后呢，再定义一个xiaoming的函数。这个函数是继承Person的。

主要的关键要看这一句：

person.call(this,name,age);

使用person.call(this,name,age);可以把person中的所有属性以及方法继承到xiaoming函数中，类似了Java中的继承，只不过Java中的继承更加严格。

把以上JS保存到jscall文件中。

再看例子。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/call/jscall.js"></script>
<script type="text/javascript">
	function toname(){
		var xm = new xiaoming("小明",12,"boy");
		xm.alertName();
	}
	function toage(){
		var xm = new xiaoming("小明",12,"boy");
		xm.alertAge();
	}
	function tosex(){
		var xm = new xiaoming("小明",12,"boy");
		xm.alertSex();
	}
</script>
</head>
<body>
	<input value="打印名字" onclick="toname()" type="button"/>
	<input value="打印年龄" onclick="toage()" type="button"/>
	<input value="打印性别" onclick="tosex()" type="button"/>
</body>
</html>

先引入jscall文件。

然后各个打印出来。

看此代码：

var xm = new xiaoming("小明",12,"boy");
		xm.alertName();

本身xiaoming中没有定义alertName方法。但继承后，它的实例可以使用继承下来的方法。

运行效果：