JS 函数

函数

函数申明的方式

#1 构造函数
let func = new Function('title', 'console.log(title)');
func('后盾人');

#2 具名函数
function hd(title) {
    console.log(title);
}
hd('后盾人');

#3 匿名函数
let cms = function (title) {
    console.log(title);
};
cms('后盾人');

全局函数定义特点

全局函数定义的会被压倒 window 对象中。而用匿名函数赋值给 let、const 关键字声明的变量则不会被压入 window。

推荐：函数不要独立声明，使用类、模块的形式进行管理。

function hd() {
    console.log('后盾人');
}
window.hd();

let cms = function() {
    console.log('后盾人');
};
cms();

匿名函数与函数提升

匿名函数方式声明的函数，不会有函数提升。

show();
function show() {
    console.log('后盾人');
}

立即执行函数与块作用域解决冲突

建议：使用模块化方式解决冲突

#1 立即执行函数
(function(w) {
    function show() {
        console.log('mod1 show method');
    }
    function hd() {
        console.log('后盾人');
    }
    w.mod1 = {show}
})(window);
mod1.show();

#2 let 块作用域
{
   let show = function() {
       console.log('mod2 show method');
   }
   
   let hd = function() {
        console.log('后盾人');
   }
   
   window.mod2 = {show}
}
mod2.show();

形参与实参

实参多于形参，多出的参数会被忽略。

实参少于形参，少的形参默认值为 undefined。

function sum(a, b) {
    return a + b;
}
console.log(sum(1, 2));

默认参数的技巧

有默认参数的形参放到后面。

function avg(total, count) {
    count = count || 1;
    return Math.round(total / count);
}
console.log(avg(3000));

#es6
function avg(total, count = 1) {
    return Math.round(total / count);
}
console.log(avg(3000));

函数参数与arguments

arguments 是一个对象。

function sum() {
    let total = 0;
    for(let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}
console.log(sum(1, 2, 3, 4, 5));

箭头函数使用方法

只有一个参数的时候，可以不加括号。

只有一行表达式的时候，可以不加花括号和return和分号。

let sum = () => {
    return 1 + 2;
};
//let sum = () => 1 +2;
console.log(sum());

递归

function factorial(num) {
    if (num == 1) {
        return 1;
    }
    return num * factorial(num - 1);
}
console.log(factorial(3));

#一层层网上返回
return 3 * factorial(3 - 1);
return 2 * factorial(2 - 1);
return 1;

什么叫回调函数

let hd = [1, 2, 3, 4];
hd.map(function(value, index, array) {
    array[index] += 10;
});
console.log(hd);

展开语法

let [a, ...edu] = [1, 2, 3, 4];

this

this 指的是上下文环境。

箭头函数中的 this 指向父级作用域中的 this。

let edu = {
    name: "后盾人",
    show: function() {
        console.log('对象属性值为方法的 this 指的是当前对象');
        function render() {
            console.log('非严格模式下 this 指的是 window')
        }
    }
}

this 的构造原理实现

call、apply，除了传递参数不同，其他都一致，且会立即执行。

call，bind，除了bind不会立即执行，且可以在bind的时候传参或者调用的时候传参，其他都一致。

let lisi = {name: "李四"};
function User(web, url) {
    console.log(arguments);
}
User.call(lisi, '百度', 'baidu.com');
User.apply(lisi, ['百度', 'baidu.com']);
let func = User.bind(lisi, '百度', 'baidu.com');
func();