js学习5（函数）

Mr.Joden

已于 2023-03-18 09:01:14 修改

阅读量647

点赞数 1

分类专栏： Js 文章标签： javascript 学习前端

于 2023-03-10 21:42:08 首次发布

本文链接：https://blog.csdn.net/m0_60633107/article/details/129453577

版权

Js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

定义函数

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. 总结：
回调函数用箭头函数，找不到对象自身，而用匿名函数可以（所以回调函数不要用箭头函数）