前端知识搜集（一）

前端知识搜集

---

一、闭包

实现一个foo函数, 返回自身被调用的次数 可以这么使用:

a = foo();
b = foo();
c = foo();
// 此时  a 的值是1;b的值是2;c的值是3;

• 用闭包实现，闭包能使变量保存到内存中
• 用立即执行函数实现返回函数立即调用

const foo = (function() {
    // 把这里想象成全局变量
    let count = 1;

    function increase() {
        return count++;
    }

    increase.reset = function() {
        count = 1;
    }

    return increase;
})();

二、数字字符转千分位

/**
 * 数字字符转千分位
 * “\b”可以表示字母在单词的边界，“\B”可以表示字母不在单词的边界。
 * 举个例子：“\B.+ful\b”就能匹配到“beautifulfull”中的“beautiful”。
 */
let num = "111234567";
num = parseFloat(num);
num = num.toFixed(2);
num = num.replace(/\B(?=(\d{3})+\b)/g, ',');
console.log(num);

正则的零宽度正预测先行断言(?=exp)，名字有点难记，意思是它断言自身出现的位置的后面能匹配表达式exp。

三、用字符串获取对象中的属性

var object = { ‘a’: [{ ‘b’: { ‘c’: 3 } }] };
get(object, ‘a[0].b.c’);
//应该返回 3

function get(obj, path) {
    const pathes = path.split('.');
    // a[0], b, c
    let prop;
    let res = obj;
    const reg = /(\w+)\[(\d+)\]$/;
    while (prop = pathes.shift()) {
        // 如果prop中有 '[]'，先匹配[]前面的字符，然后再匹配括号中的数字
        if (reg.test(prop)) {
            // obj.a
            res = res[RegExp.$1];
            // a[0]
            res = res[RegExp.$2];
        } else {
            res = res[prop];
        }
    }
    return res;
}

函数柯里化

维基百科上说道：柯里化，英语：Currying(果然是满满的英译中的既视感)，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

// 普通的add函数
function add(x, y) {
    return x + y
}

// Currying后
function curryingAdd(x) {
    return function (y) {
        return x + y
    }
}

add(1, 2)           // 3
curryingAdd(1)(2)   // 3

函数柯里化的好处

1. 参数复用

返回的函数可以多次应用。

// 正常正则验证字符串 reg.test(txt)

// 函数封装后
function check(reg, txt) {
    return reg.test(txt)
}

check(/\d+/g, 'test')       //false
check(/[a-z]+/g, 'test')    //true

// Currying后
function curryingCheck(reg) {
    return function(txt) {
        return reg.test(txt)
    }
}

var hasNumber = curryingCheck(/\d+/g)
var hasLetter = curryingCheck(/[a-z]+/g)

hasNumber('test1')      // true
hasNumber('testtest')   // false
hasLetter('21212')      // false

2. 提前确认

在函数第一次执行时便进行必要的判断，然后确定返回的函数，以后就不比每次都进行判断。

var on = function(element, event, handler) {
    if (document.addEventListener) {
        if (element && event && handler) {
            element.addEventListener(event, handler, false);
        }
    } else {
        if (element && event && handler) {
            element.attachEvent('on' + event, handler);
        }
    }
}

var on = (function() {
    if (document.addEventListener) {
        return function(element, event, handler) {
            if (element && event && handler) {
                element.addEventListener(event, handler, false);
            }
        };
    } else {
        return function(element, event, handler) {
            if (element && event && handler) {
                element.attachEvent('on' + event, handler);
            }
        };
    }
})();

//换一种写法可能比较好理解一点，上面就是把isSupport这个参数给先确定下来了
var on = function(isSupport, element, event, handler) {
    isSupport = isSupport || document.addEventListener;
    if (isSupport) {
        return element.addEventListener(event, handler, false);
    } else {
        return element.attachEvent('on' + event, handler);
    }
}

函数柯里化的面试题

// 实现一个add方法，使计算结果能够满足如下预期：
add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;

function add() {
    // 第一次执行时，定义一个数组专门用来存储所有的参数
    var _args = Array.prototype.slice.call(arguments);

    // 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值
    var _adder = function() {
        _args.push(...arguments);
        return _adder;
    };

    // 利用toString隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回
    _adder.toString = function () {
        return _args.reduce(function (a, b) {
            return a + b;
        });
    }
    return _adder;
}

add(1)(2)(3)                // 6
add(1, 2, 3)(4)             // 10
add(1)(2)(3)(4)(5)          // 15
add(2, 6)(1)                // 9

四、判断一个对象是否是空对象

function objIsEmpty(obj) {
    const keys = Object.keys(obj);
    return keys.length === 0;
}

五、new一个对象这个过程发生了什么？

1. 以构造器的prototype属性为原型，创建新对象。
2. 将this（也就是上一步中的新对象）和参数传给构造函数，执行构造函数。
3. 如果构造函数没有手动返回对象，则返回第一步创建的对象。

自己实现一个new方法：

function Parent(name, age) {
    this.name = name;
    this.age = age;
}

Parent.prototype.toString = function() {
    return this.name + ' ' + this.age;
}


// 自己实现一个new方法
function newMethod(Parent, ...rest) {
    // 1.创建一个__proto__指向构造函数prototype属性的对象
    const obj = Object.create(Parent.prototype);
    // 2.将该对象和参数给Parent执行
    Parent.call(obj, ...rest);
    // 3.返回该对象
    return obj;
}

const child = newMethod(Parent, 'makabaka', 23);
console.log(child instanceof Parent);  // true
console.log(child.toString()); // makabaka 23

六、如何实现localStorage跨域共享

https://www.cnblogs.com/tyrion1990/p/8134384.html
1.解决思路：在A域和B域下引入C域，所有的读写都由C域来完成，本地数据存在C域下; 因此 A域和B域的页面必定要引入C域的页面（使用ifame）; 当然C域最好是主域。

• A,B需要读写时，通过window.frames[0].postMessage()向C域发送请求。
• C域监听跨域消息，进行读写操作
• A,B域需要监听跨域消息来接受来自C域的数据