javascript 易錯(cuò)知識(shí)點(diǎn)實(shí)例小結(jié)
本文實(shí)例總結(jié)了javascript 易錯(cuò)知識(shí)點(diǎn)。分享給大家供大家參考,具體如下:
為什么 typeof null === 'object'
原理是這樣的,不同的對(duì)象在底層都表示為二進(jìn)制,在JavaScript中二進(jìn)制前三位都為0的話會(huì)被判斷為 object 類(lèi)型, null 的二進(jìn)制表示是全0,自然前三位也是0,所以執(zhí)行 typeof 時(shí)會(huì)返回“ object ”。
對(duì)象屬性的存在性
如 myObject.a 的屬性訪問(wèn)返回值可能是 undefined ,但是這個(gè)值有可能是屬性中存儲(chǔ)的 undefined ,也可能是因?yàn)閷傩圆淮嬖谒苑祷?undefined 。那么如何區(qū)分這兩種情況呢?
var myObject = { a:2 }; // 方案一 ("a" in myObject); // true ("b" in myObject); // false // 方案二 myObject.hasOwnProperty( "a" ); // true myObject.hasOwnProperty( "b" ); // false // 方案三 Object.prototype.hasOwnProperty.call(myObject, 'b')
對(duì)象繼承的三種方法
參考如下代碼:
function Foo(name) { this.name = name; } Foo.prototype.myName = function() { console.log(this.name) } function Bar(name, label) { Foo.call(this, name); this.label = label; } // 方法1 Bar.prototype = Object.create(Foo.prototype) // 方法2 Bar.prototype = Foo.prototype; // 方法3 Bar.prototype = new Foo(); //Bar.prototype.constructor = Bar; Bar.prototype.sayName = function() { console.log(this.name) } var b = new Foo('fayin') b.sayName()
上例中,三種方法都可以使 Bar 繼承 Foo.prototype 上的方法,但它們之間又有微妙的差別:
Object.create(..) 會(huì)憑空創(chuàng)建一個(gè)“新”對(duì)象并把新對(duì)象內(nèi)部的 [[Prototype]] 關(guān)聯(lián)到你指定的對(duì)象(本例中是 Foo.prototype )。
Bar.prototype = Foo.prototype 并不會(huì)創(chuàng)建一個(gè)關(guān)聯(lián)到 Bar.prototype 的新對(duì)象,它只是讓 Bar.prototype 直接引用 Foo.prototype 對(duì)象。因此當(dāng)你執(zhí)行類(lèi)似 Bar.prototype.myLabel = ... 的賦值語(yǔ)句時(shí)會(huì)直接修改 Foo.prototype 對(duì)象本身。
Bar.prototype = new Foo() 的確會(huì)創(chuàng)建一個(gè)關(guān)聯(lián)到 Bar.prototype 的新對(duì)象。但是它使用了 Foo(..)的“構(gòu)造函數(shù)調(diào)用”,如果函數(shù) Foo 有一些副作用(比如寫(xiě)日志、修改狀態(tài)、注冊(cè)到其他對(duì)象、給 this 添加數(shù)據(jù)屬性,等等)的話,就會(huì)影響到 Bar() 的“后代”,后果不堪設(shè)想。
結(jié)論
因此,要?jiǎng)?chuàng)建一個(gè)合適的關(guān)聯(lián)對(duì)象,我們必須使用 Object.create(..) 而不是使用具有副作用的 Foo(..) 。這樣做唯一的缺點(diǎn)就是需要?jiǎng)?chuàng)建一個(gè)新對(duì)象然后把舊對(duì)象拋棄掉,不能直接修改已有的默認(rèn)對(duì)象。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript傳值操作技巧總結(jié)》、《javascript編碼操作技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
發(fā)布一個(gè)基于javascript的動(dòng)畫(huà)類(lèi) Fx.js
支持大部分CSS3屬性的動(dòng)畫(huà)(可能要指定詳細(xì)的屬性值)。2010-11-1128個(gè)JavaScript常用字符串方法以及使用技巧總結(jié)
這篇文章主要給大家介紹了28個(gè)JavaScript常用字符串方法以及使用技巧的相關(guān)資料,文中統(tǒng)計(jì)的方法都非常實(shí)用,無(wú)論是日常工作還是面試,都建議多看一看,需要的朋友可以參考下2021-09-09Javascript 詳解封裝from表單數(shù)據(jù)為json串進(jìn)行ajax提交
這篇文章主要介紹了Javascript 詳解封裝from表單數(shù)據(jù)為json串進(jìn)行ajax提交的相關(guān)資料,需要的朋友可以參考下2017-03-03微信小程序調(diào)用天氣接口并且渲染在頁(yè)面過(guò)程詳解
這篇文章主要介紹了微信小程序調(diào)用天氣接口并且渲染在頁(yè)面過(guò)程詳解,今天寫(xiě)一個(gè)具體的例子,調(diào)用一個(gè)免費(fèi)的天氣接口的api,并且把所獲取的內(nèi)容展示在前端的界面,前端界面與 iView Weapp結(jié)合,需要的朋友可以參考下2019-06-06JavaScript計(jì)算出兩個(gè)數(shù)的差值
這篇文章主要為大家詳細(xì)介紹了JavaScript計(jì)算出兩個(gè)數(shù)的差值,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過(guò)切換層效果的方法
這篇文章主要介紹了JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過(guò)切換層效果的方法,涉及javascript鼠標(biāo)事件及頁(yè)面元素操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05