Javascript對象的技巧和陷阱，javascript對象陷阱

Javascript對象的技巧和陷阱，javascript對象陷阱
建立對象的3種方法方法1

直接建立

var obj = {            name: "mike",            age: 10        }

方法2

用new建立

var ob = new Date();

方法3

ECMAScript5有個新的方法 Object.create()

其實這個方法就是繼承某一個對象

var obj = {            name: "mike",            age: 10        };        var newobj = Object.create(obj);        console.log(newobj.name);

一些技巧和陷阱

1

var a = {            name: "mike",            name: "john"        }        console.log(a["name"]);

不小心的把屬性名稱寫成一樣 結果是john也就是說當遇到屬性名稱一樣的情況下. 按照最後一個出現的算, 注意當開始use strict的時候會報錯

2

var a = {};        a.x = 1;        var p = Object.create(a);        p.y = 2;        console.log(p.x);

當你訪問對象的屬性沒有時候,他會沿著原型鏈繼續向上找,

3

var a = {};        a.x = 1;        var p = Object.create(a);        p.y = 2;        console.log("x" in p); //true

一個對象裡有沒有這個屬性 這個屬性如果是繼承來的也算是有

4

var a = {};        a.x = 1;        var p = Object.create(a);        p.y = 2;        console.log("x" in p); //true        console.log(p.hasOwnProperty("x")); //false

檢查自有屬性

5

var a = {            x:1,            get getx() {return this.x;},            set setx(arg) {                return this.x = arg;            }        }        console.log(a.x);        a.x = 100;        console.log(a.x);

屬性可以設定唯讀唯寫, 讀/s寫

6

var a = {            x:1,            get getx() {return this.x;},            set setx(arg) {                return this.x = arg;            }        }        Object.freeze(a);        a.x = 100;        console.log(a.x); //1

凍結一個對象 用來保證對象的封閉性不被破壞

javascript應注意的問題

　　以下是JavaScript容易犯錯的幾個"陷阱".由本人google+體驗+搜集而來.雖然不是什麼很高深的技術問題，但注意一下，會使您的編程輕鬆些.

　　1. 最後一個逗號

　　如這段代碼，注意最後一個逗號，按語言學角度來說應該是不錯的（python的類似資料類型辭典dictionary就允許如此）。IE會報語法錯誤，但語義不詳，你只能用人眼從幾千行代碼中掃描。

　　Js代碼
　　<script>
　　var theObj = {
　　city : "ShenZhen",
　　state : "ok",
　　}
　　</script>
　　<script> var theObj = { city : "ShenZhen", state : "ok", } </script>

　　2. this的引用會改變

　　如這段代碼：

　　Js代碼
　　<input type="button" value="Gotcha!" id="MyButton" >
　　<script>
　　var MyObject = function () {
　　this.alertMessage = "Javascript rules";
　　this.ClickHandler = function() {
　　alert(this.alertMessage ); //行1
　　}
　　}();
　　document.getElementById("theText").onclick = MyObject.ClickHandler;
　　</script>
　　<input type="button" value="Gotcha!" id="MyButton" > <script> var MyObject = function () { this.alertMessage = "Javascript rules"; this.ClickHandler = function() { alert(this.alertMessage ); //行1 } }(); document.getElementById("theText").onclick = MyObject.ClickHandler; </script>

　　並不如你所願，答案並不是”JavaScript rules”。在執行MyObject.ClickHandler時，在行1中，this的引用實際上指向的是document.getElementById("theText")的引用。可以這麼解決：

　　Js代碼
　　<input type="button" value="Gotcha!" id="theText" >
　　<script>
　　var MyObject = function () {
　　var sel......餘下全文>>
 
怎自學javascript物件導向編程

看看nicholas c. zakas系列書javascript進階程式設計吧