ES6中的函數進階學習

1、函數定義方式

//1.自定義函數（命名函數）
function fn(){

}
//2.函數錶達式（匿名函數）
var fun = function(){
	console.log("fun");
}
fun();
//3.利用new Function('參數1','參數2','函數體')
var f = new Function('a','b','console.log(a+b)');
f(1,2);

函數也屬於對象。

2、函數的調用

//1.普通函數
function fn(){
	console.log("this is a fun");
}
fn();//或采用fn.call();
//2.對象的方法
var o ={
	sayHi :function(){
		console.log("this is a object fun");
	}
}
o.sayHi();
//3.構造函數
function Star(){
	console.log('constructor fun');
}
let ldh = new Star();
//4.綁定事件函數
btn.onclick = function(){
	console.log('btn click fun')
};//點擊了按鈕就可以調用這個函數
//5.定時器函數
setInterval(function(){console.log('setInterval fun')},1000);
//6.立即執行函數
(function(){
	console.log('lijizhixing ');
})()

3、this的指向問題

//1.普通函數-this指向window
function fn(){
	console.log('1fn:'+this);
}
window.fn();
//2.對象的方法-this指向o這個對象
var o ={
	sayHi :function(){
		console.log(this);
	}
}
o.sayHi();
//3.構造函數-this指向ldh這個實例對象
function Star(){
	console.log(this);
}
let ldh = new Star();
//4.綁定事件函數-this指向btn這個按鈕
btn.onclick = function(){
	console.log(this);
};
//5.定時器函數-this指向window
window.setTimeout(function(){console.log(this);},1000);
//6.立即執行函數-this指向window
(function(){
	console.log(this);
})()

總結：

調用方式	this指向
普通函數	window
構造函數	實例對象（原型對象中的方法也指向實例對象）
對象方法	該方法所屬對象
事件綁定	綁定事件對象
定時器	window
立即執行函數	window

4、改變函數內部this指向

常用的有call()、apply()、bind()三種方法

1、call方法

var o ={
	name:'liming',
	fun:function(){console.log('object');}
}
function fn(a,b)
{
	console.log(this);
	console.log(a+b);
}
fn.call(o,1,2);//call的使用方法
//主要應用-繼承
function Father(uname,age)
{
    this.uname = uname;
    this.age = age;
}

function Son(uname,age)
{
    Father.call(this,uname,age);
    console.log('this name:'+this.uname);
}
let son1 = new Son('liming',18);

2、apply方法

var o ={
	name:'liming',
	fun:function(){console.log('object');}
}
function fn(a,b)
{
	console.log(this);
	console.log(a+b);
}
fn.apply(o,[2,3]);//apply的用法，後面參數必須為數組
//主要應用案例-利用Math求最大值
var arr =[1,3,5,66,23,123];
let maxNum = Math.max.apply(Math,arr);
let minNum = Math.min.apply(Math,arr);
console.log("maxNum:"+maxNum+',minNum:'+minNum);

3、bind方法（使用最多）

var o ={
	name:'liming',
	fun:function(){console.log('object');}
}
function fn(a,b)
{
	console.log(this);
	console.log(a+b);
}
//使用方法一
let newFn = fn.bind(o);//bind的用法，他不調用函數，返回由指定this的原函數的拷貝
newFn(2,3);
//使用方法二
let newFn2 = fn.bind(o,2,3);//bind的用法，他不調用函數，返回由指定this的原函數的拷貝
newFn2();

主要應用案例一

var o ={
    name:'liming',
    fun:function(){console.log('object');}
}
function fn(a,b)
{
    console.log(this);
    console.log(a+b);
}
//使用
let newFn = fn.bind(o);//bind的用法，他不調用函數，返回由指定this的原函數的拷貝
newFn(2,3);
//主要應用
btn.onclick = function(){
    this.disabled = true;//這裏的this指向按鈕
    setTimeout(function(){
        this.disabled = false;//這裏的this指向window
    }.bind(this),3000);//bind綁定後，上面的this改為了按鈕
    //等價於
    // let fun =function(){
    //     this.disabled = false;//這裏的this指向window
    // }.bind(this);
    // setTimeout(fun,3000);//bind綁定後，上面的this改為了按鈕
}

區別點：

• call和apply會調用函數，並且改變函數內部this指向。
• call和apply傳遞的參數不一樣，call傳遞參數arg1,arg2...，apply必須是數組形式[arg1,arg2...]
• bind不會調用函數，可以改變函數內部的this指向

主要應用場景：

• call經常做繼承
• apply經常和數組有關系。例如借助數學對象實現數組最大值最小值
• bind不調用函數，但是還想改變this指向。例如改變定時器內部的this指向。