面向对象/继承/冒充

笔记
1：e1.preventDefault();这是组织浏览器的默认行为产生。
2：function(e1) 函数里加上e ，防止时间冒泡出现，冒泡就是时间影响其他地方的事件。
3：num=e.keyCode; num= e此时键盘按下的数值。
4： e.clientX x坐标 。
5：属性是否只存在对象中 用 对象.hasOwnProperty("属性")

6：构造函数的 原型 用 prototype
对象用 proto

7：Array 中 新增一个方法x，可以压入一个元素

Array.prototype.x1=function(a){

this.push(a)

}
8：console.log(dog instanceof Dog) 判断dog是不是Dog的对象(实例)

9：document.body.offsetHeight
document.body.offsetWidth获取此时屏幕的 宽 长。

10：构造函数都存在1个隐藏的对象 原型对象 prototype
11：获取当前滚动条的位置
var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

12：//仅用 Dogkj.prototype= new Dog();不能传参数 否则后面新建全是这个参数；

13：冒充只能冒充 函数里面的属性，写在外面的行为不能冒充

14： 游戏引擎，因为只有一个，用 字面量的形式会更好；

var gGameBox = {
    
    rows: 20,  // 行数
    
    cols: 20,  // 列数

    allTds: [], // 存储所有的td元素对象
    
    // 方法： 游戏开始
    start: function() {

        gGameBox.init(); // 游戏初始化
        
    },
    
    // 初始化
    init: function() {
        // 场景布置好, 用表格来做
        var oTable = document.createElement("table");
    
        for (var i = 0; i < gGameBox.rows; i++)
        {
            // 创建tr
            var oTr = document.createElement("tr"); 

            // 每一行，定义1个空数组
            var arr = [];

            for (var j = 0; j < gGameBox.cols; j++) {
                // 创建td
                var oTd = document.createElement("td"); 

                oTr.appendChild(oTd);

                // 将td放到空数组中
                arr.push(oTd);
            }
            // 将当前行所有的td，压入到 allTds 属性中
            gGameBox.allTds.push(arr);

            oTable.appendChild(oTr);
        }

        // 添加到body
        document.body.appendChild(oTable);
    }



};

面向对象写 鼠标拖动的物体：
1：先获取物体

var oImg = document.getElementById("box")

2:鼠标按下 开始运行函数oImg.onmousedown= function(e1){
因为鼠标拖动后物体移动是的点在 物体的左上角，所以要算一下：（1）鼠标到物体边缘的长度
var dateX = e1.clientX -oImg.offsetLeft;
（2）鼠标放在物体里开始移动，物体的左上角与鼠标的差值，var x = e2.clientX -dateX ;
（3）把鼠标所在的left top 赋值给物体的left top:oImg.style.left= x+"px"
oImg.style.top= y+"px"
（4）鼠标抬起事件，不让物体移动：oImg.onmouseup=function(){
window.onmousemove=null;D
}
整个函数就是

var oImg = document.getElementById("22")

    oImg.onmousedown= function(e1){
        e1.preventDefault();
        var dateX = e1.clientX -oImg.offsetLeft;
        var dateY = e1.clientY -oImg.offsetTop;
        console.log(e1.clientX+","+oImg.offsetLeft+"</br>")
        window.onmousemove=function(e2){
            var x = e2.clientX -dateX ;
            var y = e2.clientY -dateY ;
            console.log(e2.clientX+","+dateX)
        oImg.style.left= x+"px"
        oImg.style.top= y+"px"
        }
        //图片顶点左边  按照这个移动
    }
    oImg.onmouseup=function(){
        window.onmousemove=null;D
    }

面向对象方法
1：先找到对象 function Box(){
this.ele=document.getElementById("a22")
}
2:设置属相 之前要保留this,为了和后面程序混淆，不知this 所指。
var state=this;
3：对象的行为-（1） 鼠标按下事件

this.ele.onmousedown=function(e){
        e.preventDefault();

        state.dateX=e.clientX-state.ele.offsetLeft;
        state.dateY=e.clientY-state.ele.offsetTop;

        state.star();

        document.onmouseup=function(){
            state.stop();
        }
    }

15:

鼠标按下后- 组织浏览器默认行为-计算小差值-调用开始-鼠标抬起停止；
（2）开始行为

this.star=function(e){
        document.onmousemove=function(e){
        var x = e.clientX - state.dateX;
        var y = e.clientY - state.dateY;
            state.move(x,y);
        }
    }

计算鼠标移入物体移动的差值-并且调用移动
（3）移动 计算的数值赋值给物体

this.move=function(x,y){
        state.ele.style.left=x+"px"
        state.ele.style.top=y+"px"
    }

（4）停止行为
this.stop=function(){
document.onmousemove=null
}
4：调用对象 var a=new Box();
a.move(40,50);
可以直接设置物体的初始位置。

总结： 面向对象一环套一环。因为时间是连续的。
可以 继承 并且修改继承。

继承 /冒充
function A(){
B.call(this,参数)
}
这段程序是A 要继承B的属性 ，this 不能省略，this 后面 的参数是继承的第一个参数。
A.prototype = new B(); A要继承B的行为，还可以继承后再修改。
A.prototype.move=function(x，y){
B.prototype.move.call(this,x,y)
this.ele.innerHTML=x+","+y;
}
A继承B的move行为的（x,y）
并且继承过来后修改了move.
new A();调用A；