函数声明以及调用的方式

目录

一、函数定义的方式

方式1 :函数声明方式 function 关键字 (命名函数)

方式2 :函数表达式(匿名函数)   又叫函数字面量式

方式3 :new Function()即构造函数声明

函数声明与函数表达式(函数字面量式)的区别

函数调用方式

1、作为一个函数调用：直接调用函数

2、作为方法来调用函数：将函数定义为对象的方法

3、使用构造函数调用函数：(函数调用前使用new关键字)

4、作为函数方法调用函数：（call和apply是预定义的函数）

call()和apply()的区别：

call()和bind()的区别

---

一、函数定义的方式

方式1 :函数声明方式 function 关键字 (命名函数)

function fn(){}

方式2 :函数表达式(匿名函数)   又叫函数字面量式

var fn = function(b){}  // 函数表达式

var func3=function func4(c){}//命名式函数表达式

var func5=(function(n1,n2){})();//立即执行的函数表达式

return function(){};//作为返回值的函数表达式

方式3 :new Function()即构造函数声明

var f = new Function(‘a’, ‘b’, ‘console.log(a + b)’);
f(1, 2);

函数声明与函数表达式(函数字面量式)的区别

函数声明会将那个函数提升到代码最前面（即使你写代码的时候在代码块最后才写这个函数，成为全局函数。函数声明要指定函数名，而函数表达式不用，可以用作匿名函数。

js匿名函数

//声明一个普通函数，函数的名字叫fn
function fn(){
console.log(“小蜜蜂”);
}

然后将函数的名字去掉即是匿名函数

到此，你会发现单独运行一个匿名函数，由于不符合语法要求，报错啦！

解决方法只需要给匿名函数包裹一个括号即可：

// 匿名函数
function(){
  console.log("蜜蜂");
}

//执行匿名函数（错误方式）
function(){
  console.log("蜜蜂");
}()

// 执行匿名函数（正确方式）  
// 又称为IIFE（匿名函数自调用：立即调用函数表达式）

(function(){
  console.log("蜜蜂");
})()

// 倘若需要传值，直接将参数写到括号内即可：
(function (str){
//此时会输出123好帅！
console.log(“123”+str);
})(“好帅！”)

函数调用方式

函数有四种调用方式，每种方式的不同在于this的初始化。

 全局环境
全局环境就是在<script></script>里面，这里的this始终指向的是window对象。

<script>
    console.log(this); // 全局环境，即window对象下，this -> window 
</script>

1、作为一个函数调用：直接调用函数

严格模式下，函数中的this为undefined；

this指向：在全局作用域下直接调用函数，this指向window

function fun() {
     console.log(this);
}
fun()

2、作为方法来调用函数：将函数定义为对象的方法

this指向：对象函数调用，哪个对象调用就指向哪个对象

var obj1 = {
    a: 1,
    fun1: function() {
        console.log(this);
    },
    obj2: {
    	fun2: function() {
    		console.log(this);
    	}
    }
}
obj1.fun1(); // fun1由obj调用，所以this -> obj1
obj1.obj2.fun2(); // fun2由obj2调用，所以this -> obj2

3、使用构造函数调用函数：(函数调用前使用new关键字)

this指向： 构造函数中中的this指向实例对象

var Person = function() {
	this.name = "小刘"; // 这里的this -> obj对象
}
var obj = new Person();

4、作为函数方法调用函数：（call和apply是预定义的函数）

call() 方法可以接收多个参数列表，
apply() 方法只能接收数组形式的参数，数组元素将作为参数列表传递给被调用的函数
两个方法的第一个参数必须是对象本身（也可以是null）
当第一个参数为null时，得到的是当前运行环境的全局变量（window）

//call()方法 函数名.call()
    function def(x,y) {
        return x + y;
    };
    var obj = console.log(def.call(obj,3,4));
    
 //apply()方法 函数名.apply()
   	  function def(x,y) {
          return x + y;
       };
       //var arr = [14,5];
       //var obj = console.log(def.apply(obj,arr));
       var obj = console.log(def.apply(obj,[14,6]));

call()和apply()的区别：

相同点：都是调用一个对象的一个方法，用另一个对象替换当前对象（功能相同）

例如：
B.call(A, args1,args2);即A对象调用B对象的方法
F.apply(G, arguments);即G对象应用F对象的方法

不同点：参数书写方式不同

call()的第一个参数是this要指向的对象，后面传入的是参数列表，参数可以是任意类型，当第一个参数为null、undefined的时候，默认指向window；
apply()：第一个参数是this要指向的对象，第二个参数是数组

var obj = {}//定义一个空的对象
function f(x,y){
console.log(x,y)
console.log(this) //this是指obj
}
f.apply(obj,[1,2]) //后面的值需要用[]括起来
f.call(obj,1,2) //直接写

call()和bind()的区别

相同点：都是用来改变this的指向

不同点：call()改过this的指向后，会再执行函数，bind()改过this后，不执行函数，会返回一个绑定新this的函数

//例如：
function f(){
console.log("看我怎么被调用");
console.log(this) //指向this
}
var obj = {};
f.call(obj) //直接调用函数
var g = f.bind(obj); //bind()不能调用函数
g();  //此时才调用函数

call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：

call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,'成都', ... ,'string' )。

apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['成都', ..., 'string' ])。

bind 除了返回是函数以外，它 的参数和 call 一样。

当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数 、 object 等等！