Javascript中的Call方法讨论_springscript的call方法的含义是什么-CSDN博客

本文链接：https://blog.csdn.net/anialy/article/details/8299181

简述：

讨论一下Javascript中 Call的用法

call 方法(版本5.5以上） :

文档中描述：

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

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

thisObj

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

arg1, arg2, , argN

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

测试特性：

1. Person类对象转换（我觉得是种实例化对象后，继承的形式）

<!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>Test Call</title>
</head>
<body>
<script type="text/javascript">

function Person(name){
	this.name = null;
	this.showName = function(){
		document.write(this.name);
	};
	this.Init = function(name){  
    	this.name = name;  
    }  
    this.Init(name);  
};

var jeremy = new Person("Jeremy");
jeremy.showName();

document.write("<br>");

var tom = new Object();
Person.call(tom); //Person class do call()
tom.name = "Tom";
tom.showName();

</script>
</body>

输出：

2. 用call方法替换this指针

在这段代码中， NameShowing 类中，showName() 方法，需要有this.name 参数，

所以用call方法，传入实例jeremy.name, 用新对象jeremy替代this指针

<!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>Test Call</title>
</head>
<body>
<script type="text/javascript">

function NameShowing(){
	this.showName = function(){
		document.write(this.name);
	}
}

function Person(name){
	this.name = null;
	this.Init = function(name){  
    	this.name = name;  
    }  
    this.Init(name);  
};

var nameShowing = new NameShowing();
var jeremy = new Person("Jeremy")

//replace the 'this' pointer by jeremy object
nameShowing.showName.call(jeremy);

</script>
</body>
</html>

输出：

3. 用call（obj），实例obj继承方法

jeremy做为一个Person的实例，缺少showName()方法，从NameShowing类中使用call ， jeremy继承了showName（）方法

<!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>Test Call</title>
</head>
<body>
<script type="text/javascript">

function NameShowing(){
	this.showName = function(){
		document.write(this.name);
	}
}

function Person(name){
	this.name = null;
	this.Init = function(name){  
    	this.name = name;  
    }  
    this.Init(name);  
};

var jeremy = new Person("Jeremy")
//pass showName() method to jeremy object
NameShowing.call(jeremy);
jeremy.showName();

</script>
</body>
</html>

输出：

4 call实现带有构造函数的参数传入

<!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>Test Call</title>
</head>
<body>
<script type="text/javascript">

function Person(name, age){
	this.name = null;
	this.age = null;
	this.showPersonInfo = function(){
		document.write("Name: " + this.name + "<br>");
		document.write("Age: " + this.age + "<br>");
	};
	this.Init = function(){
		this.name = name;
		this.age = age;
	};
	this.Init();
}

var jeremy = new Object();
Person.call(jeremy, "Jeremy", 20);
jeremy.showPersonInfo();

</script>
</body>
</html>

输出：

call函数原理分析：

从上面call方法使用中，发生了原先的this指针被新的对象替代的方法，而原先的参数也就赋给了新的对象

从网上资料看到，

直接说就是，使用apply实现了新对象对this指针的替代

例如下面代码使用到了apply 方法：

function A(a){
	document.write(a);
};
			
function AA(a){
	A.apply(this, arguments);
}
			
AA("output in AA");

输出是：

Javascript中的Call方法讨论

1. Person类对象转换（我觉得是种实例化对象后， 继承的形式）

2. 用call方法替换this指针

3. 用call（obj），实例obj继承方法

4 call实现带有构造函数的参数 传入

call函数原理分析：

1. Person类对象转换（我觉得是种实例化对象后，继承的形式）

4 call实现带有构造函数的参数传入