js函数

最新推荐文章于 2020-12-22 10:16:55 发布

GastonPeng

最新推荐文章于 2020-12-22 10:16:55 发布

阅读量198

点赞数

分类专栏：前端文章标签： js函数

本文链接：https://blog.csdn.net/qq_36421955/article/details/103522174

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>函数是个神马玩意儿</title>
</head>
<body>


<script>
    // 什么是函数
    // 一次封装（定义），四处使用（调用）

    // JS中的函数
    // 一般情况下的样子
    // function add(num1, num2) {
    // 	// var result = num1 + num2;
    // 	// return result;
    // 	return num1 + num2;
    // 	console.log(1);
    // }
    // add(1, 1);
    // add(1, 2);
    // add(1, 3);

    // window.onload = function () {
    // 	// body...
    // }

    // 定义和调用时发生了什么
    // function add(num1, num2) {
    // 	var result = num1 + num2;
    // 	return result;
    // }
    // add(1, 1);
    // add(1, 2);
    // add(1, 3);

    // 为什么要使用函数
    // 复用代码
    // 自己
    // 他人
    // 	jQuery
    // 		$('p')

    // 统一修改和维护
    // function add(num1, num2) {
    // 	// var result = num1 + num2;
    // 	// return result;
    // 	return num1 + num2;
    // }
    // add(1, 1);
    // add(1, 2);
    // add(1, 3);

    // 可读性
    // function doThings(month) {
    // 	if (month >= 3 && month <= 5) {
    // 		// 踏春
    // 	} else if (month >= 6 && month <= 8) {
    // 		// 游泳
    // 	} else if (month >= 9 && month <= 11) {
    // 		// 秋收
    // 	} else {
    // 		// 睡觉
    // 	}
    // }

    // function isSpring(month) {
    // 	return month >= 3 && month <= 5;
    // }
    // function isSummer(month) {
    // 	return month >= 6 && month <= 8;
    // }
    // function isAutumn(month) {
    // 	return month >= 9 && month <= 11;
    // }
    // function doThings(month) {
    // 	if (isSpring()) {
    // 		// 踏春
    // 	} else if (isSummer()) {
    // 		// 游泳
    // 	} else if (isAutumn()) {
    // 		// 秋收
    // 	} else {
    // 		// 睡觉
    // 	}
    // }

    // 函数的本质
    // 光
    // 	波
    // 	粒子
    // 二象性
    // 	调用
    // 	对象 {}
    	// 定义
    	// 	字面量 {}
    	// 		function add(num1, num2) {
    	// 			// body...
    	// 		}
    	// 	构造函数 new Object()
    	// 		new Function('num1', 'num2', '...')
    	// 添加属性和方法
    	// 	var person = {};
    	// 	person.name = 'xm';
    	// 	person.setName = function (name) {
    	// 		this.name = name;
    	// 	}
    		// function add(num1, num2) {
    		// 	return num1 + num2;
    		// }
    		// add.sex = 'male';
    		// add.setSex = function (sex) {
    		// 	this.sex = sex;
    		// }
    		// console.log(add.sex);
    		// console.log(add.setSex('female'));
    		// console.log(add.sex);
    		// console.log(add(1, 2));

    	// 作为数据值使用
    	// var person = {};	
    	// var add = function () {
    	// 	return 1;
    	// };
    	// // add();
    	// console.log(add());
    	// console.log(add);
    	// function add() {
    	// 	// body...
    	// }
    	// [{}, function () {
    	// 	// body...
    	// }]
    	// {
    	// 	family: {},
    	// 	setName: function (argument) {
    	// 		// body...
    	// 	}
    	// }

    	// 作为参数
    	// setTimeout(function () {
    	// 	console.log(1);
    	// }, 1000);
    	// setTimeout(fn, 1000);
    	// function fn() {
    	// 	console.log(1);
    	// }

    	// 作为返回值
    	function fn() {
    		return function () {
    			console.log(1);
    		};
    	}
    	// var newFn = fn();
    	// newFn();
    	fn()();



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

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>函数的定义</title>
</head>

<body>
    <script>
    // 三种定义方式
    // 字面量
    // 	function声明
    // 		function add() {
    // 			// body...
    // 		}
    // 		add();
    // 	var赋值表达式
    // 		var add = function (argument) {
    // 			// body...
    // 		};
    // 		add();
    // 		var add = function fn(argument) {
    // 			// body...
    // 			fn();
    // 			add();
    // 		};
    // 		add();
    // 		fn();X
    // 构造函数
    // var add = new Function('num1', 'num2', 'return num1 + num2;');
    // add();

    // 区别
    // function add(num1) {
    // // body...
    // }
    // var add = function () {
    // 	// body...
    // };
    // var add = new Function('num1', 'num2', 'return num1 + num2;');
    // 预加载
    // console.log(add());
    // function add() {
    // 	return 1;
    // }
    // var num = 2;

    // function
    // var num = undefined;
    // num = 2;

    // console.log(add());
    // var add = function () {
    // 	return 1;
    // };
    // var add = undefined;

    // 选择
    // 构造函数
    // function声明
    // var赋值表达式


    // 函数定义的位置
    // 全局作用域
    // add()
    // function add() {
    // 	// body...
    // 	add()
    // }
    // add()

    // function subtract(argument) {
    // 	add()
    // }

    // 函数作用域
    // fn()X
    // function add() {
    // 	fn();
    // 	function fn() {
    // 		fn()
    // 		function fn3(argument) {
    // 			fn()
    // 		}
    // 		// body...
    // 	}
    // 	function fn2() {
    // 		fn();
    // 		// body...
    // 	}
    // }
    // fn()X

    // if/for
    // if (true) {
    // 	function add(argument) {
    // 		// body...
    // 	}
    // } else {
    // 	function subtract(argument) {
    // 		// body...
    // 	}
    // }

    // 	if (true) {
    // 		var add = function (argument) {
    // 			// body...
    // 		}
    // 	} else {
    // 		var subtract = function (argument) {
    // 			// body...
    // 		}
    // 	}
    // 	add = undefined;
    // 	subtract = undefined;
    // add = function (argument) {
    // 	// body...
    // }
    // 对象
    var person = {
        name: 'xm',
        setSex: function(sex) {
            this.sex = sex;
        }
    };
    person.setName = function(name) {
        this.name = name;
    }
    person.setSex();
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>函数的调用</title>
</head>
<body>
<script>
	// add(1, 2)
	// 普通函数
	// 命名函数
	// function add() {
	// 	// body...
	// }
	// add();

	// 匿名函数
	// var add = function () {
	// 	// body...
	// };
	// add();

	// function () {
	// 	// body...
	// };
	// add();
	// function () {
	// 	console.log(1);
	// }
	// var add = function () {
	// 	console.log(1);
	// }();

	// @function () {
	// 	console.log(1);
	// }();

	// (function () {
	// 	console.log(1);
	// })();

	// (function () {
	// 	console.log(1);
	// }());

	// !+-~function () {
	// 	console.log(1);
	// }();
 //    	console.log(function () {
	// 	return 1;
	// }());

	// 递归调用
	// 5! = 5 * 4 * 3 * 2 * 1 = 120
	// 4! = 4 * 3 * 2 * 1 = 24
	// 5! = 5 * 4! = 120

	// 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));

	// 方法的调用
	// var operation = {
	// 	add: function (num1, num2) {
	// 		return num1 + num2;
	// 	},
	// 	subtract: function (num1, num2) {
	// 		return num1 - num2;
	// 	}
	// };
	// operation.add(1, 1);

	// document.onclick = function () {
	// 	console.log('你点击了文档！');
	// };
	// document.onclick();

	// 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));
	
	// 链式调用
	// $('p').html('段落').css('background-color', 'red')....;
	// var n = $('p');
	// n.html()
	// n.css()
	// var operation = {
	// 	add: function (num1, num2) {
	// 		console.log(num1 + num2);
	// 		return this;
	// 	},
	// 	subtract: function (num1, num2) {
	// 		console.log(num1 - num2);
	// 		return this;
	// 	},
	// 	'@': function () {
	// 		console.log('@');
	// 	},
	// 	key: function () {
	// 		// body...
	// 	}
	// };
	// operation.add(1, 2).subtract(2, 1);


	// 构造函数的调用
	// function add() {
	// 	// body...
	// }

	// function Person() {
	// 	// body...
	// }

	// var num = add()
	// var obj = new Person()
	// Person()

	// Object()
	// new Object()
	// Array()
	// new Array()



	// 间接调用
	// function add() {
	// 	// body...
	// }
	// add();
	// add.call
	// add.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));

	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));
	typeof instanceof [] instanceof Array
	'number' 'string' 'object' [] array {} object

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>函数的参数</title>
</head>
<body>
<script>
// 类型
// function add(num1, num2) {
// 	return num1 + num2;
// }
// add(1, 2);
// 形参 = 实参
// num1 = 1;
// num2 = 2;

// var person = {};
// function setPerson(obj) {
// 	obj.name = 'xm';
// }
// setPerson(person);

// obj = person;


// 参数个数
// function add(num1, num2) {
// 	return num1 + num2;
// }
// 1.实参 == 形参
// add(1, 2);

// 2.实参 < 形参
// add(1)
// num1 = 1;
// num2 = undefined
// 可选参数

// function pow(base, power) {
// 	return Math.pow(base, power);
// }
// console.log(pow(3, 2));
// console.log(pow(2, 2));

// function pow(base, power) {
// 	// if (!power) power = 2;
// 	power = power || 2;
// 	return Math.pow(base, power);
// }
// console.log(pow(3));
// console.log(pow(3, 3));
// $('p')
// $('p', document)
// $('p', document.getElementById('box'))

// 实参 > 形参
// function add(num1, num2) {
// 	return num1 + num2;
// }
// add(1, 2);
// add(1, 2, 3);
// add(1, 2, 3, 4);
// add(1, 2, 3, 4, 5);

// function add() {
// 	if (arguments.length == 0) return;
// 	var sum = 0;
// 	for (var i = 0; i < arguments.length; i++) {
// 		sum += arguments[i];
// 	}
// 	return sum;
// }
// console.log(add());
// console.log(add(1, 2, 3, 4, 5));



// arguments
// 类数组
// add(1, 2, 3, 4, 5);
// arguments
// [1, 2, 3, 4, 5]
// arguments.push();

// {
// 	'0': 1,
// 	'1': 2,
// 	'2': 3,
// 	length: 3
// }
// function fn(name) {
// 	console.log(name);
// }
// fn('xm');

// function fn(name) {
// 	arguments[0] = '';
// 	console.log(name);
// }
// fn('xm');

// function fn() {
// 	console.log(arguments);
// 	function fn2() {
// 		console.log(arguments);
// 	}
// 	fn2(2);
// }
// fn(1);


// arguments.callee
// function add(num1, num2) {
// 	alert(arguments.callee);
// 	return num1 + num2;
// }
// add();

// function factorial(num) {
// 	if (num <= 1) return 1;
// 	return num * factorial(num - 1);
// }
// console.log(factorial(5));
// console.log(factorial(4));


// function jiecheng(num) {
// 	if (num <= 1) return 1;
// 	return num * arguments.callee(num - 1);
// }
// console.log(jiecheng(5));
// console.log(jiecheng(4));

// "use strict";
// var num = 1;
// num = 1;
// var jicheng = function fn(num) {
// 	if (num <= 1) return 1;
// 	return num * fn(num - 1);
// };
// console.log(jicheng(5));
// console.log(jicheng(4));

// function add(num1, num2) {
// 	if (arguments.length != add.length) throw new Error('请传入' + add.length + '个参数！');
// 	return num1 + num2;
// }
// console.log(add(1, 1));
// console.log(add(1));
// console.log(add(1, 2, 3));



// 什么做参数
// 什么都不有
// function fn() {
// 	// body...
// }
// function fn() {
// 	var num = 1;
// 	function fn2() {
// 		console.log(num);
// 	}
// }

// 数字
// function add(num1, num2) {
// 	return num1 + num2;
// }
// add(1, 1);

// 字符串
// $('p')

// 布尔值
// true/false
// function fn(bool) {
// 	if (bool) {
// 		// ...
// 	} else {
// 		// ...
// 	}
// }

// undefined
// 	function add(num1, num2) {
// 		return num1 + num2;
// 	}
// 	add(1, undefined);

// 	function pow(power, base) {
// 		power = power || 2;
// 		return Math.pow(base, power);
// 	}
// 	console.log(undefined, 3);

// null
// 	add(1, null);

// 数组
// $.each([1, 2, 3], function (index, item) {
// 	console.log(index);
// 	console.log(item);
// });
// for (var i = 0; i < [1, 2, 3].length; i++) {
// 	console.log(index);
// 	console.log(item);
// }

// 对象
// $.each({name: 'xm', sex: 'male'}, function (index, item) {
// 	console.log(index);
// 	console.log(item);
// });

// function setPerson(name, sex) {
// 	var person = {};
// 	person.name = name;
// 	person.sex = sex;
// }
// setPerson('xm', 'male');

// function setPerson(name, sex, age, tel, addr) {
// 	var person = {};
// 	person.name = name;
// 	person.sex = sex;
// 	person.age = age;
// 	person.tel = tel;
// 	person.addr = addr;
// }
// setPerson('xm', 'male', 18, '182..', '中国China');

// function setPerson(obj) {
// 	var person = {};
// 	person.name = obj.name || 'xh';
// 	person.sex = obj.sex || 'male';
// 	person.age = obj.age || '18';
// 	person.tel = obj.tel || '110';
// 	person.addr = obj.addr || 'China';
// }
// setPerson({
// 	name: 'xm',
// 	age: '18',
// 	addr: 'China',
// 	sex: 'male'
// });

// 函数
$.each({name: 'xm', sex: 'male'}, function (index, item) {
	console.log(index);
	console.log(item);
});

setTimeout(function () {
	// body...
}, 1000)






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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>函数的返回值</title>
</head>
<body>
<script>
	// return
	// 	结束
	// 	将值返回

	// return、continue、break
	// return
	// continue
	// for (var i = 0; i < 10; i++) {
	// 	if (i == 4) continue;
	// 	console.log(i);
	// }
	// break
	// for (var i = 0; i < 10; i++) {
	// 	if (i == 4) break;
	// 	console.log(i);
	// }
	// console.log('我出来啦！');

	// 什么做返回值
	// 什么都没有
	// function fn() {
	// 	return;
	// }
	// function fn2() {
		
	// }
	// console.log(fn());
	// console.log(fn2());

	// if (arguments.length == 0) return;

	// undefined
	// function fn() {
	// 	return undefined;
	// }

	// 数字
	// function add(argument) {
	// 	return 1;
	// }

	// 字符串
	// return '1';
	// alert('1,2,3');
	// alert([1, 2, 3]);
	// alert([1, 2, 3].toString());

	// 布尔值
	// return true/false;
	// // 表单验证
	// if (用户名不存在) {
	// 	return true; // 验证通过
	// } else {
	// 	return false;
	// }

	// null
	// return null

	// 数组
	// function add(num1, num2) {
	// 	return num1 + num2;
	// }
	// function add(num1, num2) {
	// 	return [num1 + num2, num1, num2];
	// }

	// 对象
	// function getPerson() {
	// 	// var person = {};
	// 	// person.name = 'xm';

	// 	return {
	// 		name: 'xm',
	// 		age: 18
	// 	};
	// }

	// function getPerson() {
	// 	return {
	// 		name: 'xm',
	// 		age: 18
	// 	};
	// }
	// console.log(getPerson());

	// 函数
	function fn() {
		return function (argument) {
			console.log(1);
		}
	}
	fn()();
	var newFn = fn();
	newFn();
</script>
</body>
</html>