JS进阶之原型,原型链,继承

(一)原型
1.原型是function对象的一个属性,它定义了构造函数制造出的对象的公共祖先,通过构造函数实例化的对象可以继承该原型的属性和方法,原型也是对象

2.实例对象可以访问自己的属性和方法,也可以访问原型对象的属性和方法,实例对象和原型对象都有的属性和方法,访问的是实例对象的

3.利用原型的特点,将共有的属性和方法放到原型中,实例对象可以继承原型中的属性和方法,但不能修改/删除原型上的方法和属性,可以修改自己的属性和方法

			// 增
			peo.age = '18'
			// 删           delect + 空格 + 对象名.属性名/方法名
			delete peo.name;
			// 改
			peo.sex = '女';
			// 查           对象名.属性名/方法名            对象名[属性名/方法名]
			//console.log(peo['sex4']);

4.constructor 用实例对象访问到其构造函数

5.查看对象属性和方法可以用 . 和 [] 数字只能用[] ,字符串可以用 . 也可以用 [] ,用[]要加引号

(二)原型规则和示例
1.所有的引用类型都具有对象特性,可自由扩展,null除外

			var obj = {}
			obj.a = 100;
			console.log(obj);//{a: 100}

			function fn1(){}
			fn1.c = 200;
			console.log(fn1['c']);

2.所有的引用类型都有一个__proto__属性(隐式原型),数值是一个普通对象

3.所有函数都有一个prototype的属性(显式原型),属性值也是一个普通对象

4.隐式原型的属性值指向它构造函数的prototype的属性值

5.如果要得到对象的某个属性,如果对象自身没有这个属性就会去它的原型上寻找

(三)原型链
1.如何构成原型链

			Grand.prototype.xing = '张'
			function Grand(){}//祖父级构造函数
			var g1 = new Grand();//实例化一个祖父
			
			Father.prototype = g1;//将实例化的祖父赋值给父级构造函数的原型
			function Father(){}//父级构造函数
			var f1 = new Father();//实例化一个父
			
			Son.prototype = f1;//将实例化的父赋值给子级构造函数的原型
			function Son(){}//子级构造函数
			var s1 = new Son();//实例化一个子
			
			console.log(s1.xing);//张

2.实例对象只能查看其原型链上的属性,不能增删改查

3.从原型链上看到原型对象也有原型,最终指向Object

(四)继承
1.传统形式----用原型链继承 弊端:过多继承没用的属性和方法 已被弃用

2.通过构造函数继承 用call和apply的方法实现
弊端:
①不能继承借用的构造函数原型上的属性和方法
②每次都要调用构造函数,运行上未简化

3.共享原型继承 ,将父的原型赋值给子的原型
弊端:不能随便改动自己的原型,改动对影响所有的共享原型的实例对象

4.圣杯模式

			//继承圣杯模式
			//功能:实现原型共享继承,同时相互之间尽量不影响
			//target:构造函数
			//origin:构造函数
			function gongXiang(target,origin){
				function M(){};  //声明一个构造函数(桥梁作用)
				M.prototype = origin.prototype;//将origin的原型和M的原型共享
				target.prototype = new M();//将target的原型的构造函数变为M()
				target.prototype.constructor = target;//将target的原型的构造函数拉回来变为target
				target.prototype.uber = origin.prototype;//将origin的原型和target.prototype.uber共享
			}
			
			Fu.prototype.money = '1亿';
			Fu.prototype.fangzi = '别墅';
			Fu.prototype.sex = '男';             //给Fu原型上添加属性和方法
			function Fu(){};		构造函数 ----origin的实参
			function Zi(){};		构造函数 ----target的实参

			gongXiang(Zi,Fu);		//调用原型共享的函数并传参
			
			Zi.prototype.sex = '女';          	 //随意改动/添加target的原型上的任意属性和方法

			var z1 = new Zi();		//实例化target实参对象
			console.log(z1);		//仍是自己原型上的属性和方法,不受origin实参的影响
			
			var f1 = new Fu();		//实例化origin实参对象
			console.log(f1);		//仍是自己原型上的属性和方法,不受target实参的影响
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值