目录
总论
函数作为对象的成员
函数不是任何对象的成员
通过构造函数调用
代码
效果
通过apply调用
把前面的代码稍微改一改:
效果:
解释:
总论
根据《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调用
把前面的代码稍微改一改:
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
|