面对对象_逆战班

对象创建方式
1.字面量创建
在这里插入图片描述
弊端:代码冗余。

2.借助内置构造函数创建具体的对象
在这里插入图片描述
弊端:代码冗余

3.通过工厂函数创建具体的对象
在这里插入图片描述
弊端:无法判断对象属于哪一个类型。

4.自定义构造函数
在这里插入图片描述
弊端:每个实例调用的方法应该是一致的,但是实际上在生成实例时,各自都创建了自己的方法。消耗了内存。

This指向
指导思想:谁调用这个函数或者方法,this就指向谁;
箭头函数里的this指向定义时所在环境中的那个this对象。
例如:构造函数里this是指向实例
在这里插入图片描述
1.创建一个新对象
2.改变this指向,指向这个新对象
3.执行构造函数里的代码,给这个新对象添加属性和方法
4.返回这个新对象

原型对象
每个函数都有的一个属性,prototype;
原型对象上的属性和方法能被实例所访问;
解决了多个实例相。同的方法指向不一样的问题,但是无法添加自己的属性值。
例如:
在这里插入图片描述
原型链
每一个构造函数都有一个原型对象,原型对象上的属性和方法能被实例所访问,每一个实例上有指向这个原型对象的内部指针__proto__。
让一个类型(构造函数)的原型对象 等于另外一个类型的实例的话,如:FnA.prototype = new FnB(); //new FnB()创建了一个FnB的实例,这个实例里面有一个__proto__,指向FnB.prototype。
在这里插入图片描述 在这里插入图片描述
让FnB原型对象具有c属性,让FnA原型对象里具有b属性;

总结:每一个构造函数都有一个原型对象,每一个原型对象上都有一个指向构造函数的指针(constructor),每一个实例上有指向这个原型对象的内部指针__proto__,原型对象上的属性和方法能被实例所访问到

案例应用_tab切换
HTML部分:
在这里插入图片描述
CSS部分:
在这里插入图片描述
JS部分:
在这里插入图片描述
成果:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/hj_6321567/article/details/104465347