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

下面文章所有的例子（关于什么是构造函数）

例子中完整的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);

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

猜你喜欢