Javascript的ES6 class写法和ES5闭包写法性能对比

已于 2023-03-10 10:58:30 修改
阅读量742 收藏
点赞数
分类专栏： javascript 文章标签： javascript 前端 es6 react.js 性能优化
于 2023-03-10 10:36:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/allen8612433/article/details/129437636
版权

看到很多闭包写法的函数, 
一直怀疑它对性能是否有影响.
还有就是备受推崇的React Hooks函数式写法中出现大量的闭包和临时函数,
我很担心这样会影响性能.

于是, 做了一个实验来做对比.
这个实验很简单, 用md5计算一百万次.

计算过程将结果再放回参数, 这样避免结果没被引用被优化, 影响对比结果.
其中test.js采用闭包写法, test2.js采用class写法.
最终的对比结果如下图所示.
闭包的写法略差于class写法, 大概20%
因此对性能要求比较高的话, 还是推荐class写法.  


下面是闭包写法test.js的代码

function md5 (string) {
    function rotateLeft(lValue, iShiftBits) {
        return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits));
    }
    function addUnsigned(lX, lY) {
        let lX8 = lX & 0x80000000;
        let lY8 = lY & 0x80000000;
        let lX4 = lX & 0x40000000;
        let lY4 = lY & 0x40000000;
        let lResult = (lX & 0x3fffffff) + (lY & 0x3fffffff);
        if (lX4 & lY4) {
            return lResult ^ 0x80000000 ^ lX8 ^ lY8;
        }
    
        if (lX4 | lY4) {
            if (lResult & 0x40000000) {
                return lResult ^ 0xc0000000 ^ lX8 ^ lY8;
            } else {
                return lResult ^ 0x40000000 ^ lX8 ^ lY8;
            }
        } else {
            return lResult ^ lX8 ^ lY8;
        }
    }
    function F(x, y, z) {
        return (x & y) | (~x & z);
    }
    function G(x, y, z) {
        return (x & z) | (y & ~z);
    }
    function H(x, y, z) {
        return x ^ y ^ z;
    }
    function I(x, y, z) {
        return y ^ (x | ~z);
    }
    function FF(a, b, c, d, x, s, ac) {
        a = addUnsigned(a, addUnsigned(addUnsigned(F(b, c, d), x), ac));
        return addUnsigned(rotateLeft(a, s), b);
    }
    function GG(a, b, c, d, x, s, ac) {
        a = addUnsigned(a, addUnsigned(addUnsigned(G(b, c, d), x), ac));
        return addUnsigned(rotateLeft(a, s), b);
    }
    function HH(a, b, c, d, x, s, ac) {
        a = addUnsigned(a, addUnsigned(addUnsigned(H(b, c, d), x), ac));
        return addUnsigned(rotateLeft(a, s), b);
    }
    function II(a, b, c, d, x, s, ac) {
        a = addUnsigned(a, addUnsigned(addUnsigned(I(b, c, d), x), ac));
        return addUnsigned(rotateLeft(a, s), b);
    }
    function convertToWordArray(string) {
        let lWordCount;
        let lMessageLength = string.length;
        let lNumberOfWordsTempOne = lMessageLength + 8;
        let lNumberOfWordsTempTwo = (lNumberOfWordsTempOne - (lNumberOfWordsTempOne % 64)) / 64;
        let lNumberOfWords = (lNumberOfWordsTempTwo + 1) * 16;
        let lWordArray = Array(lNumberOfWords - 1);
        let lBytePosition = 0;
        let lByteCount = 0;
        while (lByteCount < lMessageLength) {
            lWordCount = (lByteCount - (lByteCount % 4)) / 4;
            lBytePosition = (lByteCount % 4) * 8;
            lWordArray[lWordCount] =
                lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition);
            lByteCount++;
        }
        lWordCount = (lByteCount - (lByteCount % 4)) / 4;
        lBytePosition = (lByteCount % 4) * 8;
        lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);
        lWordArray[lNumberOfWords - 2] = lMessageLength << 3;
        lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;
        return lWordArray;
    }
    function wordToHex(lValue) {
        let WordToHexValue = "";
        let WordToHexValueTemp = "";
        let lByte;
        for (let lCount = 0; lCount <= 3; lCount++) {
            lByte = (lValue >>> (lCount * 8)) & 255;
            WordToHexValueTemp = "0" + lByte.toString(16);
            WordToHexValue = WordToHexValue + WordToHexValueTemp.substr(WordToHexValueTemp.length - 2, 2);
        }
        return WordToHexValue;
    }
    function uTF8Encode(string) {
        string = string.replace(/\x0d\x0a/g, "\x0a");
        let output = "";
        for (let n = 0; n < string.length; n++) {
            let c = string.charCodeAt(n);
            if (c < 128) {
                output += String.fromCharCode(c);
            } else if (c > 127 && c < 2048) {
                output += String.fromCharCode((c >> 6) | 192);
                output += String.fromCharCode((c & 63) | 128);
            } else {
                output += String.fromCharCode((c >> 12) | 224);
                output += String.fromCharCode(((c >> 6) & 63) | 128);
                output += String.fromCharCode((c & 63) | 128);
            }
        }
        return output;
    }
    function res(string) {
        let x = [];
        let AA, BB, CC, DD;
        let S11 = 7;
        let S12 = 12;
        let S13 = 17;
        let S14 = 22;
        let S21 = 5;
        let S22 = 9;
        let S23 = 14;
        let S24 = 20;
        let S31 = 4;
        let S32 = 11;
        let S33 = 16;
        let S34 = 23;
        let S41 = 6;
        let S42 = 10;
        let S43 = 15;
        let S44 = 21;
        string = uTF8Encode(string);
        x = convertToWordArray(string);
        let a = 0x67452301;
        let b = 0xefcdab89;
        let c = 0x98badcfe;
        let d = 0x10325476;
        for (let k = 0; k < x.length; k += 16) {
            AA = a;
            BB = b;
            CC = c;
            DD = d;
            a = FF(a, b, c, d, x[k + 0], S11, 0xd76aa478);
            d = FF(d, a, b, c, x[k + 1], S12, 0xe8c7b756);
            c = FF(c, d, a, b, x[k + 2], S13, 0x242070db);
            b = FF(b, c, d, a, x[k + 3], S14, 0xc1bdceee);
            a = FF(a, b, c, d, x[k + 4], S11, 0xf57c0faf);
            d = FF(d, a, b, c, x[k + 5], S12, 0x4787c62a);
            c = FF(c, d, a, b, x[k + 6], S13, 0xa8304613);
            b = FF(b, c, d, a, x[k + 7], S14, 0xfd469501);
            a = FF(a, b, c, d, x[k + 8], S11, 0x698098d8);
            d = FF(d, a, b, c, x[k + 9], S12, 0x8b44f7af);
            c = FF(c, d, a, b, x[k + 10], S13, 0xffff5bb1);
            b = FF(b, c, d, a, x[k + 11], S14, 0x895cd7be);
            a = FF(a, b, c, d, x[k + 12], S11, 0x6b901122);
            d = FF(d, a, b, c, x[k + 13], S12, 0xfd987193);
            c = FF(c, d, a, b, x[k + 14], S13, 0xa679438e);
            b = FF(b, c, d, a, x[k + 15], S14, 0x49b40821);
            a = GG(a, b, c, d, x[k + 1], S21, 0xf61e2562);
            d = GG(d, a, b, c, x[k + 6], S22, 0xc040b340);
            c = GG(c, d, a, b, x[k + 11], S23, 0x265e5a51);
            b = GG(b, c, d, a, x[k + 0], S24, 0xe9b6c7aa);
            a = GG(a, b, c, d, x[k + 5], S21, 0xd62f105d);
            d = GG(d, a, b, c, x[k + 10], S22, 0x2441453);
            c = GG(c, d, a, b, x[k + 15], S23, 0xd8a1e681);
            b = GG(b, c, d, a, x[k + 4], S24, 0xe7d3fbc8);
            a = GG(a, b, c, d, x[k + 9], S21, 0x21e1cde6);
            d = GG(d, a, b, c, x[k + 14], S22, 0xc33707d6);
            c = GG(c, d, a, b, x[k + 3], S23, 0xf4d50d87);
            b = GG(b, c, d, a, x[k + 8], S24, 0x455a14ed);
            a = GG(a, b, c, d, x[k + 13], S21, 0xa9e3e905);
            d = GG(d, a, b, c, x[k + 2], S22, 0xfcefa3f8);
            c = GG(c, d, a, b, x[k + 7], S23, 0x676f02d9);
            b = GG(b, c, d, a, x[k + 12], S24, 0x8d2a4c8a);
            a = HH(a, b, c, d, x[k + 5], S31, 0xfffa3942);
            d = HH(d, a, b, c, x[k + 8], S32, 0x8771f681);
            c = HH(c, d, a, b, x[k + 11], S33, 0x6d9d6122);
            b = HH(b, c, d, a, x[k + 14], S34, 0xfde5380c);
            a = HH(a, b, c, d, x[k + 1], S31, 0xa4beea44);
            d = HH(d, a, b, c, x[k + 4], S32, 0x4bdecfa9);
            c = HH(c, d, a, b, x[k + 7], S33, 0xf6bb4b60);
            b = HH(b, c, d, a, x[k + 10], S34, 0xbebfbc70);
            a = HH(a, b, c, d, x[k + 13], S31, 0x289b7ec6);
            d = HH(d, a, b, c, x[k + 0], S32, 0xeaa127fa);
            c = HH(c, d, a, b, x[k + 3], S33, 0xd4ef3085);
            b = HH(b, c, d, a, x[k + 6], S34, 0x4881d05);
            a = HH(a, b, c, d, x[k + 9], S31, 0xd9d4d039);
            d = HH(d, a, b, c, x[k + 12], S32, 0xe6db99e5);
            c = HH(c, d, a, b, x[k + 15], S33, 0x1fa27cf8);
            b = HH(b, c, d, a, x[k + 2], S34, 0xc4ac5665);
            a = II(a, b, c, d, x[k + 0], S41, 0xf4292244);
            d = II(d, a, b, c, x[k + 7], S42, 0x432aff97);
            c = II(c, d, a, b, x[k + 14], S43, 0xab9423a7);
            b = II(b, c, d, a, x[k + 5], S44, 0xfc93a039);
            a = II(a, b, c, d, x[k + 12], S41, 0x655b59c3);
            d = II(d, a, b, c, x[k + 3], S42, 0x8f0ccc92);
            c = II(c, d, a, b, x[k + 10], S43, 0xffeff47d);
            b = II(b, c, d, a, x[k + 1], S44, 0x85845dd1);
            a = II(a, b, c, d, x[k + 8], S41, 0x6fa87e4f);
            d = II(d, a, b, c, x[k + 15], S42, 0xfe2ce6e0);
            c = II(c, d, a, b, x[k + 6], S43, 0xa3014314);
            b = II(b, c, d, a, x[k + 13], S44, 0x4e0811a1);
            a = II(a, b, c, d, x[k + 4], S41, 0xf7537e82);
            d = II(d, a, b, c, x[k + 11], S42, 0xbd3af235);
            c = II(c, d, a, b, x[k + 2], S43, 0x2ad7d2bb);
            b = II(b, c, d, a, x[k + 9], S44, 0xeb86d391);
            a = addUnsigned(a, AA);
            b = addUnsigned(b, BB);
            c = addUnsigned(c, CC);
            d = addUnsigned(d, DD);
        }
        let tempValue = wordToHex(a) + wordToHex(b) + wordToHex(c) + wordToHex(d);
        return tempValue.toLowerCase();
    }
    return res(string);
}

function testMd5() {
    let startTick = Date.now() / 1000;
    let result = "测试文本字符串测试文本字符串测试文本字符串";
    for (let i = 0; i< 1e6; ++i) {
        result = md5(result+i);
    }
    console.log(result);
    let endTick = Date.now() / 1000; 
    console.log(endTick - startTick);
}

testMd5();

 下面是类写法test2.js的代码.

class Md5Class {
    rotateLeft(lValue, iShiftBits) {
        return (lValue << iShiftBits) | (lValue >>> (32 - iShiftBits));
    }
    addUnsigned(lX, lY) {
        let lX8 = lX & 0x80000000;
        let lY8 = lY & 0x80000000;
        let lX4 = lX & 0x40000000;
        let lY4 = lY & 0x40000000;
        let lResult = (lX & 0x3fffffff) + (lY & 0x3fffffff);
        if (lX4 & lY4) {
            return lResult ^ 0x80000000 ^ lX8 ^ lY8;
        }
    
        if (lX4 | lY4) {
            if (lResult & 0x40000000) {
                return lResult ^ 0xc0000000 ^ lX8 ^ lY8;
            } else {
                return lResult ^ 0x40000000 ^ lX8 ^ lY8;
            }
        } else {
            return lResult ^ lX8 ^ lY8;
        }
    }
    F(x, y, z) {
        return (x & y) | (~x & z);
    }
    G(x, y, z) {
        return (x & z) | (y & ~z);
    }
    H(x, y, z) {
        return x ^ y ^ z;
    }
    I(x, y, z) {
        return y ^ (x | ~z);
    }
    FF(a, b, c, d, x, s, ac) {
        a = this.addUnsigned(a, this.addUnsigned(this.addUnsigned(this.F(b, c, d), x), ac));
        return this.addUnsigned(this.rotateLeft(a, s), b);
    }
    GG(a, b, c, d, x, s, ac) {
        a = this.addUnsigned(a, this.addUnsigned(this.addUnsigned(this.G(b, c, d), x), ac));
        return this.addUnsigned(this.rotateLeft(a, s), b);
    }
    HH(a, b, c, d, x, s, ac) {
        a = this.addUnsigned(a, this.addUnsigned(this.addUnsigned(this.H(b, c, d), x), ac));
        return this.addUnsigned(this.rotateLeft(a, s), b);
    }
    II(a, b, c, d, x, s, ac) {
        a = this.addUnsigned(a, this.addUnsigned(this.addUnsigned(this.I(b, c, d), x), ac));
        return this.addUnsigned(this.rotateLeft(a, s), b);
    }
    convertToWordArray(string) {
        let lWordCount;
        let lMessageLength = string.length;
        let lNumberOfWordsTempOne = lMessageLength + 8;
        let lNumberOfWordsTempTwo = (lNumberOfWordsTempOne - (lNumberOfWordsTempOne % 64)) / 64;
        let lNumberOfWords = (lNumberOfWordsTempTwo + 1) * 16;
        let lWordArray = Array(lNumberOfWords - 1);
        let lBytePosition = 0;
        let lByteCount = 0;
        while (lByteCount < lMessageLength) {
            lWordCount = (lByteCount - (lByteCount % 4)) / 4;
            lBytePosition = (lByteCount % 4) * 8;
            lWordArray[lWordCount] =
                lWordArray[lWordCount] | (string.charCodeAt(lByteCount) << lBytePosition);
            lByteCount++;
        }
        lWordCount = (lByteCount - (lByteCount % 4)) / 4;
        lBytePosition = (lByteCount % 4) * 8;
        lWordArray[lWordCount] = lWordArray[lWordCount] | (0x80 << lBytePosition);
        lWordArray[lNumberOfWords - 2] = lMessageLength << 3;
        lWordArray[lNumberOfWords - 1] = lMessageLength >>> 29;
        return lWordArray;
    }
    wordToHex(lValue) {
        let WordToHexValue = "";
        let WordToHexValueTemp = "";
        let lByte;
        for (let lCount = 0; lCount <= 3; lCount++) {
            lByte = (lValue >>> (lCount * 8)) & 255;
            WordToHexValueTemp = "0" + lByte.toString(16);
            WordToHexValue = WordToHexValue + WordToHexValueTemp.substr(WordToHexValueTemp.length - 2, 2);
        }
        return WordToHexValue;
    }
    uTF8Encode(string) {
        string = string.replace(/\x0d\x0a/g, "\x0a");
        let output = "";
        for (let n = 0; n < string.length; n++) {
            let c = string.charCodeAt(n);
            if (c < 128) {
                output += String.fromCharCode(c);
            } else if (c > 127 && c < 2048) {
                output += String.fromCharCode((c >> 6) | 192);
                output += String.fromCharCode((c & 63) | 128);
            } else {
                output += String.fromCharCode((c >> 12) | 224);
                output += String.fromCharCode(((c >> 6) & 63) | 128);
                output += String.fromCharCode((c & 63) | 128);
            }
        }
        return output;
    }
    res(string) {
        let x = [];
        let AA, BB, CC, DD;
        let S11 = 7;
        let S12 = 12;
        let S13 = 17;
        let S14 = 22;
        let S21 = 5;
        let S22 = 9;
        let S23 = 14;
        let S24 = 20;
        let S31 = 4;
        let S32 = 11;
        let S33 = 16;
        let S34 = 23;
        let S41 = 6;
        let S42 = 10;
        let S43 = 15;
        let S44 = 21;
        string = this.uTF8Encode(string);
        x = this.convertToWordArray(string);
        let a = 0x67452301;
        let b = 0xefcdab89;
        let c = 0x98badcfe;
        let d = 0x10325476;
        for (let k = 0; k < x.length; k += 16) {
            AA = a;
            BB = b;
            CC = c;
            DD = d;
            a = this.FF(a, b, c, d, x[k + 0], S11, 0xd76aa478);
            d = this.FF(d, a, b, c, x[k + 1], S12, 0xe8c7b756);
            c = this.FF(c, d, a, b, x[k + 2], S13, 0x242070db);
            b = this.FF(b, c, d, a, x[k + 3], S14, 0xc1bdceee);
            a = this.FF(a, b, c, d, x[k + 4], S11, 0xf57c0faf);
            d = this.FF(d, a, b, c, x[k + 5], S12, 0x4787c62a);
            c = this.FF(c, d, a, b, x[k + 6], S13, 0xa8304613);
            b = this.FF(b, c, d, a, x[k + 7], S14, 0xfd469501);
            a = this.FF(a, b, c, d, x[k + 8], S11, 0x698098d8);
            d = this.FF(d, a, b, c, x[k + 9], S12, 0x8b44f7af);
            c = this.FF(c, d, a, b, x[k + 10], S13, 0xffff5bb1);
            b = this.FF(b, c, d, a, x[k + 11], S14, 0x895cd7be);
            a = this.FF(a, b, c, d, x[k + 12], S11, 0x6b901122);
            d = this.FF(d, a, b, c, x[k + 13], S12, 0xfd987193);
            c = this.FF(c, d, a, b, x[k + 14], S13, 0xa679438e);
            b = this.FF(b, c, d, a, x[k + 15], S14, 0x49b40821);
            a = this.GG(a, b, c, d, x[k + 1], S21, 0xf61e2562);
            d = this.GG(d, a, b, c, x[k + 6], S22, 0xc040b340);
            c = this.GG(c, d, a, b, x[k + 11], S23, 0x265e5a51);
            b = this.GG(b, c, d, a, x[k + 0], S24, 0xe9b6c7aa);
            a = this.GG(a, b, c, d, x[k + 5], S21, 0xd62f105d);
            d = this.GG(d, a, b, c, x[k + 10], S22, 0x2441453);
            c = this.GG(c, d, a, b, x[k + 15], S23, 0xd8a1e681);
            b = this.GG(b, c, d, a, x[k + 4], S24, 0xe7d3fbc8);
            a = this.GG(a, b, c, d, x[k + 9], S21, 0x21e1cde6);
            d = this.GG(d, a, b, c, x[k + 14], S22, 0xc33707d6);
            c = this.GG(c, d, a, b, x[k + 3], S23, 0xf4d50d87);
            b = this.GG(b, c, d, a, x[k + 8], S24, 0x455a14ed);
            a = this.GG(a, b, c, d, x[k + 13], S21, 0xa9e3e905);
            d = this.GG(d, a, b, c, x[k + 2], S22, 0xfcefa3f8);
            c = this.GG(c, d, a, b, x[k + 7], S23, 0x676f02d9);
            b = this.GG(b, c, d, a, x[k + 12], S24, 0x8d2a4c8a);
            a = this.HH(a, b, c, d, x[k + 5], S31, 0xfffa3942);
            d = this.HH(d, a, b, c, x[k + 8], S32, 0x8771f681);
            c = this.HH(c, d, a, b, x[k + 11], S33, 0x6d9d6122);
            b = this.HH(b, c, d, a, x[k + 14], S34, 0xfde5380c);
            a = this.HH(a, b, c, d, x[k + 1], S31, 0xa4beea44);
            d = this.HH(d, a, b, c, x[k + 4], S32, 0x4bdecfa9);
            c = this.HH(c, d, a, b, x[k + 7], S33, 0xf6bb4b60);
            b = this.HH(b, c, d, a, x[k + 10], S34, 0xbebfbc70);
            a = this.HH(a, b, c, d, x[k + 13], S31, 0x289b7ec6);
            d = this.HH(d, a, b, c, x[k + 0], S32, 0xeaa127fa);
            c = this.HH(c, d, a, b, x[k + 3], S33, 0xd4ef3085);
            b = this.HH(b, c, d, a, x[k + 6], S34, 0x4881d05);
            a = this.HH(a, b, c, d, x[k + 9], S31, 0xd9d4d039);
            d = this.HH(d, a, b, c, x[k + 12], S32, 0xe6db99e5);
            c = this.HH(c, d, a, b, x[k + 15], S33, 0x1fa27cf8);
            b = this.HH(b, c, d, a, x[k + 2], S34, 0xc4ac5665);
            a = this.II(a, b, c, d, x[k + 0], S41, 0xf4292244);
            d = this.II(d, a, b, c, x[k + 7], S42, 0x432aff97);
            c = this.II(c, d, a, b, x[k + 14], S43, 0xab9423a7);
            b = this.II(b, c, d, a, x[k + 5], S44, 0xfc93a039);
            a = this.II(a, b, c, d, x[k + 12], S41, 0x655b59c3);
            d = this.II(d, a, b, c, x[k + 3], S42, 0x8f0ccc92);
            c = this.II(c, d, a, b, x[k + 10], S43, 0xffeff47d);
            b = this.II(b, c, d, a, x[k + 1], S44, 0x85845dd1);
            a = this.II(a, b, c, d, x[k + 8], S41, 0x6fa87e4f);
            d = this.II(d, a, b, c, x[k + 15], S42, 0xfe2ce6e0);
            c = this.II(c, d, a, b, x[k + 6], S43, 0xa3014314);
            b = this.II(b, c, d, a, x[k + 13], S44, 0x4e0811a1);
            a = this.II(a, b, c, d, x[k + 4], S41, 0xf7537e82);
            d = this.II(d, a, b, c, x[k + 11], S42, 0xbd3af235);
            c = this.II(c, d, a, b, x[k + 2], S43, 0x2ad7d2bb);
            b = this.II(b, c, d, a, x[k + 9], S44, 0xeb86d391);
            a = this.addUnsigned(a, AA);
            b = this.addUnsigned(b, BB);
            c = this.addUnsigned(c, CC);
            d = this.addUnsigned(d, DD);
        }
        let tempValue = this.wordToHex(a) + this.wordToHex(b) + this.wordToHex(c) + this.wordToHex(d);
        return tempValue.toLowerCase();
    }
}
let md5 = new Md5Class();

function testMd5() {
    let startTick = Date.now() / 1000;
    let result = "测试文本字符串测试文本字符串测试文本字符串";
    for (let i = 0; i< 1e6; ++i) {
        result = md5.res(result+i);
    }
    console.log(result);
    let endTick = Date.now() / 1000; 
    console.log(endTick - startTick);
}

testMd5();

还有就是对于React Hooks写法, 个人感觉,
会导致代码更凌乱, 结构层次不清晰, 可读性和可维护性下降.

小松鼠举栗子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js闭包模拟class
weixin_34107739的博客
07-17 396
为什么80%的码农都做不了架构师？>>> ...
es5中的闭包
huakaiwuxing的博客
10-30 651
需求：点击按钮，对应打印第几个按钮被点击 <button>按钮一</button> <button>按钮二</button> <button>按钮三</button> <button>按钮四</button> <button>按钮五</button> 错误写法： ...
JS类的闭包写法
weixin_34308389的博客
05-31 355
2019独角兽企业重金招聘Python工程师标准>>> ...
Javascript知识总结--ES6 类对象，闭包
Harryの心阁
03-09 286
文章目录ES6 类类的继承super关键字ES6类和对象要注意的问题面向对象案例构造函数的缺点constructor 构造函数原型链this指向扩展内置对象call()借用构造函数继承父类属性借用构造函数继承父类方法ES5新增方法字符串方法对象方法函数的定义方法函数的调用方式改变函数内部的this的指向严格模式高阶函数闭包（Closure）案例获取元素索引号，打印元素的内容类似案例打车价格闭包思考重点 来源博客：【Harryの心阁】 ES6 类 创建类 class Star { constructor
JavaScript ES6和ES5的闭包
谢萌新
08-03 487
JavaScript ES6和ES5的闭包的语法的小不同
React中ES5与ES6写法的区别总结
08-30
在 React 中，ES5 和 ES6 两种写法是开发者最常用的两种方式。这两种方式有着很大的区别，了解这两种方式的区别对开发者来说非常重要。 首先，lets 看看模块引用。在 ES5 中，如果使用 CommonJS 标准，引入 React ...
ES6_Study:ES5和ES6学习工件
04-29
ES6_Study ES6和ES5审查资料库
JavaScript ES6 Class类实现原理详解
10-15
主要介绍了JavaScript ES6 Class类实现原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
es6-class:ES6 类编译为 ES5
07-03
编译使用 ES6 类编写的 JavaScript 以使用与 ES5 兼容的函数语法。 例如，这个： class Person { constructor ( firstName , lastName ) { this . firstName = firstName ; this . lastName = lastName ; } ...
详解设置Webstorm 利用babel将ES6自动转码成ES5
08-28
在这篇文章中，我们将学习如何在Webstorm中使用babel将ES6代码自动转换为ES5代码，以便在浏览器中使用最新的JavaScript特性。 首先，需要了解的是ECMAScript 6（简称ES6）是JavaScript语言的下一代标准，已经在2015...
JavaScript-ES6面向对象与闭包
0117
05-21 832
文章目录1.变量(1)var的几个问题2.作用域3.函数4.自带对象5.异步处理 1.变量 (1)var的几个问题 像学过java或者scala等其他语言的人，都知道，变量只能声明一次，无法重复声明。而重复声明所带来的问题就是报错了不知道哪一个参数是最后一次声明的，维护效果不好。 没有块级别的作用域，不过这个一直都没有 不能进行限制，意思是说，像C，我们又define定义宏，java有stati...
ES6详解三：class
热门推荐
言川的博客
09-17 3万+
class是es6引入的最重要特性之一。在没有class之前，我们只能通过原型链来模拟类。基本用法如果你用过java这样的纯面向对象语言，那么你会对class的语法非常熟悉。class People { constructor(name) { //构造函数 this.name = name; } sayName() { console.
ES5作用域闭包
cjexe的博客
08-04 212
函数声明 函数表达式 区别是函数声明 可以提升，函数表达式不能提升函数，函数表达式只是个变量提升而不是函数提升 //var fn1 = undefined //这是var的变量声明的提升 //var a = undefined // 这是var的变量声明的提升 fn()//可执行 function fn(){ //函数声明 } fn1()//undefined var fn1 = functi...
函数作用域
m0_64749865的博客
08-18 162
函数作用域
闭包js闭包javaScript闭包es5闭包
angrynouse的博客
06-27 166
es5作用域：全局作用域 + 函数级别作用域 闭包：一个函数内部的函数叫做闭包。相当于函数内部与外界连接的桥梁。 闭包解决的问题：a 帮助函数外部读取函数级别作用域中的变量 而存在。b 变量的值始终保存在内存中。 不能滥用闭包：闭包会使函数中的变量始终保存在内存中，内存消耗大，滥用闭包会对网页性能有影响。 2.7 闭包–解决循环变量问题 2.8 闭包中的this 闭包中的this默认情况下指向window.........
一分钟理解JavaScript的闭包
蒋宗正的博客
01-18 91
一、用案例了解闭包 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="show">0</div> <button>增加</button> <script> let show = do
如何在 JavaScript 中使用闭包——初学者指南
Meta.Qing的博客
09-09 568
当然，在不使用我们定义的函数的情况下编写程序是可能的——虽然很困难，但也是可能的。“自然”的选择是将这段代码放在一起，形成一个可复用的集合，而这个可复用的集合就是我们所说的函数。在这个简化的示例中，我们创建了一个函数，该函数接收您要显示的标题并返回另一个满足 RenderItem 作为道具接收的函数定义的函数。但是，当您创建解决方案时，了解它们的存在以及它们的实际工作方式会开启新的可能性。这个想法是将您的模块“包装”在一个立即执行的函数中。这是函数创建函数或对象的时候，例如，允许您创建用户对象的函数。
ES5中作用域链、闭包、this的理解
Andy·Wu的专栏
03-15 257
先记住口诀： （1）作用域链实际上是对象列表，其中每个对象表示一个作用域，其中的属性即为变量名 （2）当函数作为对象的方法调用时，其内的 this 指向该对象；当函数只作为函数调用时， 其内的 this 为 window （非严格模式） 或 undefined（严格模式）。[参考：《JavaScript权威指南》] 下面通过具体的案例来理解上面两句话的含义： 代码1： for (var i = 0...
ES5关于闭包/作用域的理解
渣渣飞的博客
10-27 552
ES5关于闭包/作用域的理解作用域理解：分类：作用举例如何判断作用域的个数作用域的作用作用域与执行上下文的区别区别1区别2联系 作用域 理解： 就是一块"地盘"，，一个代码所在的区域 它是静态的(相对于上下文对象)，在编写代码时就确定了 分类： 全局作用域 函数作用域 ES5没有块作用域（ES6有了） 作用 隔离变量，不同作用域下同名变量不会有冲突 举例 if(true){ v...
es6 forEact写法
最新发布
11-25
ES6中的forEach()方法可以用于遍历数组中的每个元素，并对每个元素执行回调函数。以下是ES6 forEach()方法的示例： ```javascript let arr = [1, 2, 3, 4, 5]; arr.forEach((item, index) => { console.log(`元素 ${item} 的索引是 ${index}`); }); ``` 上述代码将输出以下内容： ``` 元素 1 的索引是 0 元素 2 的索引是 1 元素 3 的索引是 2 元素 4 的索引是 3 元素 5 的索引是 4 ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值