面向对象
1.概念
面向对象:编码的一种思维方式
面向过程:注重过程(一步一步实现某个功能)
面向对象:注重结果(把所有和这个对象相关的所以功能都封装在一个对象中,使用的时候直接调用就可以)
-
组成:
- 属性 — 特征描述,静态 ------- var
- 方法— 行为,功能,动态 ---- function
-
对象三大基本特征
- 封装
- 继承
- 多态 : 一个对象的不同表现形式
2.创建方式
2.1字面量创建
var girlFriend1 = {
"name":"如花",
"age":80,
"height":150,
"weight":150
}
console.log(girlFriend1);
console.log(girlFriend1.name);
优点:直观
缺点:代码冗余,适合创建单个对象
2.2 关键字new创建
//1.关键字new创建
var star = new Object();
//添加属性
star.name = "帝都白少";
star.age = 24;
//添加方法
star.wyy = function(){
console.log("音乐的力量");
}
console.log(star);
console.log(star.name);
//调用方法
star.wyy();
优点:标准创建,通过new创建
缺点:代码冗余
2.3 工厂模式创建
function createStar(name,age,sex){
//1.创建空对象(原材料)
var obj = new Object();
//2.添加属性 (加工)
obj.name = name;
obj.age = age;
obj.sex = sex;
//3.添加方法
obj.skill = function(){
console.log("唱跳rap,长的好看,喜欢篮球,闪电五连,china");
}
//4.返回创建好的对象(出厂)
return obj;
}
//创建对象
var star1 = createStar("马保国",67,"男");
console.log(star1);
star1.skill(); //调用方法 唱跳rap,长的好看,喜欢篮球,闪电五连
var star2 = createStar("川建国",72,"男");
console.log(star2);
star2.skill();
var star3 = createStar("大黄",2,"男");
console.log(star3);
console.log(typeof star1,typeof star2,typeof star3); //object object object
//当前对象是否由右边的对象创建
console.log(star3 instanceof Object); //true
优点:解决了代码冗余的问题,适合批量创建
缺点:识别不清
2.4 构造函数创建
构造函数特点:
1.构造函数名首字母大写,为了区分普通函数
2.不需要创建对象,属性和方法直接添加在this上,不需要return
3.构造函数调用,前面一定要加new,不加new,就和普通函数一样了
//1.声明构造函数
function Teacher(name,age,sex){
//1.隐式创建了一个空对象 new Object
//2.让this指向这个空对象 this = new Object();
//添加属性
this.name = name;
this.age = age;
this.sex = sex;
//添加方法
this.skill = function(){
console.log("插队,淦饭");
}
//5.隐式返回创建好的对象 return this
}
//2.实例化对象
var t1 = new Teacher("小夏",18,"女");
console.log(t1);
console.log(t1.name); //小夏
t1.skill();//插队,淦饭
-
new操作符的作用?
1.隐式的创建了对象 new Object 2.让this指向这个空对象 3.让实例对象的__proto__指向构造函数的prototype 4.执行函数代码 给this添加了属性和方法 5.隐式返回创建好的对象
优点:识别明确,批量创建
缺点:浪费内存,一样的属性和方法存储多次
2.5原型创建
2.5.1原型
-
原型对象prototype:每一个函数在声明的时候,都会创建一个原型对象prototype,用于存储公共的共享的属性和方法
-
原型属性__proto__:每一个实例对象在创建的时候,都会创建一个原型属性__proto__,这个原型属性指向prototype
//1.获取原型 console.dir(String); console.log(String.prototype); //原型对象 //console.log(String.prototype.indexOf()); //获取原型中的方法 //2.获取原型属性 var s1 = new String("12"); console.log(s1.__proto__); //原型属性 console.log(String.prototype == s1.__proto__); //true
2.5.2原型创建对象对象
//1.声明一个构造函数
function Student(){};
//2.在原型中添加属性和方法
Student.prototype.name = "小二";
Student.prototype.age = "18";
Student.prototype.study = function(){
console.log("沉迷学习,逐渐自闭");
}
//3.实例化对象
var s1 = new Student();
console.log(s1);
console.log(s1.name);
//4.原型链:一种查找方式,先找实例本身,如果有就用自己的,如果没有就会取__proto__属性中查找
var s2= new Student();
console.log(s2);
console.log(s2.name);
优点:解决了内存浪费的问题
缺点:不能传参,创建出来的都一样
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7L6wAfas-1610261339505)(无标题.png)]
2.6 混合创建(构造函数+原型)
//混合创建:构造函数(可变的)+原型(共享的、不变的内容)
//1.声明构造函数
function Student(name,age,sex){
//添加属性
this.name = name;
this.age = age;
this.sex = sex;
}
//2.在原型中添加共享的属性和方法
Student.prototype.classId = "1116";
Student.prototype.name = "小夏";
Student.prototype.study = function(){
console.log("good good study,day day sleep!");
}
//3.实例化对象
var s1 = new Student("小芳",12,"男");
console.log(s1);
console.log(s1.name); //小芳
var s2 = new Student("小夏",12,"男");
console.log(s2);
console.log(s2.name); //小夏
console.log(s1.study == s2.study); //true; 原型中的就一个
优点:能够传参,节约内存
缺点:破坏封装型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tx3MDAVT-1610261339507)(混合创建.png)]
2.7动态混合创建
3.实例
1.构造函数
标签作为对象的属性
添加一个入口方法 init 在这个方法中进行循环事件操作
事件里面的操作,会放到一个方法里面
2.实例化对象
function TabSwitch(){
//1.添加属性
this.menus = document.getElementsByTagName("button");
this.items = document.getElementsByTagName("div");
console.log(this); //TabSwitch创建的对象
var that = this; //在this指向对的时候,存储一份
//2.添加一个入口方法
this.init = function(){
for(var i = 0;i<this.menus.length;i++){
this.menus[i].index = i;
this.menus[i].onclick = function(){
//会把事件发生时要执行的操作,放在一个方法中
//事件处理函数中的this---触发事件的对象(点谁就是谁)
that.changeItem(this.index);
}
}
}
//入口方法都是自己调用
this.init();
//切换div的方法
this.changeItem = function(index){
for(var j = 0;j<this.items.length;j++){
this.items[j].style.display = "none";
this.menus[j].className = "";
}
this.items[index].style.display = "block";
this.menus[index].className = "active"
}
}
//2.创建实例对象
new TabSwitch();
4.继承方式
s.length;j++){
this.items[j].style.display = “none”;
this.menus[j].className = “”;
}
this.items[index].style.display = “block”;
this.menus[index].className = “active”
}
}
//2.创建实例对象
new TabSwitch();
## 4.继承方式