js函数进阶

js函数进阶

函数调用方式

fn(); // fn.call() 普通函数调用 则函数中this === window


obj.sayHello();// 对象调用 函数中this === 该对象


new Student(); // 构造函数调用 this === 实例对象


btn.onclick = fun  // 通过事件触发 this指的是绑定事件对象


setInterval(function () {
            console.log(this);// 定时执行函数中this === window
        },1000)


(function () {
        console.log(this); // 立即执行函数中this === window
        console.log(11);
    })();

函数this改变方式

call() apply() bind()
 // 第一个参数改变this指向,后面的写传值
    fn.call(obj, 12, 12);


// 由于某些情况下,数据是数组,这时候可以用apply进行处理
	fn.apply(obj, [1, 2]);


// bind() bind()可以改变函数中this指向 但它不会调用函数
    // 返回由指定this值和初始化参数改造的原函数拷贝
    // bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。
    var newFn = fn.bind(obj, 1, 2);
    newFn();

闭包

闭包 有权利访问另外一个函数作用域中的变量的函数
闭包作用:闭包可以延伸变量作用范围

        for (var i = 0; i < list.length; i++) {
            (function (i) {
                //因为没有执行完,所有不会结束,才能访问到i的值
                list[i].onclick = function () {
                    console.log(i);
                }
            })(i);
        }

浅拷贝深拷贝

    var object = {
        a: 10,
        b: 20,
        info: {
            c: 30
        }
    }
    var target = {}
    /*

        //    浅拷贝
        for (var key in object) {
            // console.log(key);
            // console.log(object[key]);
            target[key] = object[key];
        }
    */

    // 深拷贝
    function deepCopy(target, source) {
        for (var key in source) {
            // item存放原始的每个数据
            var item = source[key];
            // 判断是否为数组
            // 注意顺序不能乱,因为Array也是对象
            if (item instanceof Array) {
                target[key] = [];
                // 递归
                deepCopy(target[key], item);
            } else if (item instanceof Object) {
                // 判断是否为对象
                target[key] = {};
                deepCopy(target[key], item);
            } else {
                // 简单数据类型
                target[key] = item;
            }
        }
    }

    deepCopy(target, object);

深拷贝原理就是用递归判断里面是不是对象,如果是,继续深入,如果不是,那就复制值

posted @ 2020-06-07 10:45  彼_岸  阅读(145)  评论(0编辑  收藏  举报