Function 類型

函數(shù)即對(duì)象，函數(shù)名即指針。每個(gè)函數(shù)都是Function類型的實(shí)例。函數(shù)名就是一個(gè)指向函數(shù)的指針。

創(chuàng)建函數(shù)

創(chuàng)建函數(shù)有三種方式方式。函數(shù)聲明，函數(shù)表達(dá)式和通過(guò)構(gòu)造函數(shù)創(chuàng)建。

/**
 * 三種創(chuàng)建函數(shù)的方式
 * */
// 函數(shù)聲明
function test1(x, y) {
  return x + y
}

// 函數(shù)表達(dá)式
var test2 = function (x, y) {
  return x + y
}

// 構(gòu)造函數(shù)
var test3 = new Function("x", "y", "return x + y")
console.log(test1(10, 20))  // 30
console.log(test2(10, 20))  // 30
console.log(test3(10, 20))  // 30

函數(shù)名即指針

/**
 * 函數(shù)即對(duì)象，函數(shù)名即指針
 */
function add(x, y) {
  console.log(x + y)
}
var calc = add
calc(1 , 2) // 3
calc = null   // 與函數(shù)斷絕連接
console.log(add(1, 2))  // 3

函數(shù)聲明和函數(shù)表達(dá)式

函數(shù)聲明會(huì)提前，可以在函數(shù)聲明就調(diào)用。函數(shù)表達(dá)式不會(huì)提前。必須在函數(shù)表達(dá)式聲明之后才可以調(diào)用。工作中一般都是先聲明，后調(diào)用。

/**
 * 函數(shù)聲明會(huì)提前，而函數(shù)表達(dá)式不會(huì)
 */
getName('李淳罡')  // 在函數(shù)聲明之前調(diào)用，可以執(zhí)行。結(jié)果為 天不生我李淳罡 劍道萬(wàn)古長(zhǎng)如夜
function getName(name) {
  console.log('天不生我' + name, '劍道萬(wàn)古長(zhǎng)如夜')
}

//  getSay('來(lái)，給少爺上酒') // 函數(shù)表達(dá)式不會(huì)提前。結(jié)果為  Uncaught TypeError: getSay is not a function
var getSay = function (say) {
  console.log(say)
}
getSay('來(lái)，給少爺上酒') // 來(lái)，給少爺上酒

作為值的函數(shù)

函數(shù)名本身就是一個(gè)變量，所以也可以作為值來(lái)使用。

/**
 * 作為值的函數(shù)
 */
function rank(key) {
  return function (pre, next) {
    var preValue = pre[key]
    var nextValue = next[key]
    return preValue - nextValue
  }
}

var data = [
  {name: '王仙芝',comment: '以力證道',id: 2},
  {name: '洪洗象',comment: '半入云間',id: 1},
  {name: ' 鄧太阿',comment: '桃花劍神 ',id: 4},
  {name: '李淳罡',comment: '劍開天門',id: 3}
]

data.sort(rank('id'))
console.log(JSON.stringify(data)) // [{"name":"洪洗象","comment":"半入云間","id":1},{"name":"王仙芝","comment":"以力證道","id":2},{"name":"李淳罡","comment":"劍開天門","id":3},{"name":" 鄧太阿","comment":"桃花劍神 ","id":4}]

this

this引用的是執(zhí)行環(huán)境的對(duì)象。誰(shuí)調(diào)用它，它就指向誰(shuí)。函數(shù)的調(diào)用方式有以下幾種。

// 普通函數(shù)
var source = 'window'
function getSource() {
  console.log(this.source)
}
getSource() // window (在全局環(huán)境中調(diào)用，所以this指向window)

// 方法
var userName = '軒轅大磬'
var person = {
  userName: '軒轅敬城',
  say: function () {
    console.log(this.userName + '請(qǐng)老祖宗赴死')
  }
}
person.say()  // 軒轅敬城請(qǐng)老祖宗赴死 (this指向person)
var say = person.say  
console.log(say()) // 軒轅大磬請(qǐng)老祖宗赴死 (this指向window)

//構(gòu)造函數(shù)
function Biography(name) {
  this.name = name
}
let bg = new Biography('溫不勝')
console.log(bg.name)  // 溫不勝

call()和apply()

這兩個(gè)方法可以改變this的指向?qū)ο蟆?/p>

/**
 * call（） apply()
 * 可以改變this的指向。
 * call的第一個(gè)參數(shù)是運(yùn)行函數(shù)的作用域，后面的參數(shù)是要傳遞的參數(shù)
 * apply的第一個(gè)參數(shù)是運(yùn)行函數(shù)的作用域，第二個(gè)參數(shù)是一個(gè)數(shù)組。（數(shù)組參數(shù)）
 */

var name = 'window'
var obj1 = {
  name: 'obj1'
}

var obj2 = {
  name: 'obj2'
}

function fun(msg) {
  console.log(this.name, ' ', msg)
}

fun('hello')  // window   hello
fun.call(obj1, 'hello') // obj1   hello
fun.apply(obj2, ['hello'])  // obj1   hello

bind

bind方法可以綁定函數(shù)的作用域

/**
 * bind 可以綁定this的指向
 */
color = 'red'
var obj3 = {
  color: 'yellow'
}

function getColor() {
  console.log(this.color)
}

var getC = getColor.bind(obj3)
getC()  // yellow

引用

javascript高級(jí)程序設(shè)計(jì)