您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“js中使用原型對(duì)象prototype需要注意的地方有哪些”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“js中使用原型對(duì)象prototype需要注意的地方有哪些”這篇文章吧。
我們先來一個(gè)簡(jiǎn)單的構(gòu)造函數(shù)+原型對(duì)象的小程序
function CreateObj( uName, uAge ) { this.userName = uName; this.userAge = uAge; } CreateObj.prototype.showUserName = function () { return this.userName; } CreateObj.prototype.showUserAge = function () { return this.userAge; }
這個(gè)程序,沒有什么問題,但是非常的冗余,每次擴(kuò)展一個(gè)方法,都要寫一次原型對(duì)象,我們可以把原型對(duì)象prototype當(dāng)做一個(gè)字面量對(duì)象,所有的方法都在字面量對(duì)象中擴(kuò)展,可以達(dá)到同樣的效果:
CreateObj.prototype = { showUserAge : function(){ return this.userAge; }, showUserName : function(){ return this.userName; }, } var obj1 = new CreateObj( 'ghostwu', 22 ); var obj2 = new CreateObj( '衛(wèi)莊', 24 ); console.log( obj1.showUserName(), obj1.showUserAge() ); //ghostwu 22 console.log( obj2.showUserName(), obj2.showUserAge() ); //衛(wèi)莊 24
但是這種原型(prototype)對(duì)象的寫法,屬于重寫了CreateObj的默認(rèn)原型對(duì)象,造成的第一個(gè)問題就是constructor不再指向CreateObj.
沒有重寫之前,constructor指向CreateObj
function CreateObj( uName, uAge ) { this.userName = uName; this.userAge = uAge; } CreateObj.prototype.showUserName = function () { return this.userName; } CreateObj.prototype.showUserAge = function () { return this.userAge; } console.log( CreateObj.prototype.constructor === CreateObj ); //true
重寫之后,constructor指向Object
CreateObj.prototype = { showUserAge : function(){ return this.userAge; }, showUserName : function(){ return this.userName; }, } console.log( CreateObj.prototype.constructor === CreateObj ); //false console.log( CreateObj.prototype.constructor === Object ); //true
所以說,constructor不能準(zhǔn)確的標(biāo)識(shí)對(duì)象,因?yàn)樗麜?huì)被修改
我們之前寫的程序,基本都是在原型對(duì)象(prototype)上擴(kuò)展完了方法之后,再實(shí)例化對(duì)象,我們看下,先實(shí)例化對(duì)象,再在原型對(duì)象(prototype)上擴(kuò)展函數(shù),
實(shí)例對(duì)象是否能正常的調(diào)用到擴(kuò)展的方法?
function CreateObj( uName, uAge ) { this.userName = uName; this.userAge = uAge; } var obj1 = new CreateObj( 'ghostwu', 22 ); CreateObj.prototype.showUserName = function(){ return this.userName; } console.log( obj1.showUserName() ); //ghostwu
可以正常調(diào)用,但是,如果原型對(duì)象是重寫的,就調(diào)用不到了
function CreateObj( uName, uAge ) { this.userName = uName; this.userAge = uAge; } var obj1 = new CreateObj( 'ghostwu', 22 ); CreateObj.prototype = { showUserName : function(){ return this.userName; } } console.log( obj1.showUserName() ); //報(bào)錯(cuò)
因?yàn)橹貙懥嗽蛯?duì)象之后,同時(shí)實(shí)例化又是在重寫之前發(fā)生的,所以實(shí)例的隱式原型__proto__不會(huì)指向重寫的原型對(duì)象,所以就調(diào)用不到另一個(gè)問題,如果在原型對(duì)象(prototype)上有引用類型,千萬小心,因?yàn)槎鄠€(gè)實(shí)例共用原型對(duì)象,只要有一個(gè)實(shí)例改變了引用類型的值,其他實(shí)例全部會(huì)收到改變之后的結(jié)果。
function CreateObj(){} CreateObj.prototype = { name : 'ghostwu', skills : [ 'php', 'javascript', 'linux' ] }; var obj1 = new CreateObj(); obj1.skills.push( 'python' ); var obj2 = new CreateObj(); console.log( obj2.skills ); //'php', 'javascript', 'linux', 'python'
原型對(duì)象(prototype)的共享特性,可以很方便的為一些內(nèi)置的對(duì)象擴(kuò)展一些方法,比如,數(shù)組去重復(fù)
Array.prototype.unique = function(){ var res = []; for( var i = 0, len = this.length; i < len; i++ ){ if( res.indexOf( this[i] ) == -1 ) { res.push( this[i] ); } } return res; } var arr = [ 10, 20, 30, 20, 30, 20, 40, 20 ]; console.log( arr.unique() ); //10, 20, 30, 40
但是,不要隨便往內(nèi)置的對(duì)象上面擴(kuò)展方法,在多人協(xié)作開發(fā),很容易產(chǎn)生覆蓋,以及污染。
以上是“js中使用原型對(duì)象prototype需要注意的地方有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。