js函数
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>
