构造函数与原型链和面向对象的学习(二)

这节对原型链的学习

最下面有所有的会用到的完整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

构造函数与原型链和面向对象的学习(二)

猜你喜欢