JS原型、及new关键字(学习原型后的补充)、及相关案例

86 阅读2分钟

实例化对象:这里的obj就是实例化的对象:

  var obj=new fn()
  

注意:在原型上追加属性或方法,让所有实例化对象得到继承test:Object.prototype.test=....

image.png

image.png

函数自己有的属性:

1.name(保存了一个字符串,就是函数的名字)

2.length(保存了一个数字,就是函数的形参个数)

3.prototype(保存了一个对象,这个对象是new Object()/{})

原型对象:所有的对象都有一个属性叫__proto__:代表的是这个对象的原型对象

函数有prototype属性:代表创建的对象的原型对象;

原型对象可以访问对象;

构造函数就是在原型对象的基础上拓展出来的;

原型思想:就是内存共用的思想。

理解的重点:用函数创建对象(就是使用了new关键字),创建出来的对象的原型对象就是prototype属性引用的对象

new关键字的补充:

数组:new Array():传入多项参数即参数都是数组的值,传入一项的参数&参数是数字类型,即数组存值的情况

 函数:new fn()

操作步骤:

 1.创建了一个空对象==>创建了一个空对象{},给它添加一个属性__proto__,这个属性引用fn.prototype
 
 2.运行fn函数,函数内部的this就是创建的这个对象({__proto__:fn.prototype})
 
 3.new fn()表达式会生成一个结果,这个结果一般就是那个创建的对象
       1.返回值是引用数据,那么就是返回值(引用数据)
       2.返回值不是引用数据,那么返回值就是这个构造函数运行完毕之后的创建的那个对象。

案例:

1.代码:

<script type="text/javascript">
			function fn(){
				this.life=1;
			}
			fn.prototype.color="red";
			var f1=new fn();
			f1.age=20;
			var f2=new fn();
			var f3=new fn();
			console.log(f1.color===f2.color&&f2.color===f3.color);
			console.log(f2.age)
		</script>

答案:

image.png

2.代码:要求画出它的内存示意(只画a)

<script type="text/javascript">
			function fn(){
				this.a=20;
			}
			function fm(){
				this.a=30;
			}
			fm.prototype.fn=new  fn();
			//fm.prototype={fn:{a=20,__proto__:{}}}
			//new fn()==>{__proto__:fn.prototype}==>{a:20,__proto__:{}}
			var f1=new fm;
			//f1={a:30,__proto__:fm.prototype}
			console.log(f1)//要求画出它的内存示意(只画a)
		</script>

答案:

image.png

image.png

3.代码:

<script type="text/javascript">
			function fn(eye){
				this.life=1;
				this.eye=eye;
			}
			var a1=new fn(2);//a1={__proto__:fn.prototype,life:1,eye:2}
			function fm(birthday,name){
				this.birthday=birthday;
				this.name=name;
			}
			fm.prototype=a1;
			//fm.prototype={__proto__:fn.prototype,life:1,eye:2}
			var p1=new fm("2022-02-26","karen");
			//p1={birthday:"2022-02-26",name:"karen",prototype:{__proto__:fn.prototype,life:1,eye:2}}
		console.log(p1)
		console.log(a1)
		</script>
                    

答案:

image.png