欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript構(gòu)造函數(shù)詳解

 更新時(shí)間:2015年12月27日 09:43:36   投稿:mrr  
構(gòu)造函數(shù)就是初始化一個(gè)實(shí)例對(duì)象,對(duì)象的prototype屬性是繼承一個(gè)實(shí)例對(duì)象。本文給大家分享javascript構(gòu)造函數(shù)詳解,對(duì)js構(gòu)造函數(shù)相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧

構(gòu)造函數(shù)就是初始化一個(gè)實(shí)例對(duì)象,對(duì)象的prototype屬性是繼承一個(gè)實(shí)例對(duì)象。

  構(gòu)造函數(shù)注意事項(xiàng):

1.默認(rèn)函數(shù)首字母大寫

2.構(gòu)造函數(shù)并沒(méi)有顯示返回任何東西。new 操作符會(huì)自動(dòng)創(chuàng)建給定的類型并返回他們,當(dāng)調(diào)用構(gòu)造函數(shù)時(shí),new會(huì)自動(dòng)創(chuàng)建this對(duì)象,且類型就是構(gòu)造函數(shù)類型。

3.也可以在構(gòu)造函數(shù)中顯示調(diào)用return.如果返回的值是一個(gè)對(duì)象,它會(huì)代替新創(chuàng)建的對(duì)象實(shí)例返回。如果返回的值是一個(gè)原始類型,它會(huì)被忽略,新創(chuàng)建的實(shí)例會(huì)被返回。    

 function Person( name){
        this.name =name;
      }
       var p1=new Person('John');

等同于:

   function person(name ){
        Object obj =new Object();
        obj.name =name;
         return obj;
      }
       var p1= person("John");

4.因?yàn)闃?gòu)造函數(shù)也是函數(shù),所以可以直接被調(diào)用,但是它的返回值為undefine,此時(shí)構(gòu)造函數(shù)里面的this對(duì)象等于全局this對(duì)象。this.name其實(shí)就是創(chuàng)建一個(gè)全局的變量name。在嚴(yán)格模式下,當(dāng)你補(bǔ)通過(guò)new 調(diào)用Person構(gòu)造函數(shù)會(huì)出現(xiàn)錯(cuò)誤。

 

5.也可以在構(gòu)造函數(shù)中用Object.defineProperty()方法來(lái)幫助我們初始化:

  function Person( name){
        Object.defineProperty(this, "name"{
          get :function(){
             return name;
          },
           set:function (newName){
            name =newName;
          },
          enumerable :true, //可枚舉,默認(rèn)為false
           configurable:true //可配置
         });
      }  
       var p1=new Person('John');

6.在構(gòu)造函數(shù)中使用原型對(duì)象      

 //比直接在構(gòu)造函數(shù)中寫的效率要高的多
       Person.prototype.sayName= function(){
         console.log(this.name);
      };

但是如果方法比較多的話,大多人會(huì)采用一種更簡(jiǎn)潔的方法:直接使用一個(gè)對(duì)象字面形式替換原型對(duì)象,如下:      

 Person.prototype ={
        sayName :function(){
           console.log(this.name);
        },
        toString :function(){
           return "[Person "+ this.name+"]" ;
        }
      };

這種方式非常流行,因?yàn)槟悴挥枚啻捂I入Person.prototype,但有一個(gè)副作用你一定要注意:

使用字面量形式改寫了原型對(duì)象改變了構(gòu)造函數(shù)的屬性,因此他指向Object而不是Person。這是因?yàn)樵蛯?duì)象具有一個(gè)constructor屬性,這是其他對(duì)象實(shí)例所沒(méi)有的。當(dāng)一個(gè)函數(shù)被創(chuàng)建時(shí),它的prototype屬性也被創(chuàng)建,且該原型對(duì)象的constructor屬性指向該函數(shù)。當(dāng)使用對(duì)象字面量形式改寫原型對(duì)象時(shí),其constructor屬性將被置為泛用對(duì)象Object.為了避免這一點(diǎn),需要在改寫原型對(duì)象的時(shí)候手動(dòng)重置constructor,如下:

 Person.prototype ={
        constructor :Person,
        
        sayName :function(){
           console.log(this.name);
        },        
        toString :function(){
           return "[Person "+ this.name+"]" ;
        }
      };

再次測(cè)試:

p1.constructor===Person

true 

p1.constructor===Object

false

p1 instanceof Person

true

相關(guān)文章

  • Javascript UrlDecode函數(shù)代碼

    Javascript UrlDecode函數(shù)代碼

    將Url進(jìn)行編碼,前臺(tái)JS需要使用這段內(nèi)容,這時(shí)候就需要解碼了
    2010-01-01
  • 原生JS 購(gòu)物車及購(gòu)物頁(yè)面的cookie使用方法

    原生JS 購(gòu)物車及購(gòu)物頁(yè)面的cookie使用方法

    下面小編就為大家?guī)?lái)一篇原生JS 購(gòu)物車及購(gòu)物頁(yè)面的cookie使用方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-08-08
  • 基于構(gòu)造函數(shù)的五種繼承方法小結(jié)

    基于構(gòu)造函數(shù)的五種繼承方法小結(jié)

    下面小編就為大家?guī)?lái)一篇基于構(gòu)造函數(shù)的五種繼承方法小結(jié)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-07-07
  • wx-charts 微信小程序圖表插件的具體使用

    wx-charts 微信小程序圖表插件的具體使用

    這篇文章主要介紹了wx-charts 微信小程序圖表插件的具體使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • js控制div彈出層實(shí)現(xiàn)方法

    js控制div彈出層實(shí)現(xiàn)方法

    這篇文章主要介紹了js控制div彈出層實(shí)現(xiàn)方法,可實(shí)現(xiàn)點(diǎn)擊鏈接彈出div浮動(dòng)層,且背景色變暗的效果,是一款非常實(shí)用的特效源碼,需要的朋友可以參考下
    2015-05-05
  • js之encodeURI、encodeURIComponent、decodeURI、decodeURIComponent

    js之encodeURI、encodeURIComponent、decodeURI、decodeURIComponent

    這篇文章主要介紹了js之encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • js觸發(fā)select onchange事件的小技巧

    js觸發(fā)select onchange事件的小技巧

    select 或text的onchange事件需要手動(dòng)改變select或text的值才能觸發(fā),下面有個(gè)不錯(cuò)的方法可以通過(guò)js觸發(fā)select onchange事件
    2014-08-08
  • 基于vue實(shí)現(xiàn)可搜索下拉框定制組件

    基于vue實(shí)現(xiàn)可搜索下拉框定制組件

    這篇文章主要為大家詳細(xì)介紹了基于vue實(shí)現(xiàn)可搜索下拉框定制組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-06-06
  • JS彈性運(yùn)動(dòng)實(shí)現(xiàn)方法分析

    JS彈性運(yùn)動(dòng)實(shí)現(xiàn)方法分析

    這篇文章主要介紹了JS彈性運(yùn)動(dòng)實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了JS實(shí)現(xiàn)彈性運(yùn)動(dòng)的原理、相關(guān)技術(shù)細(xì)節(jié)與實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2016-12-12
  • JavaScript實(shí)現(xiàn)顯示函數(shù)調(diào)用堆棧的方法

    JavaScript實(shí)現(xiàn)顯示函數(shù)調(diào)用堆棧的方法

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)顯示函數(shù)調(diào)用堆棧的方法,實(shí)例分析了JavaScript顯示函數(shù)調(diào)用堆棧的具體作用與使用方法,需要的朋友可以參考下
    2016-04-04

最新評(píng)論