JavaScript中的函数

一、函数的简介

函数 function
        函数也是一个对象
        函数中可以封装一些代码 在需要时可以执行这些代码
        使用typeof检查一个
        函数对象时 会返回function	

函数的创建:

使用函数声明来创建一个函数
    function 函数名([形参1,形参2....形参N]){
        语句...
    }

使用函数表达式来创建函数
    var 函数名 = function([形参1,形参2...]){
        语句...
    }
    封装在函数中的代码不会立即执行
函数中的代码会在函数调用的时候执行
当调用函数是,函数中封装的代码会按顺序执行

解析器不会解析实参的类型 也不会检查数量
    如果实参数量少于形参数量 则没有对应实参的形参将会是undefined
    函数的实参可以是任意的数据类型
	
	实参也可以是一个对象
        可以将参数封装到一个对象中,然后通过对象传递
        
    返回值可以是任意的数据类型 也可以是对象 也可以是函数
    如果result后不跟任何值就相当于返回一个undefined
    如果函数中不写return 则也会返回undefined

fun为函数对象 相当于直接使用函数对象
fun()为调用函数 相当于使用函数返回值


在调用函数时,浏览器每次都会传递进两个隐含的参数
1.函数的上下文对象this
2.封装实参的对象arguments
arguments是一个类数组对象 它也可以通过索引来操作数据 也可以获取长度
在调用函数时 我们所传递的实参都会在arguments中保存
arguments.length可以用来获取实参的长度
我们即使不定义形参,也可以通过arguments来使用实参
只不过比较麻烦
arguments[0] 表示第一个实参
arguments[1] 表示第二个实参
它里边有个属性叫做callee
这个属性对应一个函数对象,就是当前正在指向的函数对象

二、函数的方法(apply()和call())

call()和apply() 都是函数对象的方法 需要通过函数对象来调用
    fun.call(); fun.apply();
    调用call()和apply()都会调用函数执行
    在调用call()和apply()可以将一个对象指定为一个参数
        此时这个对象将会成为函数执行时的this
    call()方法可以将在实参在对象之后依次传递
    fun.call(obj,2,3);
    apply()方法需要将实参封装到一个数组中统一传递
    fun.apply(obj,[2,3]);

用法:

	1."劫持"别人的方法(个人感觉也是继承)
	//此时foo中的logName方法将被bar引用 ,this指向了bar
	var foo = {
	  name:"mingming",
	  logName:function(){
	    console.log(this.name);
	  }
	}
	var bar={
	  name:"xiaowang"
	};
	foo.logName.call(bar);//xiaowang
	2.实现继承
	
	function Animal(name){   
	  this.name = name;   
	  this.showName = function(){   
	    console.log(this.name);   
	  }   
	}   
	 
	function Cat(name){  
	  Animal.call(this, name);  
	}   
	 
	var cat = new Cat("Black Cat");   
	cat.showName(); //Black Cat

this的情况:
 1.以函数形式调用时,this永远是window
 2.以方法形式调用时,this时调用方法的对象
 3.以构造函数形式调用时,this时新创建的那个对象
 4.以call和apply调用时,this时指定的那个对象

三、匿名函数和立即执行函数

1.匿名函数:

匿名函数是没有函数名的,不能单独使用
匿名函数
	匿名函数:没有函数名的函数
	
	匿名函数不能单独定义与使用
	
	function foo() {
	  console.log('普通函数');
	}
	// 去掉函数名 foo 
	function () { // SyntaxError: Function statements require a function name
	  console.log('匿名函数');
	}
	匿名函数的应用场景
	用于函数表达式
	作为返回值
	用于定义对象方法
	作为回调函数
	用于立即执行函数
	用于DOM元素注册事件
	其他 ...

用于函数表达式

	var sum = function (num1, num2) {
	  return num1 + num2;
	};
	console.log(sum(2, 3)); 

作为返回值

	function sum(sum1, sum2) { 
	
	  return function() {
	    return sum1 + sum2;    
	  }
	
	}
	console.log(sum(2, 3));    // [Function]
	console.log(sum(2, 3)());  // 5

用于定义对象方法

	var obj = {
	  name: 'uakora',
	  age: 27,
	  foo: function() {
	    console.log(this.name + ' ' + this.age);
	  }
	};
	obj.foo(); // uakora 27 

作为回调函数

	setTimeout(function() {
	  console.log('匿名函数作为回调函数');
	}, 1000);

用于立即执行函数

	(function() {
	  console.log('立即执行函数是基于匿名函数创建的');
	}());

用于DOM元素注册事件

	<input type="button" value="Click me!" id="btn">
	<script>
	    var btn = document.querySelector("#btn");
	    //给按钮注册点击事件
	    sub.onclick = function(){
	        console.log('Click event');
	    }
	</script>

2.立即执行函数:

	立即执行函数(IIFE,Immediately-Invoked Function Expression),
是一种在定义后就会立即执行的函数,其实质是一种语法。

常用形式一:将匿名函数包裹在一个括号运算符中,后面再跟一个括号

(function () {
  console.log('立即执行函数');
})(); // !!!特别说明:若此立即执行函数后面立马又跟着一个立即执行函数,一定要在结尾加分号,否则后面的立即执行函数会报错!
// 上一个立即执行函数不加分号,下行代码将报错:TypeError: (intermediate value)(...) is not a function
(function (a, b, c) { // 形参
  console.log(a + b + c);  // 6
})(1, 2, 3); // 实参

常用形式二:匿名函数后面跟一个括号,再将整个包裹在一个括号运算符中

(function () {
  console.log('立即执行函数');
}());

(function (a, b, c) { // 形参
  console.log(a + b + c);  // 6
}(1, 2, 3)); // 实参

立即执行函数的作用:

立即执行函数最本质的作用是:创建一个独立的作用域。利用这一功能,可以

	初始化数据和页面(只执行一次)

	模块化开发中,定义私有变量,防止污染全局(独立作用域)

	解决闭包中的状态保存问题;(常见的一个函数内部返回多个函数,
		调用这些函数,打印父函数内部变量的问题)

四、回调函数

	回调函数就是传递一个参数化的函数,就是将这个函数作为一个参数传到另一个主函数里面,
当那一个主函数执行完之后,再执行传进去的作为参数的函数。走这个过程的参数化的函数 就叫做回调函数。
换个说法也就是被作为参数传递到另一个函数(主函数)的那个函数就叫做 回调函数。
回调函数应用场景多用在使用 js 写组件时和耗时操作上面,尤其是组件的事件很多都需要回调函数的支持。
 回调函数一定要以参数形式传过去吗,我不可以直接在函数a里面调用函数b吗?确实可以。
但是如果你直接在函数a里调用的话,那么这个回调函数就被限制死了。但是使用函数做参数就有下面的好处:当你a(b)的时候函数b就成了回调函数,而你还可以a(c)这个时候,函数c就成了回调函数。如果你写成了function a(){...;b();}就失去了变量的灵活性。

代码示例:

	function a(callback)
	{   
	    alert("我是parent函数a!");
	    alert("调用回调函数");
	    callback();
	}
	function b(){
	alert("我是回调函数b");
	  
	}
	function c(){
	alert("我是回调函数c");
	  
	}
	  
	function test()
	{
	    a(b);
	   a(c);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值