-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathJavaScript中的Object-freeze与const之间的区别-译.html
1 lines (1 loc) · 35.3 KB
/
JavaScript中的Object-freeze与const之间的区别-译.html
1
<!doctype html><html class="theme-next mist"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="google-site-verification" content="PBwskePkFkRAnqisXEBN7FyYihV0DkOHyvEC2eDt6Gg"><meta name="referrer" content="never"><script src="/lib/pace/pace.min.js?v=1.0.2"></script><link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="baidu-site-verification" content="haLEFmuOYV"><script>!function(e,t,o,c,i,a,n){e.DaoVoiceObject=i,e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},e[i].l=1*new Date,a=t.createElement(o),n=t.getElementsByTagName(o)[0],a.async=1,a.src=c,a.charset="utf-8",n.parentNode.insertBefore(a,n)}(window,document,"script",("https:"==document.location.protocol?"https:":"http:")+"//widget.daovoice.io/widget/0f81ff2f.js","daovoice"),daovoice("init",{app_id:"0f81ff2f"}),daovoice("update")</script><link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css"><link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/css/main.css?v=5.0.2" rel="stylesheet" type="text/css"><meta name="keywords" content="freeze, const"><link rel="alternate" href="/atom.xml" title="Moorez" type="application/atom+xml"><link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico?v=5.0.2"><meta name="description" content="原文：The differences between Object.freeze() vs Const in JavaScript作者：Bolaji Ayodeji本文经授权翻译转载，版权归原作者所有！"><meta name="keywords" content="freeze, const"><meta property="og:type" content="article"><meta property="og:title" content="JavaScript中的Object.freeze与const之间的区别(译)"><meta property="og:url" content="http://www.shenzekun.cn/JavaScript中的Object-freeze与const之间的区别-译.html"><meta property="og:site_name" content="Moorez"><meta property="og:description" content="原文：The differences between Object.freeze() vs Const in JavaScript作者：Bolaji Ayodeji本文经授权翻译转载，版权归原作者所有！"><meta property="og:image" content="http://upload-images.jianshu.io/upload_images/5308475-4434cacb12f965be.png&originHeight=1260&originWidth=1600&size=425448&status=done&width=800?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="http://upload-images.jianshu.io/upload_images/5308475-0474708e10fea495.png&originHeight=98&originWidth=423&size=8399&status=done&width=484?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="http://upload-images.jianshu.io/upload_images/5308475-c318c29169064851.png&originHeight=248&originWidth=731&size=26255&status=done&width=746?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="http://upload-images.jianshu.io/upload_images/5308475-c629ecec9f26bf27.png&originHeight=33&originWidth=592&size=4290&status=done&width=746?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="http://upload-images.jianshu.io/upload_images/5308475-423da13f0ab10e02.png&originHeight=289&originWidth=661&size=31952&status=done&width=746?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:image" content="http://upload-images.jianshu.io/upload_images/5308475-e21415d0c1d9bd1d.png&originHeight=428&originWidth=643&size=46108&status=done&width=746?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><meta property="og:updated_time" content="2019-05-31T04:03:49.982Z"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="JavaScript中的Object.freeze与const之间的区别(译)"><meta name="twitter:description" content="原文：The differences between Object.freeze() vs Const in JavaScript作者：Bolaji Ayodeji本文经授权翻译转载，版权归原作者所有！"><meta name="twitter:image" content="http://upload-images.jianshu.io/upload_images/5308475-4434cacb12f965be.png&originHeight=1260&originWidth=1600&size=425448&status=done&width=800?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"><script type="text/javascript" id="hexo.configuration">var NexT=window.NexT||{},CONFIG={scheme:"Mist",sidebar:{position:"left",display:"post"},fancybox:!0,motion:!1,duoshuo:{userId:"0",author:"Author"}}</script><link rel="canonical" href="http://www.shenzekun.cn/JavaScript中的Object-freeze与const之间的区别-译.html"><title>JavaScript中的Object.freeze与const之间的区别(译) | Moorez</title></head><body itemscope itemtype="//schema.org/WebPage" lang="zh-Hans"><div class="container one-collumn sidebar-position-left page-post-detail"><div class="headband"></div><a href="https://github.com/shenzekun" class="github-corner" aria-label="View source on Github"><svg width="92" height="92" viewBox="0 0 250 250" style="fill:#151513;color:#fff;position:absolute;top:0;border:0;right:0" aria-hidden="true"><path d="M0 0 115 115 130 115 142 142 250 250 250 0Z"></path><path d="M128.3 109C113.8 99.7 119 89.6 119 89.6 122 82.7 120.5 78.6 120.5 78.6 119.2 72 123.4 76.3 123.4 76.3 127.3 80.9 125.5 87.3 125.5 87.3 122.9 97.6 130.6 101.9 134.4 103.2" fill="currentColor" style="transform-origin:130px 106px" class="octo-arm"></path><path d="M115 115C114.9 115.1 118.7 116.5 119.8 115.4L133.7 101.6C136.9 99.2 139.9 98.4 142.2 98.6 133.8 88 127.5 74.4 143.8 58 148.5 53.4 154 51.2 159.7 51 160.3 49.4 163.2 43.6 171.4 40.1 171.4 40.1 176.1 42.5 178.8 56.2 183.1 58.6 187.2 61.8 190.9 65.4 194.5 69 197.7 73.2 200.1 77.6 213.8 80.2 216.3 84.9 216.3 84.9 212.7 93.1 206.9 96 205.4 96.6 205.1 102.4 203 107.8 198.3 112.5 181.9 128.9 168.3 122.5 157.7 114.1 157.9 116.9 156.7 120.9 152.7 124.9L141 136.5C139.8 137.7 141.6 141.9 141.8 141.8Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style><header id="header" class="header" itemscope itemtype="//schema.org/WPHeader"><div class="header-inner"><div class="site-meta"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title">Moorez</span><span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle"></p></div><div class="site-nav-toggle"><button><span class="btn-bar"></span><span class="btn-bar"></span><span class="btn-bar"></span></button></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br>首页</a></li><li class="menu-item menu-item-categories"><a href="/categories" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i><br>分类</a></li><li class="menu-item menu-item-about"><a href="/about" rel="section"><i class="menu-item-icon fa fa-fw fa-user"></i><br>关于</a></li><li class="menu-item menu-item-archives"><a href="/archives" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br>归档</a></li><li class="menu-item menu-item-tags"><a href="/tags" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i><br>标签</a></li><li class="menu-item menu-item-search"><a href="javascript:;" class="popup-trigger"><i class="menu-item-icon fa fa-search fa-fw"></i><br>搜索</a></li></ul><div class="site-search"><div class="popup"><span class="search-icon fa fa-search"></span> <input type="text" id="local-search-input"><div id="local-search-result"></div><span class="popup-btn-close">close</span></div></div></nav></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><div id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><link itemprop="mainEntityOfPage" href="http://www.shenzekun.cn/JavaScript中的Object-freeze与const之间的区别-译.html"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="shenzekun"><meta itemprop="description" content=""><meta itemprop="image" content="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/avatar1.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Moorez"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">JavaScript中的Object.freeze与const之间的区别(译)</h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i></span> <span class="post-meta-item-text">发表于</span> <time itemprop="dateCreated" datetime="2019-05-31T11:58:45+08:00" content="2019-05-31">2019-05-31</time></span> <span class="post-category"> | <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i></span> <span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a href="/categories/前端/" itemprop="url" rel="index"><span itemprop="name">前端</span></a></span></span> <span id="/JavaScript中的Object-freeze与const之间的区别-译.html" class="leancloud_visitors" data-flag-title="JavaScript中的Object.freeze与const之间的区别(译)"> | <span class="post-meta-item-icon"><i class="fa fa-eye"></i></span> <span class="post-meta-item-text">热度</span><span class="leancloud-visitors-count"></span> <span>℃</span></span><div class="post-wordcount"><span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i></span> <span class="post-meta-item-text">字数统计</span> <span title="字数统计">862 字</span> <span class="post-meta-divider">|</span><span class="post-meta-item-icon"><i class="fa fa-clock-o"></i></span> <span class="post-meta-item-text">阅读时长</span> <span title="阅读时长">4 分钟</span></div></div></header><div class="post-body" itemprop="articleBody"><hr><blockquote><p>原文：<a href="https://medium.com/@bolajiayodeji/the-differences-between-object-freeze-vs-const-in-javascript-4eacea534d7c" target="_blank" rel="external">The differences between Object.freeze() vs Const in JavaScript</a><br>作者：<a href="https://medium.com/@bolajiayodeji" target="_blank" rel="external">Bolaji Ayodeji</a><br><strong>本文经授权翻译转载，版权归原作者所有！</strong></p></blockquote><a id="more"></a><p><img src="http://upload-images.jianshu.io/upload_images/5308475-4434cacb12f965be.png&originHeight=1260&originWidth=1600&size=425448&status=done&width=800?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"></p><p>自ES6发布以来，ES6给JavaScript带来了一些新特性和方法。对于JavaScript开发者来说，这些特性能够很好地改善了我们的工作流程以及工作效率，其中的特性就包括 <code>Object.freeze()</code> 方法和 <code>const</code> 。</p><p>一些开发人员特别是新手们会认为这两个功能的工作方式是一样的，但其实并不是。 让我来告诉你<code>Object.freeze()</code> 和 <code>const</code> 是如何不同的。</p><h2 id="综述"><a href="#综述" class="headerlink" title="综述"></a>综述</h2><p><code>const</code> 和 <code>Object.freeze()</code> 完全不同。</p><ul><li><code>const</code> 的行为像 <code>let</code> 。它们唯一的区别是， <code>const</code> 定义了一个无法重新分配的变量。 通过 <code>const</code> 声明的变量是具有块级作用域的，而不是像 <code>var</code> 声明的变量具有函数作用域。</li><li><code>Object.freeze()</code> 接受一个对象作为参数，并返回一个相同的不可变的对象。这就意味着我们不能添加，删除或更改对象的任何属性。</li></ul><blockquote><p>可变对象的属性能够进行更改，而不可变对象在创建对象后不能更改其属性。</p></blockquote><h2 id="例子"><a href="#例子" class="headerlink" title="例子"></a>例子</h2><h3 id="const"><a href="#const" class="headerlink" title="const"></a>const</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> user = <span class="string">'Bolaji Ayodeji'</span></div><div class="line">user = <span class="string">'Joe Nash'</span></div></pre></td></tr></table></figure><p>这个例子会抛出一个<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function" target="_blank" rel="external">Uncaught TypeError</a>，因为我们正在尝试重新分配使用const关键字声明的变量user，这样做是无效的。</p><p><img src="http://upload-images.jianshu.io/upload_images/5308475-0474708e10fea495.png&originHeight=98&originWidth=423&size=8399&status=done&width=484?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"></p><p>这个例子中使用 let 或者 var 声明是能够正常工作的，但是使用 const 并不能。</p><h3 id="const-的问题"><a href="#const-的问题" class="headerlink" title="const 的问题"></a>const 的问题</h3><p>使用const声明的对象仅能阻止其重新分配，但是并不能使其声明的对象具有不可变性（能够阻止更改其属性）。</p><p>参考以下代码，我们使用const关键字声明了一个变量，并为其分配了一个名为user的对象。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> user = {</div><div class="line"> <span class="attr">first_name</span>: <span class="string">'bolaji'</span>,</div><div class="line"> <span class="attr">last_name</span>: <span class="string">'ayodeji'</span>,</div><div class="line"> <span class="attr">email</span>: <span class="string">'[email protected]'</span>,</div><div class="line"> <span class="attr">net_worth</span>: <span class="number">2000</span></div><div class="line">}</div><div class="line">user.last_name = <span class="string">'Samson'</span>;</div><div class="line"><span class="comment">// this would work, user is still mutable!</span></div><div class="line">user.net_worth = <span class="number">983265975975950</span>;</div><div class="line"><span class="comment">// this would work too, user is still mutable and getting rich :)!</span></div><div class="line"><span class="built_in">console</span>.log(user); <span class="comment">// user is mutated</span></div></pre></td></tr></table></figure><p><img src="http://upload-images.jianshu.io/upload_images/5308475-c318c29169064851.png&originHeight=248&originWidth=731&size=26255&status=done&width=746?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"></p><p>尽管我们无法重新分配这个名为 user 的变量，但是我们仍然可以改变其对象本身。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> user = {</div><div class="line"> <span class="attr">user_name</span>: <span class="string">'bolajiayodeji'</span></div><div class="line">}</div><div class="line"><span class="comment">// won't work</span></div></pre></td></tr></table></figure><p><img src="http://upload-images.jianshu.io/upload_images/5308475-c629ecec9f26bf27.png&originHeight=33&originWidth=592&size=4290&status=done&width=746?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"></p><p>我们肯定希望对象具有无法修改或删除的属性。 <code>const</code> 无法实现这样的功能，但是 <code>Object.freeze</code> 可以。</p><h3 id="Object-freeze"><a href="#Object-freeze" class="headerlink" title="Object.freeze()"></a>Object.freeze()</h3><p>要禁用对象的任何更改，我们需要使用 <code>Object.freeze()</code> 。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> user = {</div><div class="line"> <span class="attr">first_name</span>: <span class="string">'bolaji'</span>,</div><div class="line"> <span class="attr">last_name</span>: <span class="string">'ayodeji'</span>,</div><div class="line"> <span class="attr">email</span>: <span class="string">'[email protected]'</span>,</div><div class="line"> <span class="attr">net_worth</span>: <span class="number">2000</span></div><div class="line">}</div><div class="line"><span class="built_in">Object</span>.freeze(user);</div><div class="line">user.last_name = <span class="string">'Samson'</span>;</div><div class="line"><span class="comment">// this won't work, user is still immutable!</span></div><div class="line">user.net_worth = <span class="number">983265975975950</span>;</div><div class="line"><span class="comment">// this won't work too, user is still immutable and still broke :(!</span></div><div class="line"><span class="built_in">console</span>.log(user); <span class="comment">// user is immutated</span></div></pre></td></tr></table></figure><p><img src="http://upload-images.jianshu.io/upload_images/5308475-423da13f0ab10e02.png&originHeight=289&originWidth=661&size=31952&status=done&width=746?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"></p><h3 id="具有嵌套属性的对象实际上并未冻结"><a href="#具有嵌套属性的对象实际上并未冻结" class="headerlink" title="具有嵌套属性的对象实际上并未冻结"></a>具有嵌套属性的对象实际上并未冻结</h3><p><code>Object.freeze</code> 只是做了层浅冻结，当遇到具有嵌套属性的对象的时候，我们需要递归<code>Object.freeze</code> 来冻结具有嵌套属性的对象。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> user = {</div><div class="line"> <span class="attr">first_name</span>: <span class="string">'bolaji'</span>,</div><div class="line"> <span class="attr">last_name</span>: <span class="string">'ayodeji'</span>,</div><div class="line"> <span class="attr">contact</span>: {</div><div class="line"> <span class="attr">email</span>: <span class="string">'[email protected]'</span>,</div><div class="line"> <span class="attr">telephone</span>: <span class="number">08109445504</span>,</div><div class="line"> }</div><div class="line">}</div><div class="line"></div><div class="line"><span class="built_in">Object</span>.freeze(user);</div><div class="line">user.last_name = <span class="string">'Samson'</span>;</div><div class="line"><span class="comment">// this won't work, user is still immutable!</span></div><div class="line">user.contact.telephone = <span class="number">07054394926</span>;</div><div class="line"><span class="comment">// this will work because the nested object is not frozen</span></div><div class="line"><span class="built_in">console</span>.log(user);</div></pre></td></tr></table></figure><p><img src="http://upload-images.jianshu.io/upload_images/5308475-e21415d0c1d9bd1d.png&originHeight=428&originWidth=643&size=46108&status=done&width=746?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="image.png"></p><p>因此，当具有嵌套属性的对象时， <code>Object.freeze()</code> 并不能完全冻结对象。</p><p>要完全冻结具有嵌套属性的对象，您可以编写自己的库或使用已有的库来冻结对象，如<a href="https://github.com/substack/deep-freeze" target="_blank" rel="external">Deepfreeze</a> 或 <a href="https://github.com/immutable-js/immutable-js" target="_blank" rel="external">immutable-js</a></p><h2 id="结论"><a href="#结论" class="headerlink" title="结论"></a>结论</h2><p><code>const</code> 和 <code>Object.freeze()</code> 并不同， <code>const</code> 是防止变量重新分配，而 <code>Object.freeze()</code> 是使对象具有不可变性。</p><p>感谢阅读，干杯！</p></div><div><div><div style="text-align:center;color:#ccc;font-size:14px">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div></div></div><div><div class="my_post_copyright"><script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script><script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script><script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script><p><span>本文标题:</span><a href="/JavaScript中的Object-freeze与const之间的区别-译.html">JavaScript中的Object.freeze与const之间的区别(译)</a></p><p><span>文章作者:</span><a href="/" title="访问 shenzekun 的个人博客">shenzekun</a></p><p><span>发布时间:</span>2019年05月31日 - 11:58</p><p><span>最后更新:</span>2019年05月31日 - 12:03</p><p><span>原始链接:</span><a href="/JavaScript中的Object-freeze与const之间的区别-译.html" title="JavaScript中的Object.freeze与const之间的区别(译)">http://www.shenzekun.cn/JavaScript中的Object-freeze与const之间的区别-译.html</a><span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="http://www.shenzekun.cn/JavaScript中的Object-freeze与const之间的区别-译.html" aria-label="复制成功！"></i></span></p><p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p></div><script>var clipboard=new Clipboard(".fa-clipboard");$(".fa-clipboard").click(function(){clipboard.on("success",function(){swal({title:"",text:"复制成功",icon:"success",showConfirmButton:!0})})})</script></div><div></div><div><div style="padding:10px 0;margin:20px auto;width:90%;text-align:center"><div>您的支持将鼓励我继续创作！</div><button id="rewardButton" disable="enable" onclick='var qr=document.getElementById("QR");"none"===qr.style.display?qr.style.display="block":qr.style.display="none"'><span>赏</span></button><div id="QR" style="display:none"><div id="wechat" style="display:inline-block"><img id="wechat_qr" src="/image/wechat-reward-image.png" alt="shenzekun WeChat Pay"><p>微信打赏</p></div></div></div></div><footer class="post-footer"><div class="post-tags"><a href="/tags/js/" rel="tag"><i class="fa fa-tag"></i>js</a></div><div class="post-nav"><div class="post-nav-next post-nav-item"><a href="/Git-更新-commit-的内容和多个-commit-合并.html" rel="next" title="Git 更新 commit 的内容和多个 commit 合并"><i class="fa fa-chevron-left"></i> Git 更新 commit 的内容和多个 commit 合并</a></div><div class="post-nav-prev post-nav-item"><a href="/判断浏览器是否支持-webp-的几种解决方法.html" rel="prev" title="判断浏览器是否支持 webp 的几种解决方法">判断浏览器是否支持 webp 的几种解决方法<i class="fa fa-chevron-right"></i></a></div></div></footer></article><div class="post-spread"></div></div></div><div class="comments" id="comments"><div id="lv-container" data-id="city" data-uid="MTAyMC8yODgyMi81Mzky"></div></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span><span class="sidebar-toggle-line sidebar-toggle-line-middle"></span><span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">文章目录</li><li class="sidebar-nav-overview" data-target="site-overview">站点概览</li></ul><section class="site-overview sidebar-panel"><div class="site-author motion-element" itemprop="author" itemscope itemtype="//schema.org/Person"><img class="site-author-image" itemprop="image" src="https://blog-1257878287.cos.ap-chengdu.myqcloud.com/avatar1.jpg" alt="shenzekun"><p class="site-author-name" itemprop="name">shenzekun</p><p class="site-description motion-element" itemprop="description">Road endless its long and far, I will seek up and down！</p></div><nav class="site-state motion-element"><div class="site-state-item site-state-posts"><a href="/archives"><span class="site-state-item-count">39</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"><a href="/categories"><span class="site-state-item-count">6</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"><a href="/tags"><span class="site-state-item-count">19</span> <span class="site-state-item-name">标签</span></a></div></nav><div class="feed-link motion-element"><a href="/atom.xml" rel="alternate"><i class="fa fa-rss"></i> RSS</a></div><div class="links-of-author motion-element"><span class="links-of-author-item"><a href="https://github.com/shenzekun" target="_blank" rel="external nofollow" title="GitHub"><i class="fa fa-fw fa-github"></i> GitHub</a></span><span class="links-of-author-item"><a href="http://www.jianshu.com/u/b473784d730c" target="_blank" rel="external nofollow" title="简书"><i class="fa fa-fw fa-heartbeat"></i> 简书</a></span><span class="links-of-author-item"><a href="https://twitter.com/shenzekun" target="_blank" rel="external nofollow" title="Twitter"><i class="fa fa-fw fa-twitter"></i> Twitter</a></span><span class="links-of-author-item"><a href="https://segmentfault.com/u/juli_590dd17068b9e" target="_blank" rel="external nofollow" title="SegmentFault"><i class="fa fa-fw fa-meh-o"></i> SegmentFault</a></span><span class="links-of-author-item"><a href="http://blog.csdn.net/qq_33699981?viewmode=list" target="_blank" rel="external nofollow" title="csdn"><i class="fa fa-fw fa-crosshairs"></i> csdn</a></span><span class="links-of-author-item"><a href="https://juejin.im/user/5866ed77ac502e00612f1949" target="_blank" rel="external nofollow" title="掘金"><i class="fa fa-fw fa-spinner"></i> 掘金</a></span></div><div class="links-of-blogroll motion-element links-of-blogroll-inline"><div class="links-of-blogroll-title"><i class="fa fa-fw fa-globe"></i> 推荐阅读</div><ul class="links-of-blogroll-list"><li class="links-of-blogroll-item"><a href="http://www.uisdc.com/" title="优设" target="_blank">优设</a></li><li class="links-of-blogroll-item"><a href="http://www.zhangxinxu.com/" title="张鑫旭" target="_blank">张鑫旭</a></li><li class="links-of-blogroll-item"><a href="http://www.alloyteam.com/nav/" title="Web前端导航" target="_blank">Web前端导航</a></li><li class="links-of-blogroll-item"><a href="http://www.36zhen.com/t?id=3448" title="前端书籍资料" target="_blank">前端书籍资料</a></li><li class="links-of-blogroll-item"><a href="http://ife.baidu.com/" title="百度前端技术学院" target="_blank">百度前端技术学院</a></li><li class="links-of-blogroll-item"><a href="http://wf.uisdc.com/cn/" title="google前端开发基础" target="_blank">google前端开发基础</a></li></ul></div></section><section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"><div class="post-toc"><div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#综述"><span class="nav-number">1.</span> <span class="nav-text">综述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#例子"><span class="nav-number">2.</span> <span class="nav-text">例子</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#const"><span class="nav-number">2.1.</span> <span class="nav-text">const</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#const-的问题"><span class="nav-number">2.2.</span> <span class="nav-text">const 的问题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Object-freeze"><span class="nav-number">2.3.</span> <span class="nav-text">Object.freeze()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#具有嵌套属性的对象实际上并未冻结"><span class="nav-number">2.4.</span> <span class="nav-text">具有嵌套属性的对象实际上并未冻结</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#结论"><span class="nav-number">3.</span> <span class="nav-text">结论</span></a></li></ol></div></div></section></div></aside></div></main><footer id="footer" class="footer"><div class="footer-inner"><div class="copyright">© <span itemprop="copyrightYear">2020</span><span class="with-love"><i class="fa fa-heart"></i></span> <span class="author" itemprop="copyrightHolder">shenzekun</span></div><div class="theme-info"><i class="fa fa-pencil"></i> <span class="post-count">博客全站共 40.7k 字</span></div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script><script type="text/javascript" src="/js/src/utils.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/motion.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/scrollspy.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/post-details.js?v=5.0.2"></script><script type="text/javascript" src="/js/src/bootstrap.js?v=5.0.2"></script><script type="text/javascript">!function(e,t){var n,c=e.getElementsByTagName(t)[0];"function"!=typeof LivereTower&&((n=e.createElement(t)).src="https://cdn-city.livere.com/js/embed.dist.js",n.async=!0,c.parentNode.insertBefore(n,c))}(document,"script")</script><script type="text/javascript">function proceedsearch(){$("body").append('<div class="popoverlay">').css("overflow","hidden"),$(".popup").toggle()}var isfetched=!1,search_path="search.xml";0==search_path.length&&(search_path="search.xml");var path="/"+search_path,searchFunc=function(e,t,a){"use strict";$.ajax({url:e,dataType:"xml",async:!0,success:function(e){isfetched=!0,$(".popup").detach().appendTo(".header-inner");var r=$("entry",e).map(function(){return{title:$("title",this).text(),content:$("content",this).text(),url:$("url",this).text()}}).get(),c=document.getElementById(t),n=document.getElementById(a);c.addEventListener("input",function(){var e=0,t='<ul class="search-result-list">',a=this.value.trim().toLowerCase().split(/[\s\-]+/);n.innerHTML="",this.value.trim().length>1&&r.forEach(function(r){var c=!1,n=r.title.trim().toLowerCase(),s=r.content.trim().replace(/<[^>]+>/g,"").toLowerCase(),o=decodeURIComponent(r.url),i=-1,l=-1,p=-1;if(""!=n&&a.forEach(function(e,t){i=n.indexOf(e),l=s.indexOf(e),(i>=0||l>=0)&&(c=!0,0==t&&(p=l))}),c){e+=1,t+="<li><a href='"+o+"' class='search-result-title'>"+n+"</a>";var h=r.content.trim().replace(/<[^>]+>/g,"");if(p>=0){var u=p-20,d=p+80;u<0&&(u=0),0==u&&(d=50),d>h.length&&(d=h.length);var f=h.substring(u,d);a.forEach(function(e){var t=new RegExp(e,"gi");f=f.replace(t,'<b class="search-keyword">'+e+"</b>")}),t+='<p class="search-result">'+f+"...</p>"}t+="</li>"}}),t+="</ul>",0==e&&(t='<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'),""==a&&(t='<div id="no-result"><i class="fa fa-search fa-5x" /></div>'),n.innerHTML=t}),proceedsearch()}})};$(".popup-trigger").click(function(e){e.stopPropagation(),0==isfetched?searchFunc(path,"local-search-input","local-search-result"):proceedsearch()}),$(".popup-btn-close").click(function(e){$(".popup").hide(),$(".popoverlay").remove(),$("body").css("overflow","")}),$(".popup").click(function(e){e.stopPropagation()})</script><script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script><script>AV.initialize("Cc9hxvKgB63w6aMIIBCV2Bfz-gzGzoHsz","mBmolCuukl1GN11A7m8VQj9f")</script><script>function showTime(e){var t=new AV.Query(e),n=[],o=$(".leancloud_visitors");o.each(function(){n.push($(this).attr("id").trim())}),t.containedIn("url",n),t.find().done(function(e){if(0!==e.length){for(c=0;c<e.length;c++){var t=e[c],i=t.get("url"),s=t.get("time"),l=document.getElementById(i);$(l).find(".leancloud-visitors-count").text(s)}for(var c=0;c<n.length;c++){var i=n[c],l=document.getElementById(i),r=$(l).find(".leancloud-visitors-count");""==r.text()&&r.text(0)}}else o.find(".leancloud-visitors-count").text(0)}).fail(function(e,t){console.log("Error: "+t.code+" "+t.message)})}function addCount(e){var t=$(".leancloud_visitors"),n=t.attr("id").trim(),o=t.attr("data-flag-title").trim(),i=new AV.Query(e);i.equalTo("url",n),i.find({success:function(t){if(t.length>0){var i=t[0];i.fetchWhenSave(!0),i.increment("time"),i.save(null,{success:function(e){$(document.getElementById(n)).find(".leancloud-visitors-count").text(e.get("time"))},error:function(e,t){console.log("Failed to save Visitor num, with error message: "+t.message)}})}else{var s=new e,l=new AV.ACL;l.setPublicReadAccess(!0),l.setPublicWriteAccess(!0),s.setACL(l),s.set("title",o),s.set("url",n),s.set("time",1),s.save(null,{success:function(e){$(document.getElementById(n)).find(".leancloud-visitors-count").text(e.get("time"))},error:function(e,t){console.log("Failed to create")}})}},error:function(e){console.log("Error:"+e.code+" "+e.message)}})}$(function(){var e=AV.Object.extend("Counter");1==$(".leancloud_visitors").length?addCount(e):$(".post-title-link").length>1&&showTime(e)})</script><script>!function(){var t=document.createElement("script"),e=window.location.protocol.split(":")[0];t.src="https"===e?"https://zz.bdstatic.com/linksubmit/push.js":"http://push.zhanzhang.baidu.com/push.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(t,s)}()</script></body></html>