Javascript的4种函数调用方法--《Javascript The Good Parts》读书笔记

金色熊族

已于 2022-04-30 20:57:15 修改

阅读量486

点赞数

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

于 2022-01-03 20:20:35 首次发布

本文链接：https://blog.csdn.net/liji_digital/article/details/122291262

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文详细解析了JavaScript中的四种函数调用方式：作为对象成员、独立调用、构造函数调用和apply/call方法。重点讨论了this的指向问题，特别是在不同调用场景下如何影响函数的行为。通过实例代码和效果展示，帮助理解JavaScript中函数调用的微妙之处，并指出通过构造函数调用的不推荐做法。

摘要由CSDN通过智能技术生成

总论

根据《Javascript The Good Parts》第四章（这本书出版于2015年以前，没有包含ECMASCRIPT6的标准），Javascript提供4种函数调用方法:函数作为对象的成员；函数不是任何对象的成员；通过构造函数调用；通过apply调用

函数作为对象的成员

函数中的this指向其所属对象。

函数不是任何对象的成员

this指向整个程序的根节点--window。具体实例可见我的另一篇博客论javascript中this和that--《Javascript The Good Parts》读书笔记_liji_digital的博客-CSDN博客

通过构造函数调用

这是个容易产生困惑的方法。在此方法中，函数的定义与第二种情况（函数不是任何对象的成员）的定义方法一样。但是调用方式不一样：本方法采用关键字new来产生一个新的函数。看下面的例子。

代码

<html>

<head>

</head>

<body>

<script>
	let BaseFunc = function (val) {
		this.status = val;
	};
	
	BaseFunc.prototype.getStatus = function () {
		return this.status;
	}
	
	let myFunc = new BaseFunc(10);
	document.writeln('myFunc' + myFunc.status + ' ');
	BaseFunc(100);
	document.writeln('window' + window.status);
</script>

</body>
</html>

BaseFunc的声明没什么特别的。接下来new一个myFunc。new这个关键字将调用BaseFunc作为构造函数。返回的也是一个函数myFunc。myFunc的行为与BaseFunc没什么区别，唯一要注意的是myFunc具有一个属性status，且这个变量的赋值就是通过构造函数完成的：this.status = 10。在这里，this指向的就是myFunc.

效果

可见，myFunc.status的取值与预想一致。

但是，如果直接调用BaseFunc(本文所说的第一种情况)，那么this指向的就是window。这也从结果中得到印证。这也是这个方法容易让人糊涂的地方。

最后，《Javascript The Good Parts》里明确的说，不推荐这种做法。

通过apply(call)调用

把前面的代码稍微改一改：

	let BaseFunc = function (val) {
		this.status = val;
	};
	
	BaseFunc.prototype.getStatus = function () {
		return this.status;
	}
	
	let myFunc = new BaseFunc(10);
	document.writeln('myFunc' + myFunc.status + ' ');
	BaseFunc(100);
	document.writeln('window' + window.status + ' ');
	BaseFunc.apply(myFunc, [200]);//增加第一行
	document.writeln('myFunc' + myFunc.status);//增加第二行

效果：

解释：

apply的第一个输入参数是this的指向，这里指向了myFunc。第二个参数是BaseFunc的输入参数列表，是一个数组。由于BaseFunc只有一个输入变量，所以数组只有一个元素。假如baseFunc没有输入参数，则此项可以省略不填。BaseFunc的this.status不再更新window的同名属性，转而指向myFunc.status

call函数的作用跟apply是一样的。只是用法稍有区别。apply的第二个参数是数组，数组内容是函数的各个输入参数。而call的输入参数则是数组内容的展开：把数组元素逐个作为输入参数列入call的第二、第三...个输入参数。