JS函数的基础知识

吐槽君 分类:javascript

普通函数

什么是函数

函数是一段JavaScript 代码,它只定义一次,但可能被执行或调用任意次。

定义 JS 函数的方法

1. 函数声明:function 关键字

具名函数
functoin f () {
    return true
}
 

匿名函数 (要结合函数表达式)

function () {
    return true
}
 

2. 函数表达式

函数表达式 + 具名函数
var funcName = function f (a, b){
    return a + b
}

 
函数表达式 + 匿名函数
var f = function (a, b){
    return a + b
}
 

3. 构造函数 Function

var f = new Function('a', 'b', 'return a + b')
 

4. 箭头函数

var f = (a, b) => { return a + b }
 
// 如果函数体只有一句return,可以省略花括号和 return:

var f = (a, b) => a + b
 
// 如果只有一个参数,可以省略小括号

var f = a => a + 1
 

函数名

function f1 () {}         f1.name   'f1'
var f2 = function () {}   f2.name 'f2'
var f3 = function f4(){}  f3.name 'f4'   f4 : f4 is not defined
var f5 = new Function( )  f5.name 'anonymous' // 匿名的
var f6 = () => {}         f6.name 'f6'
 

函数名的记忆方法

除了 Function 构造函数 new 出来的函数名是 annoymous,其他方法定义的函数,首先看关键字 function 后面的函数名,如果没有 function,就是等号前面的函数名。

还有注意:函数表达式 + 具名函数时,等号右边的函数名是没有定义的。

函数返回

  • 函数必须有 return
  • 没有return,也会默认 return undefined

函数提升

function 声明的函数会在作用域提升,在函数声明前就可以调用。

f(5);

function f (a) {
    return a*a
};

// 25
 

函数调用

1、直接调用

// 先定义一个函数

var f = function (a) { return a + 10 }

f(1)  // 11
 

2、作为对象属性被对象调用

var obj = {

    f: function (a) { return a + 10 }
}

obj.f(1)  // 11
 

3、call

call 可以改变函数的this,call的第一个函数会被(转化成对象)当作this,后面的才是真正的参数。

let f = function(a, b, c) { 
    return a + b + c 
}

f (1,1,1) // 3 

f.call (10, 1, 1, 1)  // 3
 

看看this

let f = function (a, b, c) { 
    return this
}

f (1,1,1)             // this 是 Window 对象

f.call (10, 1, 1, 1)  // this 是一个 Number 对象:Number { 10 }
 

4、apply

apply 也可以绑定 this,它与 call 的区别是它第二个参数接受一个数组,数组里面各项作为原来的参数,也就是说:使用 apply 要把参数写成数组进行传参。

let f = function (a, b, c) {
    return a + b +c
}

f.apply (this, [1, 2, 3])   // 6
 

5、bind 绑定不调用

bind也可以绑定this,但是它只绑定生成一个新函数,不会调用。这个新生成的函数已经传好了参数,无法改变。

function f1 (a, b, c) {
    return a + b + c
}

let f = f1.bind (this, 1, 1, 1)

f()      // 3

f(2,2,2) // 还是 3,不会改变
 

6、函数自调用

函数自己调用自己,(可以匿名也可以具名)。

(function(a){
    return a + 10
})(10) 
 
// 20
 

构造函数

什么是构造函数

JS构造函数就是提供一个生成对象的模版,并描述对象的基本结构的函数。(简单地说就是生成对象的函数。)

一个构造函数可以生成多个对象,每个对象具有相同的结构。

function People(name) {
    this.name = name
}

let person1 = new People('Bob')

People 就是一个构造函数,person1 函数就是 People 函数的对象实例。
 

构造函数和普通函数的区别

  1. 构造函数名第一个字母要大写,普通函数使用驼峰
  2. 构造函数里面会使用this,代表要生成的实例,普通函数一般不使用
  3. 构造函数一般没有 return
  4. 构造函数要用 new 调用

new

new命令的作用就是执行一个构造函数,并且返回一个对象实例。

new做了什么?

  1. 创建一个临时的空对象,并将 this 指向这个临时对象
  2. 将空对象的 proto 指向构造函数的 prototype,(并将构造函数的 prototype.constructor 指向构造函数本身)
  3. 执行构造函数里面的代码
  4. 返回这个临时对象
// 代码举例

function F(n){
    this.name = n
}

let f = new F('n1')

// 原型
f.__proto__ === F.prototype   // true

f.name   //   'n1'

f('n2')  //   f is not a function,f 是一个对象,不是函数

f.constructor               // F
f.__proto__.constructor     // F
F.prototype.constructor     // F
F.constuctor                // Function
 

构造函数的 return

new 构造函数会自动返回创建的临时对象。

如果手动代码返回

  • 如果返回非 Object 的值,仍然会返回 this 指向的临时对象。(非 Object 的包括 String、Number、Boolean、null、undefined 等)
  • 如果返回一个 Object 对象,那就会变成返回这个对象。
function F(n){
    this.name = n
    return '1'       // 非 Object
}
let f = new F('n1')

f       // {name: 'n1'} 返回了 this 指向的临时对象
 
function F(n){
    this.name = n
    return {x: 'xxx'}   // 返回一个 Object
}
let f = new F('n1')

f       // {x: 'xxx'}    返回了新的对象
 

回复

我来回复
  • 暂无回复内容