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

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

 

這節對原型鏈的學習

最下面有所有的會用到的完整js程式碼

講解

每一個函式都有一個屬性叫做prototype,指向一個物件(不是函式就沒有這個屬性),當這個建構函式被new的時候,他的每一個例項的__proto__屬性,也指向這個物件
            __proto__是神器,有原鏈查詢功能,當new出來的物件本身沒有這個屬性的時候,系統會沿著__proto__去尋找他的原型身上沒有的這個屬性
          

 相當於:console.log(People.prototype === xiaomio.__proto__); //true
            function People2(name,age,sex){
                this.name = name;
                this.age = age;
                this.sex = sex;
                }
                People2.prototype = { //每一個建構函式都有一個屬性叫做prototype,指向一個物件。
                    "teacher : "考拉",
                    "zhishang" : 180,
                    "gongzi" : 30000
                }
            
            var xiaomio2 = new People2("小明",19,"男");
            console.log(xiaomio2.teacher); //考拉 (當這個函式被new的時候,他的每一個例項的__proto__屬性,也指向這個物件,所以當原來的物件沒有這個屬性的時候系統會沿著__proto__去尋找他的原型身上沒有的這個屬性)


            那麼他們prototype值向的物件的同一個所以不管是xiaomio2還是xiaoho2他們指向的物件都是同一個所以是true
          

  var xiaomio2 = new People2("小明",19,"男");
            var xiaoho2 = new People2("小紅",12,"女");
            console.log(xiaoho2.teacher === xiaomio2.teacher); //true


            小例子
          

 function People3(name,age,sex){
                this.name = name;
                this.age = age;
                this.sex = sex;
                }
            People3.prototype = Math;
            var xiaomio3 = new People3("小明",19,"男");
            console.log(xiaomio3.random()); //0.30685614374013936


            解析:
            當People3的prototype指向了Math的屬性的時候,那麼people3 new出來的物件也可以通過__proto__來獲得Math的屬性
            所以解決上文例題一中如何可以讓他們的函式都相同,就是把函式放到prototype物件中(原型上定義方法),這樣new出來的物件都值想同一個prototype從而達到了她們的物件相同
          

 function People4(name,age,sex){
                this.name = name;
                this.age = age;
                this.sex = sex;
                
            }
            People4.prototype = {
                sayHello : function(){
                    alert("你好我是"+this.name+"我的年紀為"+this.age+"我的性別是"+this.sex);
                }
            }
            var xiaomio4 = new People4("小明",19,"男");
            var xiaoho4 = new People4("小紅",12,"女");
            console.log(xiaoho4.sayHello === xiaomio4.sayHello); //true    

影象的理解

指向相同的物件堆內地址也相同所以為true

所有程式碼: 

function People(name,age,sex){
				this.name = name;
				this.age = age;
				this.sex = sex;
				this.sayHello = function(){
					alert("你好我是"+this.name+"我的年紀為"+this.age+"我的性別是"+this.sex);
				}
			}
			var xiaomio = new People("小明",19,"男");
			var xiaoho = new People("小紅",12,"女");
			console.log(xiaoho); //People {name: "小紅", age: 12, sex: "女", sayHello: ƒ}
			console.log(xiaomio); //People {name: "小明", age: 19, sex: "男", sayHello: ƒ}
			if(xiaoho.sayHello === xiaomio.sayHello ){
				console.log("相等");
			}else{
				console.log("不相等") //不相等
			}
			console.log(People.prototype === xiaomio.__proto__); //true
			//這裡說明了雖然他們的物件的方法值相同,但他們不全等(和建構函式的原理一樣,值一樣但位置不同所以不全等引用型別的比較和基本型別的比較的區別就是在這裡)
			//那如何可以讓他們想等?下面就是原型鏈
			/*********
			*案例二
			**********/
			function People2(name,age,sex){
				this.name = name;
				this.age = age;
				this.sex = sex;
				}
				People2.prototype = {
					"teacher": "考拉",
					"zhishang" : 180,
					"gongzi" : 30000
				}
			
			var xiaomio2 = new People2("小明",19,"男");
			var xiaoho2 = new People2("小紅",12,"女");
			console.log(xiaoho2.teacher === xiaomio2.teacher); //true
			console.log(xiaomio2.teacher); //考拉
			/*********
			*小例子
			**********/
			function People3(name,age,sex){
				this.name = name;
				this.age = age;
				this.sex = sex;
				}
			People3.prototype = Math;
			var xiaomio3 = new People3("小明",19,"男");
			console.log(xiaomio3.random()); //0.30685614374013936
			/*********
			*解決的例子
			**********/
			function People4(name,age,sex){
				this.name = name;
				this.age = age;
				this.sex = sex;
				
			}
			People4.prototype = {
				sayHello : function(){
					alert("你好我是"+this.name+"我的年紀為"+this.age+"我的性別是"+this.sex);
				}
			}
			var xiaomio4 = new People4("小明",19,"男");
			var xiaoho4 = new People4("小紅",12,"女");
			console.log(xiaoho4.sayHello === xiaomio4.sayHello); //true