javascript函数入门 javascript中的函数

JavaScript学习—— 七、函数

• 1.种类
• 2.概念
• 3.函数的功能、好处
• 4.使用

• 4.1函数的声明

• （1）普通函数声明
• （2）匿名函数声明
• （3）构造函数声明
• （4）递归函数声明
• （5）闭包函数
• （4）内置函数

• 5.函数属性

• 5.1.length
• 5.2.prototype

• 6函数方法

• 6.1. apply()、call()
• 6.2. bind()

1.种类

JavaScript函数主要有普通函数、匿名函数、闭包函数、内置函数等。

2.概念

函数指能够实现特定功能的代码块，其可以配事件处理或被调用，使用函数可以提高代码的可重用性，给程序员共享代码带来了很大方便，函数包含：函数名、若干参数和返回值。在JavaScript中，除了提供丰富的内置函数外，还允许用户创建和使用自定义函数。
函数，是一种封装。就是将一些语句，封装到函数里面。通过调用的形式，执行这些语句。

3.函数的功能、好处

1） 将会被大量重复使用的语句写在函数里面，这样以后需要这些语句的时候，直接调用函数，不用重写那些语句。
2） 简化编程，让编程变的模块化。

4.使用

函数的使用，是两个步骤，

• 第一步，函数的定义
• 第二步，函数的调用。
  函数如果不调用，等于白写。

4.1函数的声明

函数的声明分为：普通函数声明、匿名函数声明、构造函数声明。

（1）普通函数声明

函数的声明由function、函数名、参数、函数体组成，其语法格式如下：

1. function 函数名([参数 1, 参数 2,……]){
   语句
   [return 表达式]
   }

var num = 10;
    function fun(){
        alert("我是普通函数");
        alert(num);
    }
   fun();  //函数不调用，自己不执行

2.JavaScript同名函数的覆盖

在JavaScript中函数没有重载，定义相同函数名、不同参数签名的函数，后面的函数会覆盖前面的函数。调用时只会调用后面的函数

var n=0
	function add(value1){
		return n+1;
	}
	alert(add(n))
	function add(value1,value2){
		return n+3;
	}
	alert(add(n))//两次输出都是3

（2）匿名函数声明

1.变量匿名函数

var anonymous=function(n1,n2){
		alert(n1+n2)
	}
	anonymous(3,6)

2.无名称匿名函数

(function(n){
		alert(n)
	})(1)

（3）构造函数声明

利用Function关键字可以创建构造函数，其语法格式如下：
var 变量名 = new Function(“参数1”,“参数2”,……“函数体”);

var fun2 = new Function("var a = 10; var b = 20; alert(a+b)");
fun2();

• 构造函数和普通函数的区别：
  1、构造函数也是一个普通函数，创建方式和普通函数一样，但构造函数习惯上首字母大写
  2、构造函数和普通函数的区别在于：调用方式不一样。作用也不一样（构造函数用来新建实例对象）
  3、调用方式不一样。
  a. 普通函数的调用方式：直接调用 person();
  b.构造函数的调用方式：需要使用new关键字来调用 new Person();
  4、构造函数的函数名与类名相同：Person( ) 这个构造函数，Person 既是函数名，也是这个对象的类名。
  5、有了构造函数会马上创建一个新对象，并将该新对象作为返回值返回

（4）递归函数声明

递归函数指函数在自身的函数体内调用自身。其语法格式如下：
function 函数名(参数1){
函数名(参数2);
}

//用递归求n的阶乘。
	function f1(n){
		if(n==1||n==0){
			return 1;
		}else{
			return n*f1(n-1);
		}
	}
	console.log(f1(3));

（5）闭包函数

假设，函数A内部声明了个函数B，函数B引用了函数B之外的变量，并且函数A的返回值为函数B的引用。那么函数B就是闭包函数。
（1）全局引用和局部引用：
全局引用，用闭包实现计数器，具有增1功能；

function funA(){
	var i=0;
	funB=function(){
	i++;
	console.log("i="+i);
	// alert(i);
	}
	return funB();
}
			
var allShowA=funA();
funB();
funB();
funB();

局部引用如下：（就不会增1了）

function partShowA(){
var showa=funA();
}
partShowA();
partShowA();
partShowA();

（2）有参闭包函数

写法一：

function funA(){
			var i=0;
			funB=function(){
				i++
				console.log("i="+i);
			}
		}
		var plus=funA();
		funB()
		funB()
		funB()

写法二：

function funA(){
			var i=0;
			return function(){
				i++
				console.log("i="+i);
			}
		}
		var plus=funA();
		plus()
		plus()
		plus()

写法三：

var plus=(function(){
			var i=0;
			return function(){
				i++
				console.log("i="+i);
			}
		})()
		plus()
		plus()
		plus()

（4）内置函数

函数	说明
isFinite()	判断数值是否为无穷大
inNaN()	判断数值是否为NaN
parseInt()	将字符型转为整型
parseFloat()	将字符型转为浮点型
eval（)	计算字符串表达式中的值
encodeURI()	将字符串转为有效的URI
decodeURI()	对encodeURI()编码的文本进行解码

5.函数属性

每个函数都包含两个属性：length 和 prototype。

5.1.length

每个函数都有一个 length属性 （函数名.length）， 表示期望接收的函数的个数（而不是实际接收的参数个数），它与arguments不同。 arguments.length 是表示函数实际接收的参数个数。

function test(a,b,c){}
	document.write(test.length) ;
	//3

5.2.prototype

每一个函数都有一个prototype属性，这个属性指向一个对象的引用，这个对象称做原型对象。每一个函数都包含不同的原型对象，将函数用做构造函数时，新创建的对象会从原型对象上继承属性。

function fn(x,y){
				return console.log(x+y)//1
		}
		var f1=new fn(1,2)
		fn.prototype.a=5//原型对象
		console.log(f1.a)//5

6函数方法

函数是JavaScript中特殊的对象，拥有自己的方法。

6.1. apply()、call()

call()方法与apply()方法的作用相同，它们的区别仅仅在于接收参数的方式不同。至于是使用apply()还是call()，完全取决于采取哪种函数传递参数的方式最方便。

6.2. bind()

这个方法的主要作用就是将函数绑定到某个对象。

call apply bind区别:

javaScript权威指南上的解释是：

• call() 、apply()可以看作是某个对象的方法，通过调用方法的形式来间接调用函数。bind() 就是将某个函数绑定到某个对象上。
• call() apply() bind()相同点：都可以改变this的指向。
• call() 和apply()的第一个参数相同，就是指定的对象。这个对象就是该函数的执行上下文。
  call()和apply()的区别就在于，两者之间的参数。
  call()在第一个参数之后的 后续所有参数就是传入该函数的值。
  apply() 只有两个参数，第一个是对象，第二个是数组，这个数组就是该函数的参数。
• bind() 方法和前两者不同在于： bind() 方法会返回执行上下文被改变的函数而不会立即执行，而前两者是直接执行该函数。它的参数和call()相同。

function fn(x,y){
				return console.log(x+y)
			}
			fn(1,5)
			// call方法
			fn.call(window,1,3)
			// apply方法
			fn.apply(window,[1,9])
			// bind方法
			var s=fn.bind(window,1,6)
			s()
			
			window.color="blue"
			var o={color:"yellow"}
			function sayColor(){
				console.log(this.color)
			}
			// call方法
			sayColor.call(window)
			sayColor.call(o)
			// apply方法
			sayColor.apply(window)
			sayColor.apply(o)
			// bind方法
			var a=sayColor.bind(window)
			a()
			var a=sayColor.bind(o)
			a()