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

舉例說明JavaScript中的實(shí)例對象與原型對象

 更新時間:2016年03月11日 16:09:28   作者:zxsrendong  
這篇文章主要介紹了JavaScript中的實(shí)例對象與原型對象,針對constructor屬性和prototype屬性展開來講,需要的朋友可以參考下

首先聲明:javascript中每個對象都有一個constructor屬性和一個prototype屬性。constructor指向?qū)ο蟮臉?gòu)造函數(shù),prototype指向使用構(gòu)造函數(shù)創(chuàng)建的對象實(shí)例的原型對象。

function Person(){ 
  
 } 
var person = new Person(); 
 
Person.prototype = { 
 constructor : Person, 
 name : 'zxs', 
 age : 24, 
 sayName : function(){alert(this.name)} 
 } 
  
person.sayName(); 

在這段代碼中會報錯,sayName() is not defined。根據(jù)javascript高級程序設(shè)計第二版的解釋,是因?yàn)橹貙懙脑颓袛嗔藰?gòu)造函數(shù)與最初原型之間的聯(lián)系。但是我們調(diào)整一下上面語句的順序。如下:

function Person(){ 
 } 
//var person = new Person(); 
Person.prototype = { 
 constructor : Person, 
 name : 'zxs', 
 age : 24, 
 sayName : function(){alert(this.name)} 
} 
/*===========================================================*/ 
var person = new Person(); 
/*===========================================================*/ 
 person.sayName(); // zxs 
alert(person.constructor) //function Object() { [native code]} or function Person() {} 取決與藍(lán)色的語句是否有效 

注意上面兩段代碼等號中間的語句。按第二段的順序?qū)懘a,將會輸出 ”zxs“,這個結(jié)果說明在第一種情況下報錯并不能說明是因?yàn)榍袛嗔藰?gòu)造函數(shù)與原想之間的聯(lián)系引起的。

Person.prototype = {} 

本來就是一種定義對象的方法,而且在javascript中每個對象的constructor屬性都默認(rèn)的指向Object構(gòu)造函數(shù),這也就不難說明重寫原型對象確實(shí)切斷了構(gòu)造函數(shù)與最初原型之間的聯(lián)系,但并不能說明這種聯(lián)系被切斷之后 person就不能訪問到sayName()函數(shù)。

現(xiàn)在有這樣的假設(shè):函數(shù)的prototype屬性所指向的原型對象,與我們顯示新建的原型對象并不是完全等同的。當(dāng)我們調(diào)用函數(shù)的時候會創(chuàng)建一個原型對象,此時會首先查找當(dāng)前環(huán)境中是否存在其原型對象,如果程序中不存在,就創(chuàng)建一個,如果環(huán)境中存在,側(cè)查找他們的屬性和方法,最后根據(jù)查找的結(jié)果返回一個原型對象,這個對象中的屬性和方法總是優(yōu)先使用默認(rèn)原型中的屬性和方法,也就是構(gòu)造函數(shù)中定義的屬性和方法。當(dāng)當(dāng)調(diào)用的方法或?qū)傩圆淮嬖谟谀J(rèn)的原型中時,才使用定義在Person.prototype = {} 的屬性和方法。

javascript是解釋性的語言,語句都是順序執(zhí)行的,在第一段代碼中,當(dāng)我們使用 new 關(guān)鍵字創(chuàng)建新對象的時候,Person.prototype = {} 并沒有執(zhí)行,也就是說在當(dāng)前的執(zhí)行環(huán)境中找不到其中定義的方法和屬性,而構(gòu)造函數(shù)中沒有該方法,所以出錯。就像一個變量,給他賦值的時候程序沒有執(zhí)行將不能使用。在第二段中環(huán)境中已經(jīng)存在該調(diào)用的方法,構(gòu)造函數(shù)的原型對象已經(jīng)創(chuàng)建完畢,所以可以得到結(jié)果。

再看下面的一段程序:

////////////////////////////////////////////////////////////////////////// 
 
function Person(){} 
 
/*===========================================================*/ 
 
 var person = new Person(); 
Person.prototype.name = 'song'; 
 
/*===========================================================*/ 
 
//Person.prototype.sayName = function(){alert(this.name)}; 
Person.prototype = { 
constructor : Person, 
name : 'zxs', 
age : 24, 
sayName : function(){alert(this.name)} 
} 
person.sayName(); // error 
 
////////////////////////////////////////////////////////////////////////// 
 
function Person(){  } 
/*var person = new Person();*/ 
Person.prototype.name = 'song';  
/*Person.prototype.sayName = function(){alert(this.name)};*/ 
Person.prototype = {   
constructor : Person, 
  name : 'zxs', 
  age : 24, 
  sayName : function(){alert(this.name)} 
} 
 
/*===========================================================*/ 
var person = new Person(); 
 
/*===========================================================*/ 
person.sayName(); // zxs 

從這里可以看出使用 Person.prototype.name = '',的方式不論在什么地方創(chuàng)建對象都能被訪問,如果同時存在對象字面量和這種方法定義原型對象,將使用后定義的作為最終值。并且對原型對象使用對象字面量定義之后,該定義必須出現(xiàn)在創(chuàng)建對象的語句之前才能被訪問到。

實(shí)例不能訪問到原型對象中的屬性和方法,不僅僅是因?yàn)橹貙懺蛯ο笄袛嗔藰?gòu)造函數(shù)與最初原型之間的聯(lián)系。

function Person(){  
    
  }  
var person = new Person();  
  
Person.prototype = {  
  //constructor : Person,  
  name : 'zxs',  
  age : 24,  
  sayName : function(){alert(this.name)}  
  }  
    
person.sayName();  

以上代碼在實(shí)例化對象時構(gòu)造函數(shù)的原型為空,它沒有任何除默認(rèn)屬性以外的屬性。重寫構(gòu)造函數(shù)的原型確實(shí)切斷了構(gòu)造函數(shù)與最初原型之間的聯(lián)系。

在使用 new 操作符以后構(gòu)造函數(shù)的原型對象中的屬性和方法已經(jīng)添加到 person對象中。因?yàn)橐陨戏椒楹瘮?shù)原型添加新屬性和方法不具有動態(tài)性,所以person不能訪問到新添加的屬性和方法。

重寫原型對象之后,就如同如下代碼:

var o = { 
  name : 'zxs' 
  } 
   
var obj = o; 
o = {} 
console.log(o.name);  

此時輸出的值是undefined,因?yàn)椋瑢ο笫且粋€引用類型,“=”是賦值操作符,并且其運(yùn)算順序是從右往左。o={}就是說o的指向已經(jīng)改變,是一個空對象。
Person.prototype.mothed = function() {}與Person.prototype={mothed:function(){}}的區(qū)別就如同 arr = []和arr.push()一樣,前者都是修改自身,后者是完全改變自身。

相關(guān)文章

  • 簡介JavaScript中的getSeconds()方法的使用

    簡介JavaScript中的getSeconds()方法的使用

    這篇文章主要介紹了簡介JavaScript中的getSeconds()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下
    2015-06-06
  • js中g(shù)etBoundingClientRect( )方法案例詳解

    js中g(shù)etBoundingClientRect( )方法案例詳解

    這篇文章主要介紹了js中g(shù)etBoundingClientRect( )方法案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-07-07
  • 原生js實(shí)現(xiàn)節(jié)日時間倒計時功能

    原生js實(shí)現(xiàn)節(jié)日時間倒計時功能

    本文主要分享了原生js實(shí)現(xiàn)節(jié)日時間倒計時功能的示例代碼。具有一定的參考價值,下面跟著小編一起來看下吧
    2017-01-01
  • javascript 繼承學(xué)習(xí)心得總結(jié)

    javascript 繼承學(xué)習(xí)心得總結(jié)

    下面小編就為大家?guī)硪黄猨avascript 繼承學(xué)習(xí)心得總結(jié)。小編覺得挺不錯的?,F(xiàn)在分享給大家。給大家做個參考
    2016-03-03
  • JavaScript中判斷對象類型的幾種方法總結(jié)

    JavaScript中判斷對象類型的幾種方法總結(jié)

    本篇文章是對JavaScript中判斷對象類型的幾種方法進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2013-11-11
  • javascript編程起步(第五課)

    javascript編程起步(第五課)

    javascript編程起步(第五課)...
    2007-01-01
  • JavaScript Switch 聲明

    JavaScript Switch 聲明

    JavaScript Switch 聲明...
    2007-04-04
  • Javascript中的數(shù)據(jù)類型之旅

    Javascript中的數(shù)據(jù)類型之旅

    JavaScript 是一種弱類型或者說動態(tài)語言。這意味著你不用提前聲明變量的類型,在程序運(yùn)行過程中,類型會被自動確定。這也意味著你可以使用同一個變量保存不同類型的數(shù)據(jù)。
    2015-10-10
  • 最新評論