繼續(xù)第二部分

Object.freeze(obj)

看字面意思就是“把一個(gè)對(duì)象凍結(jié)”。

下面我們來看個(gè)簡(jiǎn)單的例子以作說明：

1 // a person instance 2 var person = { 3 name: 'Andrew', 4 job: 'sales manager' 5 }; 6 7 // before freeze 8 // existing properties maybe be changed or removed, new properties may be added 9 person.name = 'Bruce'; 10 person.age = 30; 11 12 console.log(person.name); // Bruce 13 console.log(person.age); // 30 14 15 // freeze the person 16 Object.freeze(person); 17 18 // isFrozen 19 console.log( Object.isFrozen(person) ); // true 20 21 // after freeze 22 // fail silently, or strict mode throw a TypeError 23 person.name = 'James'; 24 person.age = '35'; 25 person.gender = 'male'; 26 27 console.log(person.name); // Bruce 28 console.log(person.age); // 30 29 console.log(person.gender); // undefined

上面例子的特點(diǎn)是，person對(duì)象的屬性像name，job，age的值都是“字面值”，并非對(duì)象，如果存在一個(gè)屬性，其值是一個(gè)對(duì)象呢？

我們?cè)賮硪粋€(gè)例子：

1 // a person again 2 var person = { 3 name: { 4 firstname: 'Bruce', 5 lastname: 'Lee' 6 }, 7 age: 35, 8 job: 'sales manager', 9 children: ['lucy', 'linda'] 10 }; 11 12 console.log('name:' + person.name.firstname + ' ' + person.name.lastname); // name:Bruce Lee 13 console.log('children:' + person.children); // lucy, linda 14 15 // freeze the person 16 Object.freeze(person); 17 18 // has been frozen! 19 console.log(Object.isFrozen(person)); 20 21 // change name 22 person.name.firstname = 'Andrew'; 23 person.name.lastname = 'Carnegie'; 24 25 // add one more child 26 person.children.push('Tom'); 27 28 console.log('name:' + person.name.firstname + ' ' + person.name.lastname); // name:Andrew Carnegie 29 console.log('children:' + person.children); // lucy, linda, Tom

通過上面的2個(gè)例子，我們很容易得出結(jié)論。那么我們?nèi)绾巫龅健吧顚印眆reeze呢。

就要用到一個(gè)遞歸函數(shù)，來讓里面的每個(gè)對(duì)象都被freeze：

1 function deepFreeze(o) { 2 var prop, propkey; 3 4 Object.freeze(o); 5 6 for(propkey in o) { 7 prop = o[propkey]; 8 9 if( !o.hasOwnProperty(propkey) || !(typeof prop === 'object') || Object.isFrozen(prop) ) { 10 continue; 11 } 12 // Recursively call deepFreeze 13 deepFreeze(prop); 14 } 15 }; 16 17 // if we use deepFreeze to replace with Object.freeze in the previous example, 18 // then nothing will happen, even person's properties(aka. name, age, children ) are changed

利用的deepFreeze方法，我們就可以把person對(duì)象的屬性全部“凍結(jié)”。

---

搞清楚Object.freeze的用途后，我們繼續(xù)來了解下Object.seal

Object.seal(obj)

seal從字面意思上理解有“密封”的意思，我依舊通過例子來說明：

1 // a person again 2 var person = { 3 name: 'Andrew', 4 age: 25, 5 children: ['Tom'], 6 edu: { 7 major: 'computer science', 8 university: 'Yale' 9 } 10 }; 11 12 // before seal 13 // new properties may be added, exisiting properties may be changed or removed 14 person.name = 'Bruce'; 15 person.gender = 'male'; 16 delete person.age; 17 18 // looking up the structure 19 console.dir(person); 20 21 // seal the person 22 Object.seal(person); 23 24 // has been sealed 25 console.log( Object.isSealed(person) ); // true 26 27 // after seal 28 // existing (writable) properties can be changed 29 person.name = 'Jackson'; 30 console.log(person.name); // Jackson 31 32 // or change value through Object.defineProperty 33 Object.defineProperty(person, 'name', {value: 'Ann'}); 34 console.log(person.name); // Anna 35 36 // add one more child 37 person.children.push('lucy'); 38 console.log(person.children); // tom, lucy 39 40 // internal object is still extensible, unless you seal it too (eg. Object.seal(person.edu) ) 41 person.edu.degree = 'master'; 42 console.log(person.edu.degree); // master 43 44 // silently fail or in strict mode throw TypeError 45 // when add or delete property 46 person.job = 'Front End Developer'; 47 delete person.name; 48 // TypeError when add property through Object.defineProperty 49 Object.defineProperty(person, 'job', {value: 'teacher'}); // TypeError

通過上面的例子，我們可以看到，seal一個(gè)對(duì)象后，使得它不可擴(kuò)展，但是其屬性值（該屬性writable為true）是 可以改變的。還有一點(diǎn)就是若其屬性是一個(gè)對(duì)象，姑且叫內(nèi)部對(duì)象吧，那么這個(gè)內(nèi)部對(duì)象還是可以進(jìn)行擴(kuò)展的，除非寫一個(gè)遞歸的deepSeal方法， 這個(gè)可以參考上面的deepFreeze

第二部分就到這里，感興趣的同學(xué)可以前往MDN查看，Object.freeze，Object.seal。

轉(zhuǎn)載于:https://www.cnblogs.com/AndyWithPassion/p/es5_object_2.html

總結(jié)

以上是生活随笔為你收集整理的ECMAScript5之Object学习笔记（二）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。