05_javascript函数

函数 function

函数也是一个对象，

函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码），
函数中可以保存一些代码在需要的时候调用

使用typeof检查一个函数对象时，会返回function。

函数的创建：

使用构造函数来创建一个函数对象

我们在实际开发中很少使用构造函数来创建一个函数对象

//创建一个函数对象
//可以将要封装的代码以字符串的形式传递给构造函数
var fun = new Function("console.log('Hello 这是我的第一个函数');");

封装到函数中的代码不会立即执行，函数中的代码会在函数调用的时候执行

调用函数语法：函数对象()
当调用函数时，函数中封装的代码会按照顺序执行

使用 函数声明 来创建一个函数：

语法：
	function 函数名([形参1,形参2...形参N]){
		语句...
	}

例子：
	function fun2(){
		console.log("这是我的第二个函数~~~");
		alert("哈哈哈哈哈");
		document.write("~~~~(>_<)~~~~");
	}
	fun2();// 函数中的代码会在函数调用的时候执行

使用函数表达式来创建一个函数

语法：
	var 函数名 = function([形参1,形参2...形参N]){
		语句....
	}

例子：
	var fun3 = function(){
		console.log("我是匿名函数中封装的代码");
	};
	fun3();

函数的参数：

/* 定义一个用来求两个数和的函数。*/
可以在函数的()中来指定一个或多个形参（形式参数），多个形参之间使用,隔开，
声明形参就相当于在函数内部声明了对应的变量，但是并不赋值。
function sum(a,b){
	console.log("a = "+a);
	console.log("b = "+b);
	console.log(a+b);
}

在调用函数时，可以在()中指定实参（实际参数），
实参将会赋值给函数中对应的形参。
sum(1,2);
sum(123,456);

调用函数时解析器不会检查实参的类型,所以要注意，是否有可能会接收到非法的参数，
如果有可能则需要对参数进行类型的检查。
// 函数的实参可以是任意的数据类型
sum(123,"hello");
sum(true , false);

调用函数时，解析器也不会检查实参的数量，多余实参不会被赋值；
如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined
sum(123,456,"hello",true,null);
sum(123);

函数的返回值：

可以使用 return 来设置函数的返回值。

语法：
	return 值

return后的值将会会作为函数的执行结果返回，可以定义一个变量，来接收该结果；

在函数中return后的语句都不会执行，
如果return语句后不跟任何值就相当于返回一个undefined；
如果函数中不写return，则也会返回undefined。

// return后可以跟任意类型的值。
function sum(a , b , c){				
	var d = a + b + c;
	return d;
}	

调用函数
变量result的值就是函数的执行结果
函数返回什么result的值就是什么
var result = sum(4,7,8);

立即执行函数：（IIFE）

函数定义完，立即被调用，这种函数叫做立即执行函数；
立即执行函数往往只会执行一次
(function(a,b){
	console.log("a = "+a);
	console.log("b = "+b);
})(123,456);

对象的方法：

函数也可以作为对象的属性，如果一个函数作为一个对象的属性保存，
那么我们称这个函数是这个对象的方法。

调用这个函数就说调用对象的方法（method），但是它只是名称上的区别没有其他的区别。

var obj2 = {
	name:"猪八戒",
	age:18,
	sayName:function(){
		console.log(obj2.name);
	}
};
obj2.sayName();

枚举对象中的属性：

使用for … in 语句

语法：
	for(var 变量 in 对象){
		...
	}

for...in语句 对象中有几个属性，循环体就会执行几次,
每次执行时，会将对象中的一个属性的名字赋值给变量。

var obj = {
	name:"孙悟空",
	age:18,
	gender:"男",
	address:"花果山"
};
for(var n in obj){
	console.log("属性名:"+n);
	console.log("属性值:"+obj[n]);
}

作用域：

作用域指一个变量的作用的范围。
在JS中一共有两种作用域：

1.全局作用域

直接编写在script标签中的JS代码，都在全局作用域；

全局作用域在页面打开时创建，在页面关闭时销毁；

在全局作用域中有一个全局对象window，
它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用。

在全局作用域中：
创建的变量都会作为window对象的属性保存；
创建的函数都会作为window对象的方法保存。
全局作用域中的变量都是全局变量，在页面的任意的部分都可以访问的到。

2.函数作用域

调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁；

每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的；

在函数作用域中可以访问到全局作用域的变量；
在全局作用域中无法访问到函数作用域的变量；

当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用；<br>
如果没有则向上一级作用域中寻找，直到找到全局作用域，<br>
如果全局作用域中依然没有找到，则会报错ReferenceError。<br>

在函数中要访问全局变量可以使用window对象。

在函数作用域也有声明提前的特性，使用var关键字声明的变量，
会在函数中所有的代码执行之前被声明。函数声明也会在函数中所有的代码执行之前执行。

在函数中，不使用var声明的变量都会成为全局变量。

定义形参就相当于在函数作用域中声明了变量。

变量的声明提前：

使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值），
但是如果声明变量时不使用var关键字，则变量不会被声明提前。

函数的声明提前：
使用函数声明形式创建的函数 function 函数名(){}，它会在所有的代码执行之前就被创建，
所以我们可以在函数声明前来调用函数。
使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用。

JavaScript预编译

JavaScript是解释型语言，编译一行，执行一行
传统的编译会经历很多步骤，分词、解析、代码生成什么的

JavaScript运行三部曲
语法分析 //引擎检查你的代码有没有什么低级的语法错误
预编译 //在内存中开辟一些空间，存放一些变量与函数
解释执行 //执行代码

JS预编译什么时候发生
	大部分会发生在函数执行前
	
JS预编译实例
举例前，先来思考一下这几个概念：
变量声明 var… //声明变量时不使用var关键字，则变量不会被声明提前
函数声明 function…
<script> 
	var a = 1;// 变量声明
	function b(y){//函数声明 
		var x = 1;
		console.log('so easy'); 
	}; 
	var c = function(){//是变量声明而不是函数声明！！  }
	b(100);
</script> 
<script> 
	var d = 0;
</script>

让我们看看引擎对这段代码做了什么吧

页面产生便创建了GO全局对象（Global Object）（也就是大家熟悉的window对象）
第一个脚本文件加载
脚本加载完毕后，分析语法是否合法
开始预编译
查找函数声明，作为GO属性，值赋予函数体
//伪代码 
GO/window = {
 //页面加载创建GO同时，创建了document、navigator、screen等等属性，此处省略
	a: undefined, 
	c: undefined， 
	b: function(y){ 
		var x = 1; 
		console.log('so easy');
	}
 }
解释执行代码（直到执行函数b）
//伪代码 
GO/window = { //变量随着执行流得到初始化 
	a: 1, 
	c: function(){ //... },
	b: function(y){ 
		var x = 1; 
		console.log('so easy'); 
	}
}
执行函数b之前，发生预编译
创建AO活动对象（Active Object）
查找形参和变量声明，将变量和形参作为AO属性名，值赋予undefined
实参值赋给形参
查找函数声明，值赋予函数体
//伪代码
AO = { //创建AO同时，创建了arguments等等属性，此处省略 
	y: 100,
	x: undefined
}
解释执行函数中代码
第一个脚本文件执行完毕，加载第二个脚本文件
第二个脚本文件加载完毕后，进行语法分析
语法分析完毕，开始预编译
重复最开始的预编译步骤……
注意：预编译阶段发生变量声明和函数声明，没有初始化行为（赋值），匿名函数不参与预编译；
只有在解释执行阶段才会进行变量初始化

总结：
预编译(函数执行前)
	1. 创建AO对象（Active Object）
	2. 查找函数形参及函数内变量声明，形参名及变量名作为AO对象的属性，值为undefined。
	3. 实参形参相统一，实参值赋给形参
	4. 查找函数声明，函数名作为AO对象的属性，值为函数引用
预编译(脚本代码块script执行前)
	1. 查找全局变量声明（包括隐式全局变量声明，省略var声明），变量名作全局对象的属性，值为undefined。
	3. 查找 值为函数引用

this:

解析器在调用函数每次都会向函数内部传递进一个隐含的参数,这个隐含的参数就是this，
this指向的是一个对象，这个对象我们称为**函数执行的上下文对象**，
根据函数的调用方式的不同，this会指向不同的对象。
	1.以函数的形式调用时，this永远都是window
	2.以方法的形式调用时，this就是调用方法的那个对象
	3.当以构造函数的形式调用时，this就是新创建的那个对象
	4.使用call和apply调用时，this是指定的那个对象

构造函数：

构造函数就是一个普通的函数，创建方式和普通函数没有区别,
不同的是构造函数习惯上首字母大写。

构造函数和普通函数的区别就是调用方式的不同，普通函数是直接调用，
而构造函数需要使用new关键字来调用。

构造函数的执行流程：
	1.立刻创建一个新的对象；
	2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象；
	3.逐行执行函数中的代码
	4.将新建的对象作为返回值返回；
	
使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。

我们将通过一个构造函数创建的对象，称为是该类的实例。

instanceof

使用instanceof可以检查一个对象是否是一个类的实例。

语法：
	对象 instanceof 构造函数

如果是，则返回true，否则返回false

所有的对象都是Object的后代，所以任何对象和Object作instanceof检查时都会返回true

console.log(per instanceof Person);

原型 prototype

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，
这个属性对应着一个对象，这个对象就是我们所谓的原型对象。

如果函数作为普通函数调用prototype没有任何作用，当函数以构造函数的形式调用时，
它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__proto__来访问该属性。

原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，
我们可以将对象中共有的内容，统一设置到原型对象中。

当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，
如果没有则会去原型对象中寻找，如果找到则直接使用。
（原型对象也是对象，所以它也有原型，当我们使用一个对象的属性或方法时，
会现在自身中寻找，自身中如果有，则直接使用，如果没有则去原型对象中寻找，
如果原型对象中有，则使用，如果没有则去原型的原型中寻找,直到找到Object对象的原型，
Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined 。）

我们创建构造函数时，可以将这些对象共有的属性和方法，
统一添加到构造函数的原型对象中**，这样不用分别为每一个对象添加，也不会影响到全局作用域，
就可以使每个对象都具有这些属性和方法了。

使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true。

可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性。
使用该方法只有当对象自身中含有属性时，才会返回true。

toString:

当我们直接在页面中打印一个对象时，
实际上是输出的对象的toString()方法的返回值，
如果我们希望在输出对象时不输出[object Object]，可以为对象添加一个toString()方法。

function Person(name , age , gender){
	this.name = name;
	this.age = age;
	this.gender = gender;
}
//修改Person原型的toString
Person.prototype.toString = function(){
	Return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";
};

垃圾回收（GC）

就像人生活的时间长了会产生垃圾一样，程序运行过程中也会产生垃圾
这些垃圾积攒过多以后，会导致程序运行的速度过慢，
所以我们需要一个垃圾回收的机制，来处理程序运行过程中产生垃圾。

当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，
此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，
导致程序运行变慢，所以这种垃圾必须进行清理。

在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，
我们不需要也不能进行垃圾回收的操作，我们需要做的只是要将不再使用的对象设置null即可。

call()和apply()

这两个方法都是函数对象的方法，需要通过函数对象来调用；

当对函数调用call()和apply()都会调用函数执行；

在调用call()和apply()可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this。
call()方法可以将实参在对象之后依次传递；
apply()方法需要将实参封装到一个数组中统一传递。

arguments

在调用函数时，浏览器每次都会传递进两个隐含的参数：
	1.函数的上下文对象 this
	2.封装实参的对象 arguments

arguments是一个类数组对象,它也可以通过索引来操作数据，也可以获取长度。

在调用函数时，我们所传递的实参都会在arguments中保存

arguments.length可以用来获取实参的长度
我们即使不定义形参，也可以通过arguments来使用实参，只不过比较麻烦
arguments[0] 表示第一个实参
arguments[1] 表示第二个实参 。。。

它里边有一个属性叫做callee，这个属性对应一个函数对象，就是当前正在指向的函数的对象

function fun(a,b){
	console.log(arguments instanceof Array);//false
	console.log(Array.isArray(arguments));//false
	console.log(arguments[1]);//true
	console.log(arguments.length);//2
	console.log(arguments.callee == fun);//true
}
fun("hello",true);

bind

bind() 函数会创建一个新函数（称为绑定函数），
新函数与被调函数（绑定函数的目标函数）具有相同的函数体（在 ECMAScript 5 规范中内置的call属性）。 

当新函数被调用时 this 值绑定到 bind() 的第一个参数，该参数不能被重写。

绑定函数被调用时，bind() 也接受预设的参数提供给原函数。

一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。
提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

this.x = 9; 
var module = {
	x: 81,
	getX: function() { return this.x; }
};
module.getX(); // 返回 81
console.log(module.getX())
var retrieveX = module.getX;
retrieveX(); // 返回 9, 在这种情况下，"this"指向全局作用域
console.log(retrieveX())

创建一个新函数，将"this"绑定到module对象
新手可能会被全局的x变量和module里的属性x所迷惑
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81 
console.log(boundGetX())

偏函数
bind()的另一个最简单的用法是使一个函数拥有预设的初始参数。
这些参数（如果有的话）作为bind()的第二个参数跟在this（或其他对象）后面，
之后它们会被插入到目标函数的参数列表的开始位置，传递给绑定函数的参数会跟在它们的后面。
function list() {
    // 将arguments（伪数组）转为数组返回
	return Array.prototype.slice.call(arguments);
} 
var list1 = list(1, 2, 3); // [1, 2, 3] 
// 创建一个函数拥有预设的初始参数
var leadingThirtysevenList = list.bind(undefined, 37); 
var list2 = leadingThirtysevenList(); // [37]
// 再传参时，所传参数会跟在预设初始参数后边
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]
//console.log(list1,list2,list3)

配合 setTimeout
在默认情况下，使用 window.setTimeout() 时，this 关键字会指向 window （或全局）对象。

当使用类的方法时，需要 this 引用类的实例，
你可能需要显式地把 this 绑定到回调函数以便继续使用实例。
function LateBloomer() {
    // 生成一个2~14之间的整数
	this.petalCount = Math.ceil(Math.random() * 12) + 1;
}
// Declare bloom after a delay of 1 second
LateBloomer.prototype.bloom = function() {
	console.log('1s后调用--')
	window.setTimeout(this.declare.bind(this), 1000);
};
LateBloomer.prototype.declare = function() {
	console.log('I am a beautiful flower with ' +
	this.petalCount + ' petals!');
};
var flower = new LateBloomer();
flower.bloom(); // 一秒钟后, 调用'declare'方法 

模拟bind实现方法：

Function.prototype.bind = function(target){
	target = target || window
	var self = this
	var args = [].slice.call(arguments,1)
	var temp = function(){}
	var F = function(){
		var _arg = [].slice.call(arguments,0)
		return self.apply(this instanceof temp
			? this
			: target,
		args.concat(_arg))
	}
	temp.prototype = this.prototype
	F.prototype = new temp()
	return F
}

区别bind()与call()和apply()?

* 都能指定函数中的this
* call()/apply()是立即调用函数
* bind()是将函数返回