JavaScript_面向对象——封装

什么是面向对象

JavaScript 中，万物皆对象！但对象也是有区别的。分为普通对象和函数对象，Function 是JS自带的函数对象。

 function f1(){};
 var f2 = function(){};
 var f3 = new Function('str','console.log(str)');
 var o3 = new f1(); 
 var o1 = {}; 
 var o2 =new Object();
 console.log(typeof Object); //function
 console.log(typeof Function); //function
 console.log(typeof o1); //object 
 console.log(typeof o2); //object
 console.log(typeof o3); //object
 console.log(typeof f1); //function
 console.log(typeof f2); //function
 console.log(typeof f3); //function

例如：

面向对象；就是按照JS 的思路去看到一个业务；把一个业务抽象成一个对象，兑现下有很多的属性，通过改变属性值得方式；来操作这个对象。从而完成这个逻辑

var obj1 = {
            name: '小狗',
            dec: '咬人',
        }
        console.log(obj1)
        var obj = new Object();s
        obj.name = '小狗'
        obj['dec'] = '咬人'
        obj.method1 = function(){
            console.log('方法在对象中')
        }
        console.log(obj)

        var animals = new Object()
        animals.name = function (animalName){
             return animalName;
        }
        animals.sex = function(sex){
            return sex
        }
        animals.dec = function(dec){
            return dec
        }
       console.log(animals.name('小猫'))
       console.log(animals.sex('母的'))
       console.log(animals.dec('真可爱'))

二。工厂函数

例如：

// 工厂函数作用；生产对象 （一大堆对象）
var animal = {
name:‘一个狗’,
color:‘black’,
kind:‘拉拉多’
}
// 工厂模式 function birenAnimal(name,color,kind){
return {
name:name,
color:color,
kind:kind,
} } console.log(birenAnimal(‘大狗’,‘白的’,‘藏獒’)) console.log(birenAnimal(‘luyang’,‘黄色’,‘中国人’))
console.log(birenAnimal(‘金胜涛’,‘黑色’,‘混血儿’))

function productPeople(name,sex,food){
return {
name:name,
sex: sex,
food:food,
doing: function(){
if(this.name === ‘刘文彬’){
return this.name+‘吃’+this.food +‘我不打刘文彬，因为就是那个被打的豆豆’
}
return this.name+‘吃’+this.food + ‘打’+‘刘文彬（外号豆豆）’
// this.name+‘打’+‘刘文斌’
}
} }

var res = productPeople(‘单苏荣’,‘女’,‘盒饭’) console.log(res)
console.log(res.doing()) console.log(productPeople(‘胡振华’,‘男’,‘黄焖鸡’))
console.log(productPeople(‘胡振华’,‘男’,‘黄焖鸡’).doing())
console.log(productPeople(‘刘文彬’,‘男’,‘石头’))
console.log(productPeople(‘刘文彬’,‘男’,‘石头’).doing())

练习一

面向对象之工厂函数实现工功能

   <button>1.123</button>
    <script src="./tools.js"></script>
    <script>
        var btn = document.getElementsByTagName('button')[0]

        // 面向对象
        /**
         1:把整个功能抽象成一个对象
         2：分析功能的面向过程，业务逻辑分几步
         3：把每一个要实现的效果拆分为这个对象下的属性。（也可以才分为一个对象）
         4：给每个属性进行赋值；
         5：需要方法来实现的，属性的值为函数，注意 函数中this 指向；（谁调用指向谁）
            我们目的是为了所有操作都通过我们的对象来完成，所以我们要让该函数中this 
            指向我们抽象的这个对象
         6：如果有事件触发；注意事件在事件处理函数中，this 始终指向触发事件的对对象
         7：封装回到初始化的方法；清空innerHTMl中的内容
         */
        //  addNum(btn)

        //   var x = 1;
        //   面向过程
        //   btn.addEventListener('click',function(){
        //       x = parseInt(btn.innerHTML)
        //       btn.innerHTML = ++x
        //   })
        // 面向对象之构造函数
        // function addNum(el) {
        //     this.el = el;
        //     this.x = parseInt(el.innerHTML)
        //     this.chickHandle = chickHandle;
        //     this.removeHandle = removeHandle;
        // }
        // var add = new addNum(btn)
        // function chickHandle() {
        //     var self = this
        //     self.el.onclick = function () {
        //         this.innerHTML = ++self.x
        //     }
        // }

        // function removeHandle() {
        //     this.el.innerHTML = null;
        // }
        // console.log(add)
        // add.chickHandle()
    </script>
    

js文件内容
var btn = document.getElementsByTagName('button')[0]
function addNum(el){
     var o  = {
         el:el, // el 属性作用：保存元素对象
         x: parseInt(el.innerHTML), // x 属性作用就是为了存放元素对象中的文本节点内容
         ev: function(){ // ev 属性作用：为了帮元素对象绑定事件
            // console.log(this) // this 谁调用函数；指向谁
            //  self 保存的是；谁调用指向谁。 o对象调用的
             var self = this 
             self.el.onclick = function(){
                 console.log(this) // this 谁触发事件指向谁
                 this.innerHTML =  self.x++;
             }
         },
         removeEv: function(){ // removeEv 属性的作用；为了清空内容回到初始化
             this.el.innerHTML = null;
         },
     }
     o.ev();
     return o;
 }

练习二

面向对象轮播练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .banner div{
      width: 500px;
      height: 300px;
      background: green;
      color:white;
      font-size:50px;
      line-height: 300px;
      text-align: center;
      display: none
    }
  </style>
</head>
<body>
<div class="view">
  <div class="banner">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <button>上一张</button>
  <button>下一张</button>
</div>


<h1 id="t1"><<</h1>
<h1 id="t2">>></h1>
</body>
<script>
var view=document.getElementsByClassName('view');


function Slider(view){
  var banner=view.children[0];
  var prev=view.children[1];
  var next=view.children[2];
  var y=0;
  var x=0;
  var timer;


  var o={
    nextPage:function(){
      y=x;
      x=x>banner.children.length-2?0:x+1;
      o.show(x);
    },
    prevPage:function(){

      y=x;
      x=x<1?banner.children.length-1:x-1;
      o.show(x);

    },
    show:function(b){
      banner.children[y].style.display="none";
      banner.children[b].style.display="block";
      y=b;
      x=b;
      console.log("show",x,y);
    },
    loop:function(){

      timer=setInterval(o.nextPage,3000);

    },
    stop:function(){

      clearInterval(timer);

    },
    init:function(){
      //初始状态
      banner.children[x].style.display="block";
      // 指向函数时候绑定事件
      next.this.nextPage;
      prev.this.prevPage;
      this.loop();
    }
  }
  o.init();
  return o;
}

var obj=Slider(view[0]);

t1.obj.prevPage;
t2.obj.nextPage;

</script>

</html>

三。构造函数

构造函数；构造器；用来构造对象的
this 作用：指向构造出来的那个对象
this.对象属性 = 值；每个属性都有自己对象的作用，具体做什么由他们后面的值决定

例如：

function strucureObj(kind, name, color) {
this.kind = kind;
this.name = name;
this.colr = color;
this.doing = function () {
alert('胡振华go on')
console.log(this)
}
this.getEL = text;
}
var dog = new strucureObj('拉布拉多', '华振', '绿的')
dog.getEL()
//    console.log(dog)
//    dog.doing()
//    var demo = dog.doing;
//    demo()、

var cat = new strucureObj('狸花猫', '小明', '混合的')
//    console.log(cat)
//    console.log(this.color)  // this

function text() {
console.log('我是text方法；我把这个方法放入到了构造器')
}

四。constructor属性

判断this指向谁的方式：
1：先判断this在哪里；
2：对应位置在那个对象
constructor 每个构造的对象；都有该属性；并且指向构造它们的构造函数，只读属性；不能操作

例如：

 function Cat(name,color){
      this.name = name;
      this.color = color;
      this.eat = function(){
        alert(this.name+'要吃鱼')
      }
      this.dec = function(){
        alert(this.name+'欺负二嘎子')
      }
    }
    var smallCat = new Cat('二嘎的','蓝灰色')
    console.log(smallCat)
    smallCat.eat()
    console.log(smallCat.constructor)
    var tom = new Cat('大黑的','黑的')
    console.log(tom.constructor,'大黑猫')
    alert(smallCat.eat == tom.eat) // false 证明同样的方法；在堆中占了两个内存，所有给两个提供了连个指针

# 五。面向对象-Prototype模式 
Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。 这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。

### 例如：
function Cat(name,color){

　　　　this.name = name;

　　　　this.color = color;

　　}

　　Cat.prototype.type = "猫科动物";

　　Cat.prototype.eat = function(){alert("吃老鼠")};

isPrototypeOf()用来判断，某个proptotype对象和某个实例之间的关系

alert(Cat.prototype.isPrototypeOf(cat1)); //true
alert(Cat.prototype.isPrototypeOf(cat2)); //true

in运算符可以用来判断，某个实例是否含有某个属性，不管是不是本地属性

alert("name" in cat1); // true
alert("type" in cat1); // true