js高級函數

1.判斷數據類型時,我們最經常用typeof判斷某一數據類型,缺點不能很好判斷null,數組,正則,函數,因為這幾個都是返回object,而Object.prototype.toString().call(value)很好解決了這個問題

　　

var array = [1,2,3],
    nullobj = null,
    fn = function () {alert(1)},
    reg = /^[1-4]$/;
console.log(Object.prototype.toString.call(array)) // '[object Array]'
console.log(Object.prototype.toString.call(nullobj)) // '[object Null]'
console.log(Object.prototype.toString.call(fn)) // '[object Function]'
console.log(Object.prototype.toString.call(reg)) // '[object RegExp]'

　　

2.函數綁定

例子2.1:

var btn = document.getElementById('btn')
var handler = {
    color:'red',
    handleclick: function () {
     	console.log(this.color)
   }
}
btn.onclick = handler.handleclick // undefined,執行時this指的是DOM按鈕

上面例子2.1中,this指向DOM按鈕,要想this指向handler,可用閉包解決,如下例子2.2:

例子2.2:

var btn = document.getElementById('btn')
var handler = {
    color:'red',
    handleclick: function () {
     	console.log(this.color)
   }
}
btn.onclick = function () {
     handler.handleclick() // red,執行時this指的是handler
}

 

此外,還可以寫一個bind函數,可以將函數綁定到某個環境中,如下例子2.3

例子2.3:

var btn = document.getElementById('btn')
var handler = {
     color:'red',
     handleclick: function (ev) {
     	console.log(ev.type)
     	console.log(this.color)
     }
}
     		
function bind(fn, context) {
     return function() {
     	return fn.apply(context,arguments) // 注意這里的arguments指的是內部函數的arguments,不是bind的
    }
}

btn.onclick = bind(handler.handleclick,handler) // 輸出click和red    

原生的bind與上面方法類似,都需要傳入作為this的對象　

3.函數柯里化

　　函數柯里化指的是將能夠接收多個參數的函數轉化為接收單一參數的函數，並且返回接收余下參數且返回結果的新函數的技術。主要作用和特點就是參數復用、提前返回和延遲執行

　　創建函數柯里化的通用方式如下例子3.1

　　例子3.1:　　

function carry(fn) {
     // 獲取第一個參數后的所有參數
     var args = Array.prototype.slice.call(arguments,1)
     return function () {
     	// 獲取里面函數的所有參數
     	var innerargs = Array.prototype.slice.call(arguments,0)
     	// 合並參數
     	var totalargs = args.concat(innerargs)
     	return fn.apply(null,totalargs)
     }
}

例子3.2:典型應用,bind的實現

Function.prototype.bind1 = function (context) {
     var args = Array.prototype.slice.call(arguments, 1)
     var that = this
     return function () {
     	var innerargs = Array.prototype.slice.call(arguments, 0)
     	var totalargs = args.concat(innerargs)
     	that.apply(context, totalargs)
    }
}

var myobj = {
     color: 'red',
     getColor: function (msg) {
     	console.log(msg+':'+this.color)
     }
}
var btn = document.getElementById('btn')
btn.onclick = myobj.getColor.bind1(myobj,'hello')

　例子3.3:經典面試,實現add(1, 2, 3, 4)=10,add(1)(2)(3)(4)(5)=15,add(1, 2, 3, 4)(5)(6)=21

function add() {
    // args用來收集所有的參數
    var args = Array.prototype.slice.call(arguments,0)
    function inner() {
        Array.prototype.push.apply(args, arguments)
        return inner
    }
    // 利用toString隱式轉換的特性，當最后執行時隱式轉換，並計算最終的值返回
    inner.toString = function () {
        return args.reduce(function (prev, now) {
            return prev + now
        })
    }
    return inner
}