函数的调用

最新推荐文章于 2023-03-18 20:57:33 发布

saiyi绒小花

最新推荐文章于 2023-03-18 20:57:33 发布

阅读量302

点赞数

分类专栏： js 文章标签： js 函数的调用

本文链接：https://blog.csdn.net/qq_34634181/article/details/102549386

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

函数的调用分为普通函数的调用，方法调用，构造函数的调用和间接调用

普通函数

普通函数分为命名函数和匿名函数

命名函数调用

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可以将接收到的数据传递进去，并将结果显示出来

saiyi绒小花

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
函数的调用

函数的调用分为普通函数的调用，方法调用，构造函数的调用和间接调用普通函数普通函数分为命名函数和匿名函数命名函数调用function add() { // body...}add();匿名函数调用匿名函数的调用分为三种，使用一个变量保存匿名函数var add = function () { // body...};add();调用的时候直接加（）-----自调(fu...
复制链接

扫一扫