JavaScript中的几种对象的创建方式

1.对象

/* 
        JavaScript是基于对象和事件驱动的解释性脚本语言
        两种思维模式：
            面向过程：注重的是过程，每一步每一步的实现过程
            面向对象：注重的是结果

        对象的特征：封装，继承，多态

        对象的组成：
                属性：静态，对象特征的描述 ----- 》变量
                方法：动态，对象的行为 ------- 》function  
        */

2.面向对象的几种创建方式

(1)字面量：

var obj = {
        "name":"web",
        "eat":function(){
            
        }
    }
    
 */缺点：代码冗余，适合创建单个对象*/

(2)实例对象—> new

var obj = new Object();
    obj.name = "Web"; //添加属性
    //添加方法
    obj.eat = function(){
    } 

*/缺点：代码冗余，适合创建单个对象*/

(3)工厂模式创建

function createO(name){
      var obj = new Object();
      obj.name = name;
      obj.eat = function(){
      }
      return obj
   }
   var obj1 = createO("如花")；
   var obj2 = createO("旺财")；
   
   */缺点：解决了代码冗余的问题但是新的问题是识别不清，不清楚是哪个对象的实例*/

(4)构造函数创建

function Student(name){
      this.name = name;
      this.eat = function(){}
   }
   var obj = new Student("web");
   
   
*/构造函数的特点：
  1.构造函数名首字母大写（为了区分普通函数。不是规定是约定）
  2.调用的时候前面必须加new ，不加和普通函数一样
  3.通过this添加属性和方法
  4.没有return语句，不需要返回对象*/
  
*/new的作用
  1.创建了一个空对象 new Object
  2.让this指向这个空对象，通过this添加属性和方法
  3.让实例对象的原型属性__proto__指向原型对象prototype
  4.返回创建好的对象*/

*/ 缺点：解决了识别不清的问题，但是新的问题是浪费内存*/

(5)原型创建

*/原型对象：prototype，每一个函数在声明的时候，js都会默认创建一个prototype,里面存放共享的公共的属性和方法*/

*/原型属性：__proto__,每一个实例对象创建的时候都会有一个原型属性__proto__,指向构造函数的prototype*/

var arr = new Array(1,2,3,4);
//1.获取原型对象
console.log(Array.prototype);
//2.原型属性
console.log(arr.__proto__);
console.log(Array.prototype === arr.__proto__);//true

//3.原型创建对象
function Student(){}
   Student.prototype = {
       "name":"Web",
       "eat":function(){}
   } 
   
*/解决了内存浪费的问题，但是新的问题是不能传参*/

(6)混合创建 构造函数(可变的)+原型（不变的，共享的）

function Student（name,age）{
       this.name = name;
       this.age = age;
   }

   Student.prototype.eat = function(){}

3.面向对象实例

(1)选项卡

    <button>首页</button>
    <button>焦点</button>
    <button>咨询</button>
    <div style="display:block">首页</div>
    <div>焦点</div>
    <div>咨询</div>
    <script>
        var oBtn=document.getElementsByTagName("button");
        var oDiv=document.getElementsByTagName("div");
        
           for(var i=0;i<oBtn.length;i++){
               oBtn[i].index=i;
               oBtn[i].onclick = function(){
                  for(var j=0;j<oDiv.length;j++){
                      oDiv[j].style.display="none";
                  }
                oDiv[this.index].style.display="block";
    
                       
                   
               }
           }

面向对象选项卡

*/步骤：
 1.声明构造函数
 2.确定属性属性--- 以var声明，并且在别的地方有使用的就作为属性
 3.写方法--- function,放在prototype
*/

 <div id="box">
        <button>首页</button>
        <button>焦点</button>
        <button>咨询</button>
        <div class="box1" style="display:block">首页</div>
        <div class="box1">焦点</div>
        <div class="box1">咨询</div>
    </div>
    <script>
        function Select(id) {
            //确定属性
            var oBox = document.getElementById(id);
            this.oBtn = oBox.getElementsByTagName("button");
            this.oDiv = oBox.getElementsByTagName("div");
            var _this = this;
            for (var i = 0; i < this.oBtn.length; i++) {
                this.oBtn[i].index = i; 7
                this.oBtn[i].onclick = function () {
                    //调用显示div的方法
                    _this.clickFun(this.index);
                    //这里的_this需要说一下，正常来说我们都会想是this.clickFun,clickFun是Select的方法，但是在点击事件里this代表点击对象，是oBtn，所以我们可以在外面存一个代表Select的this所以这里用_this
                }
            }

        }
        //在原型对象中写方法
        Select.prototype.clickFun = function (index) {
            for (var j = 0; j < this.oDiv.length; j++) {
                this.oDiv[j].style.display = "none";
            }
            this.oDiv[index].style.display = "block";

        }
        new Select("box");
    </script>

(2)拖拽

<div></div>
    <script>
        var oDiv = document.getElementsByTagName("div")[0];
        oDiv.onmousedown = function(ev){
            var ev = window.event||ev;
            var x=ev.clientX-oDiv.offsetLeft;
            var y=ev.clientY-oDiv.offsetTop;
            document.onmousemove = function(ev){
                var ev = window.event||ev;
                var l=ev.clientX;
                var t=ev.clientY;
                oDiv.style.top=t-y+"px";
                oDiv.style.left=l-x+"px";

            }
           
        }
        oDiv.onmouseup = function(){
                document.onmousemove=null;
            }
    
    
    </script>

面向对象拖拽

<div id="box1"></div>
    <div id="box2"></div>
    <script>
        //创建构造函数
        //属性，方法
        function Move(id) {
            this.oDiv = document.getElementById(id);
            this.x = 0;
            this.y = 0;
            var _this = this;
            this.oDiv.onmousedown = function (ev) {
                _this.mouseDown();
                document.onmousemove = function (ev) {
                    _this.mouseMove();
                }
                document.onmouseup = function () {
                    _this.mouseUp();
                }
            }
        }
        Move.prototype.mouseDown = function () {
            var ev = window.event || ev;
            this.x = ev.clientX - this.oDiv.offsetLeft;
            this.y = ev.clientY - this.oDiv.offsetTop;
        }
        Move.prototype.mouseMove = function () {
            var ev = window.event || ev;
            var l = ev.clientX;
            var t = ev.clientY;
            this.oDiv.style.top = t - this.y + "px";
            this.oDiv.style.left = l - this.x + "px";
        }
        Move.prototype.mouseUp = function () {
            document.onmousemove = null;
        }
        new Move("box1");
        new Move("box2");        
    </script>