js学习5（函数）

目录

定义函数

函数的特性 

使用函数模拟类

 模拟私有属性和方法

 闭包

函数特性利用

箭头函数

---

定义函数

function func1(name) {
    console.log(name);
}
func2 = function (name) {
    console.log(name);
}
func3 = function func0(name) {
    console.log(name);
}
console.log(typeof func0); // undifined >> 变量转移
console.log(typeof func1); // function
console.log(typeof func2); // function
console.log(typeof func3); // function
func1('joden'); // joden
func2('joden'); // joden
func3('joden'); // joden
func0('joden'); // func0 is not defined

函数的特性 

1. 一次定义多次使用

2. 声明的变量为函数内部作用域

3. 函数体中是新开辟的代码块(可以定义变量、函数等等)

4. 函数可以有返回值

使用函数模拟类

## 思路：
(1) 定义一个方法，内部可以定义变量或方法，把他们当做属性和方法；
(2) 定义一个变量名作为类，然后使外部方法等于该变量；
(3) 让方法暴露出来，让其返回一个对象，这样我们可做满足obj.name/obj.func()；
(4) 让对象映射到外部函数内部定义的属性和方法
## 代码：
var myClass = function(name) {
    var name = name;
    function func1(val) {
        console.log(val);
    }
    return {
        name: name,
        func1:func1,
    }
};
c = myClass('joden');
console(c.name);
c.func1('666666');

 模拟私有属性和方法

### 模拟私有属性和方法
## 思路：
(1) 方法内部的变量和方法不就是方法私有的
(2) 结合前面还要满足类，不让定义的方法和属性暴露出来就可以了
## 代码
var myClass = function (name) {
    var name = name;
    function func1(val) {
        console.log(val);
    }
    // 私有属性
    let info;
    // 私有方法
    function func2(new_name) {
        info = 'hello '+new_name;
        return info;
    }
    function func3(new_name) {
        return func2(new_name);
    }
    return {
        // 只暴露类方法和属性
        name:name,
        func1:func1,
        func3:func3,
    }
}
var c2 = myClass('joden')
console.log(c2.name);;
c2.func1('66666');
res = c2.func3('lisi');
console.log(res);

 闭包

其实上面两个模拟用到了闭包，不过是不经意间的(看一下简单的闭包形式)
function outter(){
    ...
    function inner(){
        ...
    }
    return inner;
}
out = outter();
out();

函数特性利用

其实上面两个模拟也利用了函数的局部作用域特点；
函数还可以用来防止变量作用域污染，如下：
(function(){
    ...
})();

(function(){
    ...
})();
像上面，我们可以定义许多匿名函数使其自执行，而每个函数内部定义的变量又是作用于其内部的，可以避免【域污染】的问题；
注意：因为是方法形式所以不要忘记加括号执行和加分号终止。

箭头函数

## 定义与使用
1. var func = name=>name;
2. var add = (a,b)=>a+b;
3. 作为回调函数处理对象
console.log(func('joden'));
console.log(add(1,2));## 箭头函数中this的含义
首先this是对象所独有的(常用this.*)
所以我们接下来可以写个测试类来看下指向问题（也就是指向哪个对象）## 1. 从对象开始
obj = {a:1,b:function () {console.log(111,this);},c: ()=> {console.log(222,this); },// 再嵌套一层对象d:{da:function () {console.log(333,this);},db:()=>{console.log(444,this);},},// 闭包e:function () {var ea = ()=>{console.log(555,this);}return ea();}
}obj.b();    // 1.1 匿名函数，指向当前对象
obj.c();    // 1.2 箭头函数，忽略了当前的对象，指向window
obj.d.da();     // 1.3 匿名函数，当前对象
obj.d.db();     // 1.4 箭头函数，忽略了当前对象，指向window
obj.e();    // 1.5 用了闭包，指向闭包所在对象## 2. 补充示例
obj2_simple = {a:1,b:function () {var ba = ()=>{console.log(this);}return ba}
}
obj2.b();## 3. 回调函数测试
<button id="btn">点击</button>  
<script>var btn = document.getElementById('btn');btn.onclick = function () {console.log(111,this);  // 3.1 匿名函数指向btn对象}btn.onclick = ()=>{console.log(222,this);  // 3.2 箭头函数指向window对象}btn.onclick = function () {var inner = ()=>{console.log(222,this);  // 3.3 闭包,箭头函数指向对象btn(当然这样做多此一举)}return inner()
}
</script>## 4. 总结：
回调函数用箭头函数，找不到对象自身，而用匿名函数可以（所以回调函数不要用箭头函数）