1. 程式人生 > >JavaScript初階(四)--------對象、構造函數、包裝類

JavaScript初階(四)--------對象、構造函數、包裝類

spa 而且 nbsp microsoft light 它的 lean 利用 字符

對象

  在JavaScript裏面所有的事物都是對象,如字符串、數字、數組、日期等,對象是擁有屬性和方法的數據,是引用值。屬性是對象相關的值,方法是能

夠在對象上執行的動作。在面向對象的語言中,屬性和方法被稱為對象的成員)

  對象有一些創建方法:

1.對象字面量格式,如

 var stu = {
                name : "xiao",
                age : 18
            }

2.構造函數

  系統有一些自帶的構造函數,如new Object( ); Array( ); Number( ); Boolean( ); Date( );

var obj = new Object();

我們可以手動向裏面添加一些屬性和方法

obj.name = "ming";
obj.func = function( ) { };

3.自定義構造函數

  自定義構造函數可以自己定義方法,適用於批量生產。

function Car(color,money){
               this.name = "daBen";
               this.color = color;
               this.money = money; 
           }
           var car1 = new Car("reg", "10w");
           var car2 = new Car("green", "20w");

  car1和car2相互獨立,他們是用同一個自定義構造函數car構造出來的,通過傳參使他們擁有各自獨特的屬性。(註意,構造函數要用大駝峰式來寫。)


構造函數內部機理

  1.在函數最前面隱式的加上this = { };(this為一個空對象)

  2.執行this.xxx = xxx;

  3.隱式地返回this對象。

      舉個栗子:

function Person(name,age,sex){
        this.name = name;
        this.age = age;
        this.sex = sex;
        }
var person = new Person("Steven","20","male");

  

  在person函數定義的時候,首先,會隱式地在執行上下文中添加一個名為this的空對象,然後,執行每句語句,相當於往this裏面添加對象的屬性和方法。最後,所有語句讀執行完

的時候,隱式地把this對象返回出去。如果構造函數沒有用new來引用的話,this就指向window。

利用構造函數內部機理進行模仿

 function f(name,age){
        var obj = {};
        obj.name = name;
        obj.age = age;
        return obj;
    }
var uu = new f("jk", 10);

  首先我們創建一個空對象命名為obj,然後給obj對象定義方法和屬性,最後顯式地把obj對象返回出去,但是這個人工的構造函數,效率等各方面都沒有原生的好,而且還涉及到原

型的問題的時候,所以也是有漏洞的。

構造函數的拓展

    將上面的代碼返回值改一下看看

return 1234;//生產出來的對象是 f{}
return true;//             f{}
return “Object”;//          f{}
return {};  //              {}

  

  我們可以發現,前三個都是原來由構造函數生產出來的對象,但是對於第四個,就變成一個空對象了,意思就是,如果我們return的如果是原始值,那麽對結構沒影響,但是如果返回的

是一個引用值,那麽結果就是return出來的那個引用值。

來看一個例子消化一下:

        var a = 5;
	 function test(){
		 a = 0;
		 alert(a); //      0
		 alert(this.a);//  5   undefined
		 var a ;
		 alert(a); //      0
	 }        

  

上述代碼運行test()和new test()結果分別是什麽?這裏考慮的是有new的時候this的指向問題。前一個指向window,所以為5,後一個指向函數test,這使函數內部沒有this.a,所以就是

undefined,其他的兩個a都是函數內部的a ,所以a是0。


包裝類

  因為原始值是沒有屬性和方法的,當我們給他們加上這些時,系統會把他轉化為原始值對應的對象的形式,我們將其稱為包裝,該原始值的對象形式就叫包裝類。

將原始值變為對象形式,例如:

 Number ——— new Number() ————數字的對象形式
 String ———— new String() ———— 字符串的對象形式
Boolean ———— new Boolean () ———— 布爾值的對象形式

  當我們給原始值添加屬性的時候,JS引擎會隱式地將原始值轉化為對應的對象類型,然後,進行delete操作,意思就是,當我們給一個原始值添加屬性的時候,引擎將會馬上刪除該原始值的對象形式。

   例如:

var num = 123;
 num.abc = "a"; // num.abc = undefined

 

同樣也來個栗子消化消化

var str = "abc";
str += 1 ;
var test = typeof(str);
if(test.length == 6){
	test.sign = "typeof的返回結果可能是String";
}
doucment.write(test.sign);

  

 看看最後輸出結果是什麽?粗略一看test是String,剛剛好length就是6,打印"typeof的返回結果可能是String",真的是這樣嗎,結果打印的卻是undefined,why!!!原來String是原始

值,當我們給他添加完屬性sign後,JS引擎就刪除了它的對象形式,所以就是undefined了,這裏要註意包裝類問題。

JavaScript初階(四)--------對象、構造函數、包裝類