{"id":1832,"date":"2020-08-21T19:23:44","date_gmt":"2020-08-21T11:23:44","guid":{"rendered":"https:\/\/www.yumefx.com\/?p=1832"},"modified":"2021-03-02T12:18:25","modified_gmt":"2021-03-02T04:18:25","slug":"js%e5%8c%bf%e5%90%8d%e5%87%bd%e6%95%b0%e4%b8%8e%e5%8f%98%e9%87%8f%e4%bd%9c%e7%94%a8%e5%9f%9f","status":"publish","type":"post","link":"https:\/\/www.yumefx.com\/?p=1832","title":{"rendered":"JS\u533f\u540d\u51fd\u6570\u4e0e\u53d8\u91cf\u4f5c\u7528\u57df"},"content":{"rendered":"\n

\u533f\u540d\u51fd\u6570<\/h1>\n

\u5728JavaScript\u8fd9\u95e8\u811a\u672c\u8bed\u8a00\u4e2d\uff0c\u9ed8\u8ba4\u7684\u5b9a\u4e49\u51fd\u6570\u683c\u5f0f\u5982\u4e0b\uff1a<\/p>\n\n\n\n

\nfunction fn(a,b){<\/span>\n    console.log(a+b);<\/span>\n}<\/span>\n<\/pre>\n\n\n\n
\u67d0\u4e9b\u60c5\u51b5\u4e0b\u5b9a\u4e49\u51fd\u6570\u65f6\u4f1a\u7701\u7565\u6389\u51fd\u6570\u540d\u79f0\u5982\u4e0b\uff1a<\/p>\n\n\n\n
\nfunction (a,b){<\/span>\n    console.log(a+b);<\/span>\n}<\/span>\n<\/pre>\n\n\n\n
\u8fd9\u6837\u7684\u51fd\u6570\u5c31\u53eb\u505a\u533f\u540d\u51fd\u6570\u3002<\/p>\n
\u800c\u4f17\u6240\u5468\u77e5\uff0c\u51fd\u6570\u662f\u901a\u8fc7\u51fd\u6570\u540d\u6765\u8c03\u7528\u7684\uff0c\u5f53\u6ca1\u6709\u540d\u5b57\u65f6\u8be5\u5982\u4f55\u8c03\u7528\uff0c\u7528\u5728\u4ec0\u4e48\u5730\u65b9\u5462\uff1f<\/p>\n
\u00a0<\/h3>\n
\u8c03\u7528\u65b9\u5f0f<\/h3>\n
\u4e00\uff1a\u653e\u8fdb\u53d8\u91cf\u4e2d<\/h5>\n\n\n\n
\nlet myfn = function(a,b) {<\/span>\nconsole.log(a+b);<\/span>\n};<\/span>\nmyfn(1,2);<\/span>\n<\/pre>\n\n\n\n
\u8fd9\u6837\u4e00\u6765\uff0c\u8fd9\u4e2a\u53d8\u91cf\u5c31\u76f8\u5f53\u4e8e\u51fd\u6570\u540d\uff0c\u56e0\u6b64\u8fd9\u4e2a\u51fd\u6570\u5c31\u7b49\u4e8e\u662f\u4e2a\u666e\u901a\u51fd\u6570\u4e86<\/p>\n
\u00a0<\/h5>\n
\u4e8c\uff1a\u76f4\u63a5\u6267\u884c<\/h5>\n
\u5e38\u7528\u65b9\u5f0f<\/p>\n
    \n
  • (\u533f\u540d\u51fd\u6570)()<\/li>\n
  • (\u533f\u540d\u51fd\u6570())<\/li>\n<\/ul>\n\n\n\n
    \n(function(a,b){<\/span>\n    console.log(a+b);<\/span>\n})(1,2)<\/span>\n<\/span>\n(function(a,b){<\/span>\n    console.log(a+b);<\/span>\n}(1,2))<\/span>\n<\/pre>\n\n\n\n
    \u00a0<\/h5>\n
    \u4e09\uff1a\u5229\u7528\u4e8b\u4ef6\u8c03\u7528<\/h5>\n\n\n\n
    \nlet btn = document.getElementById("btn");<\/span>\nbtn.onclick = function() {<\/span>\n    console.log("clicked!");<\/span>\n}<\/span>\n<\/pre>\n\n\n\n
    \u00a0<\/h5>\n
    \u56db\uff1a\u4f5c\u4e3a\u5bf9\u8c61\u7684\u65b9\u6cd5\u8c03\u7528<\/h5>\n\n\n\n
    \nlet myobj = {<\/span>\n    name:"yumefx",<\/span>\n    hello:function(){<\/span>\n        console.log("hello,"+this.name);<\/span>\n    }<\/span>\n};<\/span>\nmyobj.hello();<\/span>\n<\/pre>\n\n\n\n
    \u8fd9\u79cd\u65b9\u6cd5\u4e0e\u7b2c\u4e00\u79cd\u65b9\u6cd5\u8d4b\u4e88\u53d8\u91cf\u7c7b\u4f3c\u3002<\/p>\n
    \u00a0<\/h5>\n
    \u4e94\uff1a\u4f5c\u4e3a\u53e6\u4e00\u4e2a\u51fd\u6570\u7684\u53c2\u6570<\/h5>\n\n\n\n
    \nfunction myfn(fn){<\/span>\n    fn();<\/span>\n}<\/span>\n<\/span>\nmyfn(function(){<\/span>\n    console.log("yes");<\/span>\n});<\/span>\n<\/pre>\n\n\n\n
    \u00a0<\/h1>\n
    \u53d8\u91cf\u4f5c\u7528\u57df<\/h1>\n
    \u5728ES6\u4e4b\u524d\uff0c\u5f53\u4f7f\u7528var\u58f0\u660e\u53d8\u91cf\u65f6\uff0c\u53ea\u6709\u5168\u5c40\u4f5c\u7528\u57df\u548c\u51fd\u6570\u4f5c\u7528\u57df\u3002<\/p>\n
    \u4ee5\u51fd\u6570\u58f0\u660e\u4e3a\u754c\uff0c\u51fd\u6570\u5185\u90e8\u53d8\u91cf\u548c\u5916\u90e8\u53d8\u91cf\u662f\u4e24\u4e2a\u4e0d\u540c\u7684\u4f5c\u7528\u57df\uff0c\u5185\u90e8\u58f0\u660e\u7684\u53d8\u91cf\u4e0d\u53ef\u4ee5\u5728\u5916\u90e8\u88ab\u8bbf\u95ee\uff0c\u800c\u5185\u90e8\u53ef\u4ee5\u8c03\u7528\u548c\u8986\u76d6\u5916\u90e8\u58f0\u660e\u7684\u6240\u6709\u53d8\u91cf\uff0c\u5373\u4f7f\u5916\u5c42\u51fd\u6570\u5df2\u7ecf\u6267\u884c\u5b8c\u6bd5\uff08\u4f5c\u7528\u57df\u5d4c\u5957\uff09\u3002<\/p>\n\n\n\n
    \nvar tmp = new Date();<\/span>\nfunction f() {<\/span>\n    console.log(tmp);<\/span>\n    if (false){<\/span>\n        var tmp = "hello";<\/span>\n    }<\/span>\n}<\/span>\n<\/span>\nf(); \/\/undefined<\/span>\n<\/pre>\n\n\n\n
    \u8fd9\u6bb5\u4ee3\u7801\u4e2d\uff0cif\u4ee3\u7801\u5757\u7684\u5916\u90e8\u4f7f\u7528\u5916\u5c42\u7684tmp\u53d8\u91cf\uff0c\u5185\u90e8\u4f7f\u7528\u5185\u5c42\u7684tmp\u53d8\u91cf\u3002\u4f46\u662f\u7531\u4e8e\u53d8\u91cf\u63d0\u5347\uff0c\u5bfc\u81f4\u5185\u5c42\u7684tmp\u53d8\u91cf\u8986\u76d6\u4e86\u5916\u5c42\u7684tmp\u53d8\u91cf\u3002<\/p>\n
    \u6240\u8c13\u53d8\u91cf\u63d0\u5347\uff0c\u5c31\u662f\u5c06\u51fd\u6570\u548c\u53d8\u91cf\u7684\u58f0\u660e\u63d0\u5347\u5230\u5f53\u524d\u4f5c\u7528\u57df\u7684\u6700\u9876\u7aef\uff0c\u56e0\u6b64\u8981\u60f3\u53d8\u91cf\u4e0d\u662f\u5168\u5c40\u53d8\u91cf\uff0c\u90a3\u4e48\u5c31\u5f97\u7528\u51fd\u6570\u5305\u8d77\u6765\u3002\u53d8\u91cf\u63d0\u5347\u7684\u7ed3\u679c\u5c31\u662f\u58f0\u660e\u7684\u53d8\u91cf\u5728\u58f0\u660e\u524d\u8c03\u7528\u503c\u4e3aundefined\u800c\u4e0d\u4f1a\u62a5\u9519\u3002<\/p>\n
    \u9664\u6b64\u4ee5\u5916\u8fd8\u6709\u5185\u5b58\u6cc4\u6f0f\u95ee\u9898\uff0c\u4f8b\u5982\u7528\u6765\u8ba1\u6570\u7684\u5faa\u73af\u53d8\u91cf\u6cc4\u9732\u4e3a\u5168\u5c40\u53d8\u91cf\u3002<\/p>\n\n\n\n
    \nvar s = "hello";<\/span>\nfor (var i = 0; i < s.length; i++){<\/span>\n    console.log(s[i]);<\/span>\n}<\/span>\nconsole.log(i);<\/span>\n<\/pre>\n\n\n\n
    \u5728ES6\u4e4b\u540e\uff0c\u6709\u4e86\u4e00\u4e2a\u65b0\u7684\u53d8\u91cf\u58f0\u660e\u7b26\u53f7let\uff0c\u53ef\u4ee5\u58f0\u660e\u5757\u7ea7\u4f5c\u7528\u57df\uff0c\u53ea\u6709\u5728\u5f53\u524d\u4ee3\u7801\u5757\u5185\u6709\u6548\uff0c\u5e76\u4e14\u65e0\u6cd5\u5728\u58f0\u660e\u524d\u8c03\u7528\uff08let\u4e0d\u5b58\u5728\u53d8\u91cf\u63d0\u5347\uff09\u3002<\/p>\n\n\n\n
    \na \/\/undefined<\/span>\n{<\/span>\n    var a = 1;<\/span>\n    let b = 2;<\/span>\n}<\/span>\na \/\/1<\/span>\nb \/\/ReferenceError: b is not defined.<\/span>\n<\/pre>\n\n\n\n
    \u53e6\u5916\uff0clet\u4e0d\u80fd\u5728\u540c\u4e00\u4f5c\u7528\u57df\u5185\uff0c\u91cd\u590d\u58f0\u660e\u540c\u4e00\u4e2a\u53d8\u91cf\uff0c\u4f8b\u5982\u4e0d\u80fd\u5728\u51fd\u6570\u5185\u90e8\u91cd\u65b0\u58f0\u660e\u4f20\u5165\u7684\u53c2\u6570\u3002\u56e0\u6b64\uff0c\u533f\u540d\u51fd\u6570\u7684\u95ed\u5305\u529f\u80fd\uff0c\u5176\u5b9e\u5c31\u662f\u5728let\u51fa\u73b0\u524d\uff0c\u5c06\u67d0\u4e9b\u53d8\u91cf\u53d8\u6210\u7c7b\u4f3c\u5757\u7ea7\u4f5c\u7528\u57df\u7684\u65b9\u5f0f\u3002<\/p>\n
    \u4f18\u70b9\u662f\u53ef\u4ee5\u9632\u6b62\u5185\u90e8\u53d8\u91cf\u6c61\u67d3\u5916\u90e8\u53d8\u91cf\uff0c\u4f46\u8981\u5c0f\u5fc3this\u6307\u5411\u3001\u53d8\u91cf\u4f5c\u7528\u57df\u3001\u5185\u5b58\u6cc4\u6f0f\u7b49\u95ee\u9898\u3002<\/p>\n
    \u00a0<\/h3>\n
    this\u6307\u5411<\/h3>\n\n\n\n
    \nvar object = {<\/span>\n    name: "object",<\/span>\n    getName: function() {<\/span>\n        return function() {<\/span>\n            console.info(this.name)<\/span>\n        }<\/span>\n    }<\/span>\n}<\/span>\nobject.getName()() \/\/undefined<\/span>\n<\/pre>\n\n\n\n
    \u56e0\u4e3a\u91cc\u9762\u7684\u95ed\u5305\u51fd\u6570\u662f\u5728windows\u4f5c\u7528\u57df\u4e0b\u6267\u884c\u7684\uff0c\u56e0\u6b64\uff0cthis\u6307\u5411windows\u3002<\/p>\n
    \u00a0<\/h3>\n
    \u53d8\u91cf\u4f5c\u7528\u57df<\/h3>\n\n\n\n
    \nfunction outer() {<\/span>\n    var result = [];<\/span>\n    for (var i = 0; i < 10; i++){<\/span>\n        result[i] = function() {<\/span>\n            console.info(i)<\/span>\n        }<\/span>\n    }<\/span>\n    return result;<\/span>\n}<\/span>\n<\/pre>\n\n\n\n
    \u770b\u8d77\u6765\u4f3c\u4e4e\u662f\u8f93\u51fa\u7b49\u5dee\u6570\u52170,1,2,3,4,…,9\uff0c\u5b9e\u9645\u4e0a\u56e0\u4e3a\u6bcf\u4e2a\u95ed\u5305\u51fd\u6570\u8bbf\u95ee\u53d8\u91cfi\u662fouter\u6267\u884c\u73af\u5883\u4e0b\u7684\u53d8\u91cfi\uff0c\u968f\u7740\u5faa\u73af\u7684\u7ed3\u675f\uff0ci\u5df2\u7ecf\u53d8\u621010\u4e86\uff0c\u6240\u4ee5\u6700\u540e\u6253\u5370\u51fa\u7684\u662f10,10,10,…,10<\/p>\n
    \u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\u5982\u4e0b\uff1a<\/p>\n\n\n\n
    \nfunction outer() {<\/span>\n    var result = [];<\/span>\n    for (var i = 0; i < 10; i++){<\/span>\n        result[i] = function(num) {<\/span>\n            return function() {<\/span>\n                console.info(num)<\/span>\n            }<\/span>\n        }<\/span>\n    }<\/span>\n    return result;<\/span>\n}<\/span>\n<\/pre>\n\n\n\n
    \u8fd9\u6837\u8bbf\u95ee\u7684num\uff0c\u662f\u4e0a\u5c42\u51fd\u6570\u6267\u884c\u73af\u5883\u7684num\uff0c\u6570\u7ec4\u670910\u4e2a\u51fd\u6570\u5bf9\u8c61\uff0c\u6bcf\u4e2a\u5bf9\u8c61\u7684\u6267\u884c\u73af\u5883\u4e0b\u7684number\u90fd\u4e0d\u4e00\u6837\u3002<\/p>\n
    \u00a0<\/h3>\n
    \u5185\u5b58\u6ea2\u51fa<\/h3>\n\n\n\n
    \nfunction showId() {<\/span>\n    var el = document.getElementById("app");<\/span>\n    el.onclick = function(){<\/span>\n        alert(el.id);<\/span>\n    }<\/span>\n}<\/span>\n<\/pre>\n\n\n\n
    \u4e0a\u9762\u8fd9\u6837\u5199\u4f1a\u5bfc\u81f4\u95ed\u5305\u5f15\u7528\u5916\u5c42\u7684el\uff0c\u5f53\u6267\u884c\u5b8calert\u540e\uff0cel\u65e0\u6cd5\u91ca\u653e\u5185\u5b58\u3002\u4fee\u6539\u5982\u4e0b\uff1a<\/p>\n\n\n\n
    \nfunction showId() {<\/span>\n    var el = document.getElementById("app");<\/span>\n    el.onclick = function(){<\/span>\n        alert(el.id);<\/span>\n    }<\/span>\n    el = null; \/\/\u4e3b\u52a8\u91ca\u653eel<\/span>\n}<\/span>\n<\/pre>\n\n\n\n
    \u00a0<\/h3>\n
    \u4f7f\u7528\u95ed\u5305\u89e3\u51b3\u9012\u5f52\u8c03\u7528\u95ee\u9898<\/h3>\n\n\n\n
    \nfunction factorial(num) {<\/span>\n    if(num <= 1) {<\/span>\n        return 1;<\/span>\n    }else{<\/span>\n        return num * factorial(num-1);<\/span>\n    }<\/span>\n}<\/span>\nvar anotherFactorial = factorial;<\/span>\nfactorial = null;<\/span>\nanotherFactorial(4);<\/span>\n<\/pre>\n\n\n\n
    \u8fd9\u6837\u5199\u662f\u6709\u95ee\u9898\u7684\uff0c\u56e0\u4e3a\u6700\u540e\u662freturn num* argument.callee(num-1)\uff0cargument.callee\u6307\u5411\u5f53\u524d\u6267\u884c\u51fd\u6570\uff0c\u4f46\u662f\u5728\u4e25\u683c\u6a21\u5f0f\u4e0b\u4e0d\u80fd\u4f7f\u7528\u8be5\u5c5e\u6027\u4e5f\u4f1a\u62a5\u9519\u3002<\/p>\n
    \u501f\u52a9\u95ed\u5305\u5b9e\u73b0\u4fee\u6539\u5982\u4e0b\uff1a<\/p>\n\n\n\n
    \nfunction factorial = (function f(num) {<\/span>\n    if(num <= 1) {<\/span>\n        return 1;<\/span>\n    }else{<\/span>\n        return num * factorial(num-1);<\/span>\n    }<\/span>\n})<\/span>\n<\/pre>\n\n\n\n
    \u8fd9\u6837\u5b9e\u9645\u8d77\u4f5c\u7528\u7684\u662f\u95ed\u5305\u51fd\u6570f\uff0c\u800c\u4e0d\u662f\u5916\u9762\u7684\u51fd\u6570factorial\u3002<\/p>\n
    \u00a0<\/p>\n\n\n\n
    \n\n\n\n
    \u6bcf\u4e2a\u4eba\u90fd\u7ecf\u5386\u7740\u53d7\u9a97\u548c\u4f24\u75db\uff0c<\/p>\n
    \u6700\u7ec8\u638c\u63e1\u4e86\u5728\u8fd9\u6761\u8857\u9053\u751f\u6d3b\u4e0b\u53bb\u7684\u672c\u9886\u3002<\/p>\n
    \u300a\u6211\u7684\u6643\u8361\u7684\u9752\u6625\u300b<\/p>\n
    \u2014\u2014\u4e1c\u91ce\u572d\u543e<\/p>\n\n\n\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    \u533f\u540d\u51fd\u6570 \u5728JavaScript\u8fd9\u95e8\u811a\u672c\u8bed\u8a00\u4e2d\uff0c\u9ed8\u8ba4\u7684\u5b9a\u4e49\u51fd\u6570\u683c\u5f0f\u5982\u4e0b\uff1a function fn(a,b){  […]<\/p>\n","protected":false},"author":1,"featured_media":1833,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18,4],"tags":[42,34,14,22],"_links":{"self":[{"href":"https:\/\/www.yumefx.com\/index.php?rest_route=\/wp\/v2\/posts\/1832"}],"collection":[{"href":"https:\/\/www.yumefx.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yumefx.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yumefx.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yumefx.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1832"}],"version-history":[{"count":0,"href":"https:\/\/www.yumefx.com\/index.php?rest_route=\/wp\/v2\/posts\/1832\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yumefx.com\/index.php?rest_route=\/wp\/v2\/media\/1833"}],"wp:attachment":[{"href":"https:\/\/www.yumefx.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yumefx.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yumefx.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}