修炼js 2函数及作用域

Js函数

函数对于程序员来说都不陌生，在此记录一下我对Js函数的认识。

1、声明函数语法如下:

//方式一
function fun1(){
	console.log("函数1");
}

//方式二 函数表达式
var fun2 = function(){
	console.log("函数2");
}

//方式三 函数表达式
var fun3 = ()=>{
	console.log("函数3")
}

//方式四
var fun = new Function(console.log("函数4"))

看到这里我们已经会定义函数了，但是我们还经常看到类似如下写法的函数

2、立即执行函数

    (function () {
        console.log("你好我是一个函数")
    })()
    
    var a = function () {
        console.log("你好我是另外一个函数")
    }()

以上两种方式都是立即执行函数，如果是函数表达式则直接在函数体后面写一对小括号，反之需要用小括号先包裹函数再跟一对小括号。那么为什么不是函数表达式要多加一个括号呢，我的理解是：多的这个括号目的是把目标函数转换为函数表达式。可能不是前端的盆友也听过 闭包函数。

3、闭包

	
    function fun(){
        this.name = '狗蛋';
        this.age= 20;
		// 闭包函数
        var func=function(){
            console.log(this.age);
        }
        return func;
    }
    fun()()

我的理解是某个函数的内部函数还持有该函数的内部变量，在该函数的外部被执行了这就是闭包。闭包会导致变量无法被Js的垃圾回收机制回收，过多使用会导致性能下降。

4、this指向

对于接触前端不久的同学来说this指向无疑是一大难点，这里我记录一下针对函数的this指向，接下来先看两个例子。

	// 例子一
	name = "test"
    var obj1 = {
        name : "zyx",
        getName:function (){
            return this.name
        }
    }
    console.log(obj1.getName());


	//例子二
    name = "test"
    var obj1 = {
        name : "zyx",
        getName:()=>{
            return this.name
        }
    }
    console.log(obj1.getName());

如果把这个代码复制到控制台中执行一下的话，你会发现这两个看上去差不多的代码输出了两个不同的结果。那么是什么原因导致的呢，在这里我通俗的解释一下。首先是非箭头函数 （（）=>：即箭头函数）的函数的this会绑定在代码运行期间，谁调用了这个函数那么这个函数的this就指向谁，那么箭头函数呢？箭头函数的this会指向所在作用域的父级作用域，也就是说例子二的this其实就是window，正常情况下是这样的。接下来我们再看两个特殊一点的例子。

  	// 例子一
    name = "test"
    var obj1 = {
        name : "zyx",
        getName(){
            return this.name
        }
    }
    var obj2 = {
        name : "zs"
    }

    console.log(obj1.getName.call(obj2));  


	// 例子二
    name = "test"
    var obj1 = {
        name : "zyx",
        getName:()=>{
            return this.name
        }
    }
    var obj2 = {
        name : "zs"
    }

    console.log(obj1.getName.call(obj2));    

这两个例子比起上边两个稍微复杂了一点，call是Js的预设函数 它的其中一个作用是改变this的指向，就是将 getName 函数的 this 显式的与 obj2 绑定，所以例子一的结果不难的出为 zs，这个例子二与上面的例子二输出一致，还是由于箭头函数导致的，可以把代码复制到控制台亲自试一试，实践是检验真理的唯一标准，虽然我说的不是真理😂😂看到这里函数基本上就差不多了，接下来看作用域

5、作用域

在es5及之前有全局作用域、函数作用域，es6新增了块级作用域，tips:（学习作用域之前请先去看Js变量这样有助于学习）。那么块级别作用域有什么好处吗。
1、外部作用域无法访问块级作用域内的变量
2、内部作用域可以定义与外部的同名变量而不受影响
3、立即执行函数 IIFE变得不在必要

当然，如果说我描述错了或者是有偏差，可以私信我，我们探讨交流一下。最后当然也是干货啦。函数经典面试。 

我遇到的面试官问的问题
1、写一个函数深拷贝
2、能写一个函数实现找出数组中重复次数最多的字符吗
3、实现给两个对象找出对象中相同key并取出value tips:时间有点久了忘记是不是这么描述的了

好了，今天就聊到这儿吧！如果你觉得还不错别忘了点个赞，转发一下，让更多的人看到，一起学习，一起进步，一起成长为一个优秀的前端工作者！！蟹蟹啦。

结语：函数非常强大总觉得自己写的不到位，可能是我的知识贮备还没到那个地步，之后的每周我都会在csdn更新一
篇关于Js的博客，当然包括nodejs的部分知识。