js函数进阶

2021-07-26

一、声明定义

1.函数也是对象，函数是Function类创建的实例

1 2	let func = new Function('title', 'console.log(title)'); func('wucg');

2.使用函数声明来定义函数

function func(title) {
    console.log(title);
}
func('wucg');

3.对象字面量属性函数简写

let user = {
    name: null,
    setUsername: function(name) {
        this.name = name;
    },
    getUsername: function() {
        return this.name;
    },
    // 简写形式
    // setUsername(name) {
    //     this.name = name;
    // },
    // getUsername() {
    //     return this.name;
    // },
};
user.setUsername('wucg');
console.log(user.getUsername());

二、全局函数

全局函数会声明在window对象中，可能会覆盖window内置方法

// 全局函数
function func1() {
console.log('wucg');
}
window.func1();

// 使用let赋值语句定义时，不能通过window调用函数
let func2 = function() {
console.log('wucg');
};
func2();

三、匿名函数与函数提升

1.具名函数与匿名函数的区别

// 具名函数可以函数提升
show1();
function show1() {
    console.log('show1');
}
// 匿名函数不会函数提升
show2();
let show2 = function() {
    console.log('show2'); // 报错
};

2.案例分析

func();
function func() {
    console.log('aaa');
}
let func = function() {
    console.log('bbb');  // 报错  因为let不能重复声明变量
};

func();
function func() {
    console.log('aaa');  // aaa  因为全局函数会函数提升
}
var func = function() {
    console.log('bbb');
};
console.log(window.func);  // 输出结果是新的func

四、立即执行函数

1.简单的立即执行函数

1
2
3

(function() {
    console.log('aaa');
})();

2.可以用来定义私有作用域防止污染全局作用域

(function () {
    var web = 'wucg';
})();
console.log(web);  //web is not defined

(function () {
    function f1() {
        console.log('aaa');
    }
})();
f1(); // 报错

(function (window) {
    function f1() {
        console.log('bbb');
    }
    window.myFunc = { f1 };
})(window);
window.myFunc.f1();  // 执行正常

五、函数默认参数

// 默认升序
function sortArr(array, type='asc') {
    return array.sort((a, b) => (type === 'asc' ? a - b : b - a))
}
console.log(sortArr([4, 7, 1, 10]));

六、函数参数与arguments

function sum() {
    console.log(arguments);
    return [...arguments].reduce((a, b) => a + b);
}
function newSum(...args) {
    return args.reduce((a, b) => a + b);
}
console.log(sum(1, 22, 4, 10, 6));
console.log(newSum(1, 22, 4, 10, 6));

七、递归

1.实现阶乘

// 递归实现阶乘计算，关键是退出递归的条件
function factorial(n) {
    if(n == 1) return 1;
    return n * factorial(n - 1);
}
console.log(factorial(4));
// 简写形式
function factorial_new(n) {
    return n === 1 ? 1 : n * factorial(n - 1);
}
console.log(factorial_new(4));

2.求和

function sum(...args) {
    if(args.length === 0) return 0;
    return args[0] + sum(...args.slice(1));
}
console.log(sum(1, 4, 7, 10));

3.实现倒三角

function star(sum) {
    if(sum === 0) return;
    console.log("*".repeat(sum));
    star(--sum);
}
star(5);

八、回调函数

在某个时刻被其他函数调用的函数被称为回调函数。

九、this

this表示当前执行上下文，指向当前函数的运行环境

1.this指向

// 对象中的函数称为(类)方法，方法中的this指的是当前对象的引用
let obj = {
    name: 'wcg',
    show:function() {
        return this.name;
    }
};
console.log(obj.show());
// 全局环境下，this就是全局对象window
console.log(window === this);  // true

let obj1 = {
    name: 'wcg',
    show: function() {
        console.log(this);  // 指的是obj1对象
        function render() {
            console.log(this);   // 指的是window对象
        }
        render();
    }
};
obj1.show();

2.通过常量改变this指向

在父作用域中定义引用this的变量

// 通过常量改变this指向
let lesson = {
    site: 'wucg',
    list: ['js', 'css', 'html'],
    show: function() {
        const self = this;
        return this.list.map(function(value) {
            // console.log(self);   // self指的是lesson对象
            return `${self.site}-${value}`;
        })
    }
};
console.log(lesson.show());

// 也可以将this作为map的第2个参数传入函数中(略)

3.箭头函数改变this指向

箭头函数没有this，即箭头函数的this指向父级作用域的this

let lesson = {
        site: 'wucg',
        list: ['js', 'css', 'html'],
        show: function() {
            return this.list.map((value) => {
                // console.log(this);  // 这个this指向了上下文，即父级作用域的this
                return `${this.site}-${value}`;
            })
        }
    };
    console.log(lesson.show());

let domObj = {
    site: 'wucg',
    bind: function() {
        const button = document.querySelector('button');
        // button.addEventListener("click", function() {
        //     console.log(this);  // 指的是button
        // })

        // button.addEventListener("click", () => {
        //     console.log(this);  // 指的是domObj
        // })

        button.addEventListener("click", (e) => {
            console.log(this);  // 指的是domObj
            console.log(e.target);  // 指的是button
        })
    }
};
domObj.bind();

let domObj = {
    site: 'wucg',
    bind: function() {
        let btns = document.querySelectorAll('button');
        btns.forEach(function(item) {
            console.log(this);  // 指的是全局对象window(如果forEach的回调换成箭头函数，则this指的是父级作用域的this，即domObj)
            item.addEventListener('click', () => {
                console.log(this);  // 指向父级作用域的this，所以也是window
            })
        })
    }
};
domObj.bind();

十、call/apply/bind 改变this指针

1.构造函数

函数被new时即为构造函数，一般构造函数中包含属性和方法。构造函数的this默认是一个空对象，然后构造函数处理后把这个空对象变得有值。

call/apply/bind 可以改变构造函数中的空对象，即让构造函数this指向另一个对象。

2.call

// 构造函数User
function User(name) {
    this.name = name;
}
let lisi = new User('李四');
console.log(lisi);
let obj = { url: 'wucg.com' };
User.call(obj, '网站');
console.log(obj);

3.apply

call与apply两个方法作用一样，都是将对象绑定到this，只是传递参数的方式不同。

(1)apply用数组传参；(2)call需要分别传参；(3)与bind不同，call/apply会立即执行。

<body>
    <button>btn1</button>
    <button>btn2</button>
</body>
<script>
    /* apply call 改变this指向 */
    let lisi = { name: "李四" };
    let wangwu = { name: "王五" };
    function User(a, b) {
        console.log(this.name);
    }
    // call：立刻执行。第一个参数是this指针要改变的对象，之后的就是要传递的参数
    User.call(lisi, 'aaa', 'bbb');
    // apply：立刻执行。第一个参数是this指针要改变的对象，之后的就是要传递的参数构成的数组
    User.apply(lisi, ['aaa', 'bbb']);

    function show() {
        alert(this.innerHTML);
    }
    let btns = document.querySelectorAll('button');
    for(let i = 0;i < btns.length; i++) {
        btns[i].addEventListener('click', event => {
            show.call(event.target);
        })
    }

    console.log(Math.max(12, 1, 25, 9));
    let arr = [1, 4, 7, 16, 22, 9, 15];
    console.log(Math.max(...arr));
    console.log(Math.max.apply(Math, arr));
</script>

多个构造函数服用方法

/* 多个构造函数复用方法 */
function Request() {
    this.get = function(params) {
        let str = Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
        document.write(`https://wucg.com/${this.url}?${str}`);
    }
}

function Article() {
    this.url = 'article/list';
    // this.get = function(params) {
    //     let str = Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
    //     document.write(`https://wucg.com/${this.url}?${str}`);
    // }
    Request.call(this);
}
let a = new Article();
console.log(a.get({id: 1, category: 'js'}));

document.write('<hr />')

function User() {
    this.url = 'user/list';
    // this.get = function(params) {
    //     let str = Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
    //     document.write(`https://wucg.com/${this.url}?${str}`);
    // }
    Request.call(this);
}
let b = new User();
console.log(b.get({id: 2, category: 'admin'}));

4.bind

bind不会立刻执行，而是得到一个新的函数

// bind 不会立刻执行，而是得到一个新的函数
function show() {
    console.log(this.name);
}
show.call({name: 'wucg'});
const func = show.bind({name: 'wucg'});
func();

let a = function () {};
let b = a;
console.log(a === b);   // true
b = a.bind();
console.log(a === b);   // false

function add(a, b) {
    return this.base + a + b;
}
console.log(add.call({base: 1}, 1, 1));
console.log(add.apply({base: 1}, [1, 1]));
const newAdd1 = add.bind({base: 1}, 1, 1);
console.log(newAdd1());  // 3
const newAdd2 = add.bind({base: 1}, 1, 1);
console.log(newAdd2(2, 2));  // 3，因为传递的2，2参数失效
const newAdd3 = add.bind({base: 1});
console.log(newAdd3(2, 2));  // 5，使用传递的2，2参数

5.案例

网页随机色效果

function Color(elem) {
    this.elem = elem;
    this.colors = ['#FFCCBC', '#FFBCD8', '#DCC6E0', '#39D5FF', '#39D5FF'];
    this.run = function() {
        setInterval(function () {
            let i = Math.floor(Math.random() * 5);
            this.elem.style.backgroundColor = this.colors[i];
            return this.colors[i];
        }.bind(this), 2000);
    };
}
let obj = new Color(document.body);
obj.run();