第五章（4）：Function

Function 类型

函数即对象，函数名即指针。每个函数都是Function类型的实例。函数名就是一个指向函数的指针。

创建函数

创建函数有三种方式方式。函数声明，函数表达式和通过构造函数创建。

/**
 * 三种创建函数的方式
 * */
// 函数声明
function test1(x, y) {
  return x + y
}

// 函数表达式
var test2 = function (x, y) {
  return x + y
}

// 构造函数
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

函数名即指针

/**
 * 函数即对象，函数名即指针
 */
function add(x, y) {
  console.log(x + y)
}
var calc = add
calc(1 , 2) // 3
calc = null   // 与函数断绝连接
console.log(add(1, 2))  // 3

函数声明和函数表达式

函数声明会提前，可以在函数声明就调用。函数表达式不会提前。必须在函数表达式声明之后才可以调用。工作中一般都是先声明，后调用。

/**
 * 函数声明会提前，而函数表达式不会
 */
getName('李淳罡')  // 在函数声明之前调用，可以执行。结果为 天不生我李淳罡 剑道万古长如夜
function getName(name) {
  console.log('天不生我' + name, '剑道万古长如夜')
}

//  getSay('来，给少爷上酒') // 函数表达式不会提前。结果为  Uncaught TypeError: getSay is not a function
var getSay = function (say) {
  console.log(say)
}
getSay('来，给少爷上酒') // 来，给少爷上酒

作为值的函数

函数名本身就是一个变量，所以也可以作为值来使用。

/**
 * 作为值的函数
 */
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引用的是执行环境的对象。谁调用它，它就指向谁。函数的调用方式有以下几种。

// 普通函数
var source = 'window'
function getSource() {
  console.log(this.source)
}
getSource() // window (在全局环境中调用，所以this指向window)

// 方法
var userName = '轩辕大磬'
var person = {
  userName: '轩辕敬城',
  say: function () {
    console.log(this.userName + '请老祖宗赴死')
  }
}
person.say()  // 轩辕敬城请老祖宗赴死 (this指向person)
var say = person.say  
console.log(say()) // 轩辕大磬请老祖宗赴死 (this指向window)

//构造函数
function Biography(name) {
  this.name = name
}
let bg = new Biography('温不胜')
console.log(bg.name)  // 温不胜

call()和apply()

这两个方法可以改变this的指向对象。

/**
 * call（） apply()
 * 可以改变this的指向。
 * call的第一个参数是运行函数的作用域，后面的参数是要传递的参数
 * apply的第一个参数是运行函数的作用域，第二个参数是一个数组。（数组参数）
 */

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方法可以绑定函数的作用域

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

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

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

引用

javascript高级程序设计