js函式

阿新 • • 發佈：2020-08-18

JS函式

函式概述

函式的宣告方式

<script>
function fn(){
	
}</script>

函式的表示式：將一個匿名函式賦值給一個新的變數

<script type="text/javascript">
	var hello = function(x,y){
		return x + y;
	}
	console.log(hello);
</script>

<script type="text/javascript">
	var hello = function fn(x,y){
		return x + y;
	}
	console.log(hello);
</script>

建構函式

<script>
var fn = new Function('return 5');
console.log(fn);
var fw = new Function('x','y','return x+y')';
console.log(fw);
</script>

函式引數

<script type="text/javascript">
	function fn(a,b,c){
		console.log(a,b,c);
	}
	
</script>

函式的形參只能在函式的外部使用。

<script type="text/javascript">
	function fn(){
		try{
			....
		}catch(e){
			return e;
		}finally{
			return 0;
		}
	}
	console.log(fn);
	
</script>

如果函式呼叫在前面加上new字首，且返回值不是一個物件或者沒有返回值，則返回該對應的值

<script>
function fn(){
	this.a = 2;
	return 1;

}
var test = new fn();
console.log(test);
console.log(test.constructor);

function fn(){
	return;
}
</script>

函式呼叫

函式呼叫的四種方式

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>函式呼叫
	</title>
</head>
<body>
<script>
	//函式呼叫4中方式：函式呼叫模式，方法呼叫模式，構造呼叫模式 間接呼叫模式
	
	//函式呼叫模式
	function add(x,y){
		'use strict';//嚴格模式
		//在嚴格模式下，當前函式中的this指向undefined
		console.log(this);//window物件  在非嚴格模式
		return x + y;
	}
	var sum = add(3,4);
	console.log(sum);
</script>
</body>
</html>

注意：小心避免全域性的屬性重寫帶來的問題
方法呼叫模式
var obj = {
//這個fn稱為obj物件的方法
a = 1;
fn:function(){
console.log(this);
console.log('被呼叫了');
},
fn2:function(){
this.a = 2;
}
}
obj.fn();
obj.fn2();
console.log(obj.a);

建構函式呼叫模式
function fn(){
this.a = 1;
}
//this指向問題：當做普通函式呼叫this指向window，當做建構函式呼叫，this指向當前函式，當做物件的方法

var obj = new fn();
console.log(obj);
間接呼叫模式
function sum(x,y){
return x +y;
}
console.log(sum(1,3));// console.log(sum.call(obj,1,2)); // console.log(sum.apply(obj,1,2));

函式引數

arguments
函式不介意傳遞進來多少個引數，也不在乎傳進來的引數是什麼資料型別的。甚至可以不傳參。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
<script type="text/javascript">
	//arguments
	function add(x){
		return x + 1;
</script>	
</body>
</html>

在非嚴格模式下，函式中可以出現同名的形參。
實參比形參的個數少，剩下的形參都將設定為undefined。
aeguments不是真正的陣列，它是類素組，它是通過[]來訪問它的每一個元素

函式過載

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<script type="text/javascript">
		//定義相同的函式名，傳入不同引數。
		function add(a){
			return a + 100;
		}
		function add(a,b){
			return a + b + 100;
		}
		alert(add(10));
	</script>
</body>
</html>

在js中函式不存在過載現象。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<script type="text/javascript">
		//定義相同的函式名，傳入不同引數。
		function add(a){
			if(arguments.length == 0){
				return 100;
			}else if(arguments.length == 1){
				return arguments[0] +100;
			}else if(arguments.length == 2){
				return arguments[0] + arguments[1]+ 100;
			}
	</script>
</body>
</html>

引數傳遞

基本資料型別

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<script type="text/javascript">
		function add(num){
			num = num +100;
			return num;
		}
		var count = 20;
		var result = add(count);
		console.log(result);
	</script>
</body>
</html>

函式屬性

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
<script type="text/javascript">
	function add(x,y){
		console.log(arguments.length);實參屬性   4個屬性
   		console.log(add.length);形參屬性         2的屬性
		
	}
	add(2,3,4,5)
</script>	
</body>
</html>

name指的是當前函式的名字

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
<script type="text/javascript">
	function fn(){
		
	};
	console.dir(fn.name);//fn
	var fn2 = function(){};
	console.log(fn2.name);//fn2
	var fn3 = function abc(){};
	console.log(fn3.name);//abc
</script>	
</body>
</html>

prototype 屬性
每個函式都有一個prototype屬性

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
<script type="text/javascript">
	function fn(){
		
	};
	console.log(fn.prototype);
	fn.prototype.a = 1;
	console.log(fn.prototype);
</script>	
</body>
</html>

函式的方法

call和apply

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
<script type="text/javascript">
	function fn(){
		
	};
	var obj = new fn();
	fn.prototype.a = 1;
	console.log(obj)
	//apply()  call()
	//每個函式都博涵兩個非繼承而來的方法
	window.color = 'red';
	console.log(window);
	function sayColor(){
		console.log(this.color);
	}
	sayColor();
	sayColor.call(this);
	sayColor.call(window);
	sayColor.call(obj);
</script>	
</body>
</html>

call和apply方法的應用
找出陣列的最大元素

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
<script type="text/javascript">
	//找出陣列中最大元素
	var mx = Math.max(2,3,4,5,6);
	var arr = [2,1,10,30,39];
	var arrMax = Math.max.apply(null,arr);
	console.log(arrMax);
	
</script>	
</body>
</html>

將類陣列轉換成真正的陣列

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
<script type="text/javascript">
	//將類陣列轉換成真正的陣列
	function add(){
		var arr = Array.prototype.slice.apply(arguments);
		console.log(arr);
	}

	add(1,2,3);
	//陣列追加
	var arr = [];
	Array.prototype.push.apply(arr,[1,2,3,4]);
	console.log(arr);
	Array.prototype.push.apply(arr,[8,9,0]);
	console.log(arr);
	//利用call和apply做繼承
	function Animal(name,age){
		this.name = name;
		this.age = age;
		this.sayAge = function(){
			console.log(age);
		}
	}
	function Cat(){
		//繼承Aimal
		Animal.call(this);//把this指向了c例項物件
	}
	var c = new Cat('xxx',20);
	c.sayAge();
	console.log(c.name);
</script>	
</body>
</html>

bind方法

es5新增的方法，主要作用：將函式繫結到某個物件中，並有返回值（一個函式）

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
<script>
function fn(y){
	return this.x + y;
}
var obj = {
	x:1
}
var gn = fn.bind(obj);
console.log(gn(3));
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
<script>
function getConfig(colors,size,otherOptions){
	console.log(colors,size,otherOptions);
}
var defaultConfig = getConfig.bind(null,'#ff6700',1024*768);
defaultConfig('123');
</script>
</body>
</html>