1. 程式人生 > >建構函式與原型鏈和麵向物件的學習(一)

建構函式與原型鏈和麵向物件的學習(一)

下面文章所有的例子(關於什麼是建構函式)

例子中完整的js程式碼在文章最下面

第一個例子

function fun(){
                this.name = "小明";
                this.age = 12;
                this.sex = "男";
                console.log("aa")//"aa""
            }
            var obj = new fun();
            console.log(obj.age); //12


            用new運算子呼叫一個函式的時候,會經歷四步走
            1.函式內部會悄悄的建立一個區域性變數,是一個空物件{}
            2.函式會將自己的上下文設定為這個空物件{},上下文也就是this,所以this就表示這個空物件
            3.函式會執行所有語句(上面例子的輸出字串aa);
            4.所有語句執行後,函式retum這個物件,函式將把自己的上下文返回;(上面的例子將函式返回給力obj他現在是個物件了);
            理解
            1.一般我們可以用new來多次呼叫一個函式,總可以得到具有相同屬性群的物件,我們可以稱這些物件是"同一個類的例項",或者稱他們是"同一類物件";
          

 if(obj === obj2){
                console.log("相等");
            }else{
                console.log("不相等");
            }


            這裡返回不相等因為雖然他們都是呼叫的同一個函式中生產的物件但他們的堆地點是不同的(引用型別也就是物件他們的值相同不代表他們就相同他們的位置還不一樣);

圖片理解


            2.new就是一個運算子並不是c c++ java中的類的概念
            3.建構函式就是一個普通的函式,裡面可以寫任何語句(邏輯語句或DOM操作)
            

if(this.age < 18){
                console.log("未成年");
            }else if(this.age > 18){
                console.log("成年");
            }else{
                console.log("請輸入年齡");
            }


            上文就用到了if語句 來判斷age物件中的age屬性的值;
            4.上面講到new四步走中:所有語句執行後,函式retum這個物件,函式將把自己的上下文返回;(上面的例子將函式返回給力obj他現在是個物件了);但當函式中寫了return會怎麼樣?
             如果ruturn 的是一個基本型別那麼忽視這個return,但return一樣會會阻止建構函式的執行
            

    this.name = "小明";
                 this.age = age;
                 if(this.age < 18){
                     console.log("未成年");
                 }else if(this.age > 18){
                     console.log("成年");
                 }else{
                     console.log("請輸入年齡");
                 }
                 return 3;   //這裡的3不會返回,但sex屬性也沒用了,aa也不會輸出因為被return阻止了
                 this.sex = "男";
                 console.log("aa")//"aa""
             }


             如果ruturn 的是一個引用型別那麼原有的return物件會被覆蓋
            

 function fun2(name,age){
                 this.name = name;
                 return {"a":1 ,"b":2};
                 this.age = age;
             }
             var xiaoming = new fun2("小明",12);
             console.log(xiaoming); //{a: 1, b: 2} 原來的return物件就被覆蓋了
             這裡就有把return設定為{}(構架函式的工廠模式四步走)
             function People(name,age){
                var obj = {};
                obj.name = name;
                obj.age = age;
                return obj;
             }
             var xiaoming = new People("小明",12);
             console.log(xiaoming); 

完整的js程式碼 

function fun(age){
				this.name = "小明";
				this.age = age;
				if(this.age < 18){
					console.log("未成年");
				}else if(this.age > 18){
					console.log("成年");
				}else{
					console.log("請輸入年齡");
				}
				return 3;
				this.sex = "男";
				console.log("aa")//"aa""
			}
			
			var obj = new fun();
			var obj2 = new fun();
			var age = new fun(19);
			if(obj === obj2){
				console.log("相等");
			}else{
				console.log("不相等");
			}
			console.log(obj.age); //12
			/***************
			*第二個例子
			****************/
			function fun2(name,age){
				this.name = name;
				return {"a":1 ,"b":2};
				this.age = age;
			}
			var xiaoming = new fun2("小明",12);
			console.log(xiaoming); //{a: 1, b: 2}
			/***************
			*第三 個例子(構架函式的工廠模式四步走)
			****************/
			function People(name,age){
			var obj = {};
			obj.name = name;
			obj.age = age;
			return obj;
			}
			var xiaoming = new People("小明",12);
			console.log(xiaoming);