JS的原型

原型的思想:内存共用

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

<script>
    	function  fn (firstName) { //构造函数
				this.life=1
				this.firstName=firstName
				this.sayName=function(){
					console.log(this.firstName)
				}
			}
			
			 var f1=new fn("张")//得到结果{life:1,firstName:"张",sayName:func}
			var f2=new fn("李")//得到结果{life:1,firstName:"李",sayName:func}
			console.log(f1==f2) //false 因为是两个对象
            console.log(f1.__proto__ === f2.__proto__) 
             //true 因为同一个构造函数创建出来的对象的原型对象是同一个
            //同一个函数创建出来的对象们 具有相同的空间结构和功能
</script>

内存共用体现:

<script>
    function  fn (firstName) {
				this.life=1
				this.firstName=firstName
				this.sayName=function(){
					console.log(this.firstName)
				}
			}
			var f1=new fn("张")
			var f2=new fn("李")
			f1.__proto__.age=23 //为原型对象设置一个age属性
			console.log(f2.age)//23 f2对象在对象内查找age属性,找不到的时候就往原型对象内查找
</script>

prototype属性是函数自带的属性

用函数创建对象,创建出来的对象的原型对象就是prototye属性引用的对象

<script>
    	function  fn () {
				this.life=1
			}
			//隐式操作:fn.prototye={}
			
			function fm(){
				this.color="black"
			}
			//隐式操作:fm.prototye={}
			
			var f1=new fn()
			var f2=new fm()
			
			console.log(f1.__proto__===f2.__proto__) //false 因为f1 f2是不同的函数创建的对
//象,原型对象不同
			console.log(f1.__proto__===fn.prototype)//true 因为函数的prototype属性引用的数据是函数创建的对象的原型对象

			console.log(f2.__proto__===fm.prototype)//true 同上
			console.log(f1.__proto__===fm.prototype) //false f1是由fn创建的对象
</script>

引入原型思想后,new关键字创建对象过程

<script>
    //1.创建一个空对象==> 创建一个空对象{}
    //2.给它添加一个属性 __proto__ ==>{__proto__:{}} 这个属性引用fn.prototype
    //3.获取构造函数中的数据
    //4. new fn()表达式会生成一个结果  这个结果一般就是那个创建的对象  如果函数返回值是引用
//数据 创建的对象就销毁了 返回值作为表达式的结果

    	function fn(){
				this.a=20
			}
			//隐式操作:fn.prototye={}
			
			function  fm () {
				this.a=30
			}
			//隐式操作:fm.prototye={fn:{a:20,__proto__:{}}}
			
			
			fm.prototype.fn=new fn() //为fm的原型对象添加一个fn属性,值为fn函数创建的对象
            //new fn()==>{__proto__:fn.prototye}==>{a:20,__proto__:{}}
			
			var f1=new fm() 
			//new fm()
			//{__proto__:fm.prototype,a:30}==>{__proto__:{fn:{a:20,__proto__:{}}},a:30}
			
			
			console.log(f1)
			//{a:30,__proto__:{fn:{a:20}}}
</script>

小结:

对象有__proto__属性 代表它的原型对象

函数有prototye属性 代表创建的对象的原型对象

此外原型对象可以访问成员

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值