笔记：1117

三种对象的创建方式：
对象：特指某个事物，具有属性和方法（一组无序的属性的集合）
特征：---->属性
行为：---->方法
1.字面量的方式

var person={
    name:"xiao ming",
    age:20,
    sex:"man"
    eat:function(){
        console.log("eat foods");
    }
};

2.调用系统的构造函数

var person2=new Object();
person2.name="xiao ming";
person2.age=20;
person2.sex="man";
person2.eat=function(){
    console.log("eat foods");
};

3.自定义构造函数的方式

function Person(name,age,sex){
    this.name=name;
    this.age=age;
    this.sex=sex;
};
var per=new Person("xiao ming",20,"man");
console.log(per instanceof Person);

工厂模式和自定义构造函数的区别

--创建对象---实例化一个对象的同时对属性进行初始化

function Person(name,age,sex){
    this.name=name;
    this.age=age;
    this.sex=sex;
};
var per=new Person("xiaoming",20,"man");

1>开辟空间存储对象
2>把this设置为当前对象
3.设置属性和方法的值
4.把this对象返回
工厂模式创建对象

function createObject(name,age){
    var obj=new Object();
    obj.name=name;
    obj,age=age;
    obj.sayHi=function(){
        console.log("Hello");
    };
    return obj;
}

共同点：都是函数，都可以创建对象，都可以传入参数
不同点：
工厂模式：
函数名是小写
有new
有返回值
new 之后的对象是当前的对象
自定义构造函数：
函数名是大写（首字母）
没有new
没有new 和 没有返回值
this是当前的对象构造函数和实例对象之间的关系
--面向对象的思想---抽象的过程--实例化的过程
console.dir(per);--把对象的结构显示出来
总结：
    1.实例对象是通过构造函数来创建的--穿件的过程叫实例化
    2.如何判断对象是不是这个数据类型
        1>通过构造函数的方式 实例对象，构造器==构造函数名字
        2>对象 instanceof 构造函数名字
        尽可能的使用第二种方式来识别
原型--数据共享，节省内存空间

function Person(name,age){
    this.name=name;
    this,age=age;
}
Person.prototype.eat=function(){
    console.log("eat foods");
}

function ChangeStyle(btnObj,dvObj,json){
    this.btnObj=btnObj;
    this.dvObj=dvObj;
    this.json=json;
}
ChangeStyle.prototype.init=function(){
    var that=this;
    this.btnObj.onclick=function(){
        for(var key in json){
            that.dvObj.style[key]=that.json[key];
        }
    };
};

构造函数--实例对象--原型 之间的关系
构造函数可以实例化对象
构造函数中有一个属性叫prototype，是构造函数的原型对象
构造函数的原型对象（prototype）中有一个constructor构造器，这个构造器指向的就是自己所在的原型对象所在的构造函数
实例对象的原型对象(__proto__)指向的是该构造函数的原型对象
构造函数的原型对象（prototype）中的方法是可以被实例对象直接访问的

原型中的方法  实例对象的方法是可以相互调用
原型中的方法是可以相互访问的

function Animal(name,age){
    this.name=name;
    this.age=age;
}
Animal.prototype.eat=function(){
    console.log("eat food");
    this.play();
};
Animal.prototype.play=function(){
    console.log("football")
    this.sleep();
};
Animal.prototype.sleep=function(){
    console.log("sleep");
};
var dog=Animal("dog",20);
dog.eat();

实例对象使用的属性和方法层层的搜索
实例对象使用的属性或者方法，先在实例中查找，找到了直接使用，
找不到去实习对象的___proto__指向的原型对象prototype中找，找到了则使用，找不到则报错

为内置对象添加原型的方法
把局部变量变成全局变量  把局部变量给 window

 产生随机数对象
 通过自调用函数产生一个随机数，在自调用函数外面，调用该随机数对象方法产生
 (function(window){
     //产生随机数构造函数
     function Random(){

     } 
     //在原型对象中添加方法
     Random.prototype.getRandom=function(min,max){
         return Math.floor(Math.random()*(max-min)+min);//传入一个范围
     };
     //把Random对象宝漏给顶级对象window--->外部可以直接使用这个对象
     window.Random=new Random();
 })(window);
 var rm=Random();

随机小方框：

<div class="map" id="map"></div>
    <script src="../../function/function.js"></script>
    <script>
    (function(window){
        function Random(){}
            Random.prototype.getRandom=function(min,max){
                return Math.floor(Math.random()*(max-min)+min);
            };
            window.Random=new Random();
        })(window);
        console.log(Random.getRandom(0,5));
    (function(window){
        //选择器的方式来获取元素对象
        var map=document.querySelector(".map");

        //事物构造函数
        function Food(width,height,color){
            this.width=width||20;//默认的小方框的宽
            this.height=height||20;//默认小方框的高
            //横坐标  纵坐标
            this.x=0;//横坐标随机产生
            this.y=0;//纵坐标随机产生
            this.color=color;//小方框的背景颜色
            this.element=document.createElement("div");//小方块的元素
        }
        //初始化小方块的显示的效果及位置--显示在地图上
        Food.prototype.init=function(map){
            //设置小方块的样式
            var div=this.element;
            div.style.position="absolute";
            div.style.width=this.width+"px";
            div.style.height=this.height+"px";
            div.style.backgroundColor=this.color;
            //把小方块加到map地图中
            map.appendChild(div);
            this.render(map);
        };
        //产生随机位置
        Food.prototype.render=function(map){
            //随机产生横纵坐标
            var x =Random.getRandom(0,map.offsetWidth/this.width)*this.width;
            var y =Random.getRandom(0,map.offsetHeight/this.height)*this.height;
            this.x=x;
            this.y=y;
            var div=this.element;
            div.style.left=this.x+"px";
            div.style.top=this.y+"px";
            console.log(x+"--------"+y);
        };
        var fd= new Food(20,20,"green");
        fd.init(map);
        console.log(fd.x+"=================="+fd.y);
    })(window);
 </script>