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 函数的对象实例。
构造函数和普通函数的区别
- 构造函数名第一个字母要大写,普通函数使用驼峰
- 构造函数里面会使用this,代表要生成的实例,普通函数一般不使用
- 构造函数一般没有 return
- 构造函数要用 new 调用
new
new命令的作用就是执行一个构造函数,并且返回一个对象实例。
new做了什么?
- 创建一个临时的空对象,并将 this 指向这个临时对象
- 将空对象的 proto 指向构造函数的 prototype,(并将构造函数的 prototype.constructor 指向构造函数本身)
- 执行构造函数里面的代码
- 返回这个临时对象
// 代码举例
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'} 返回了新的对象