JS------面向对象

面向对象

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.继承方式