函数的调用
程序员文章站
2022-03-17 12:15:14
...
函数的调用分为普通函数的调用，方法调用，构造函数的调用和间接调用
普通函数
普通函数分为命名函数和匿名函数
命名函数调用
function add() {
// body...
}
add();
匿名函数调用
匿名函数的调用分为三种，使用一个变量保存匿名函数
var add = function () {
// body...
};
add();
调用的时候直接加（）-----自调
(function () {
console.log(1);
})();
或者
(function () {
console.log(1);
}());
或者随意酷炫一点，只要使得function不再是打头出现，console.log()也可以
!+-~function () {
console.log(1);
}();
console.log(function () {
return 1;
}());
使用匿名函数自执行方式，计算56-23的值
console.log((function(num1,num2){
return num1-num2;
}(56,23)));
递归调用
function factorial(num) {
if (num <= 1) return 1;
return num * factorial(num - 1);
return 5 * 4! = 5 * 4 * 3! =... 5 * 4 * 1!
}
console.log(factorial(5));
console.log(factorial(4));
当如果没有写入if (num <= 1) return 1;程序会出现大多递归导致报错
方法的调用
通过对象.方法调用
var operation = {
add: function (num1, num2) {
return num1 + num2;
},
subtract: function (num1, num2) {
return num1 - num2;
}
};
operation.add(1, 1);
对于合法的标识符可以不使用’‘单引号引起来，对于不合法的标识符例如@,则需要变成’@‘声明，在调用的时候需要不能像operation.add(1,2)这样的方式来调用，需要使用中括号的形式operation[’@’](1, 2)
var operation = {
add: function (num1, num2) {
return num1 + num2;
},
subtract: function (num1, num2) {
return num1 - num2;
},
'@': function () {
console.log('@');
},
key: function () {
// body...
}
};
console.log(operation.add(1, 2));
console.log(operation['@'](1, 2));
var key = 'add';
console.log(operation[key](1, 2));
对于事件来说，document会主动之前被绑定事件函数模拟事件的发生
document.onclick = function () {
console.log('你点击了文档！');
};
document.onclick();
例：现有一个矩形的盒子和按钮，盒子的右上角有一个表示关闭的x，当点击按钮和x号时，矩形的盒子会消失。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>方法的调用</title>
<style type="text/css">
#box{position: relative; width: 100px; height: 100px;
background-color: red; margin: 10px auto;}
#close{position: absolute; right: 0px; top: -4px; color: yellow;}
#btn{display: block; width: 100px; margin: 0 auto;}
</style>
</head>
<body>
<div id="box">
<span id="close">X</span>
</div>
<button id="btn">关闭</button>
<script type="text/javascript">
// 在此处补充代码
var box = document.getElementById('box');
var closes = document.getElementById('close');
var btn = document.getElementById('btn');
btn.onclick=function(){
box.style.display="none";
}
closes.onclick=function(){
btn.onclick();
}
</script>
</body>
</html>
构造函数的调用
一般使用大写字母来表示一个构造函数，实例化构造函数返回对象，构造函数必须通过new实例化调用。
用构造函数的方式分别定义对象和数组，并向其中添加一些内容
function Person(name){
this.name= name;
}
var person = new Person("xm");
console.log(person);
var arr = new Array(1,5,7,9);
console.log(arr);
显示’xm’,[object Object]
function person(){
return 'xm';
}
document.write(person());
document.write(new person());
函数的间接调用
每个函数都有call和apply方法
call和apply的唯一区别在于他们传参的方式上
var name = 'xm';
var person = {};
person.name = 'xh';
person.getName = function () {
return this.name;
};
console.log(person.getName());
console.log(person.getName.call(window));
console.log(person.getName.apply(window));
输出显示xh xm xm
因为call()和apply()的第一个参数会改变this指向，将之前的this指向person改变成this指向了window，所以显示了xm
function add(num1, num2) {
return num1 + num2;
}
console.log(add(1, 2));
var datas = [1, 2];
console.log(add.call(window, 1, 2));
console.log(add.apply(window, datas));
输出3 3 3
apply可以将接收到的数据传递进去，并将结果显示出来