js面向对象（二）

把方法包在一个Json里

命名空间

在公司里，把同一类方法，包在一起

json不适合多个对象

var json = {
    a:12,
    b:15,
    c:'abc',
    d:function(){
        alert('a')
    }
};
alert(json.a)//=>12
json.d();//=>a

---

var json = {
    a:12,
    show:function(){
        alert(this);//=>object
        console.log(this);
        
  }
};
json.show();//当前方法的所属=》obj

---

var json = {
    name:'nainai',
    qq:'39456238',
    showName:function(){
    alert('My name :'+this.name);//=>My name :nainai
    },
    showQq:function(){
        alert('My qq :'+this.qq);//=>My qq :39456238
    }
};
json.showName();
json.showQq();

---

命名空间：解决让相同名字的函数同时存在

var zns = {};
zns.common = {};
zns.fx = {};
zns.site = {};
zns.common.getUser = function() {
  alert('a');
};
zns.fx.getUser = function() {
  alert('b');
};
zns.site.getUser = function() {
  alert('c');
};
zns.common.getUser();
zns.fx.getUser();
zns.site.getUser();

继承

对象：由属性和方法组成，继承：继承父级的属性、方法

call可以改变函数执行时里面的this

function show(){
  alert(this);
};
show();//=>window
show.call(12);//=>12
function show(a,b){
  alert('this:'+this+'---a:'+a+'---b:'+b);
};
show(12,5);//=>this:window---a:12---b:15
show.call('this的值',12,5);//=>this:this的值---a:12---b:15

---

function A() {
  this.abc = 12;
}
A.prototype.show = function() {
  alert(this.abc);
}function B() {
  //this->new B()
  A.call(this);
};
var obj = new B();
alert(obj.abc);//=>12

---

function A() {
  this.abc = 12;
}
A.prototype.show = function() {
  alert(this.abc);
}

function B() {
  //this->new B()
  A.call(this);
}
B.prototype = A.prototype; //A的原型赋给B，A，B指向同一空间。
//给B的原型添加方法，就是给A也添加

// 当B有自己的方法
B.prototype.fn = function() {
  alert('abc')
}
var objB = new B();
objB.show();
var objA = new A();
objA.fn();//=>abc
//此时A上有fn方法，此时看引用

---

引用

var arr1=[1,2,3];
var arr2=arr1;          //此时把1赋给2，arr2指向1所在的空间，没有创建新数组
arr2.push(4);
alert(arr1);//=>1,2,3,4
alert(arr2);//=>1,2,3,4
// 解决这个引用存在的问题
var arr1=[1,2,3];
var arr2=[];          //此时arr2指向1所在的空间，没有创建新数组
for(var i =0;i{
    arr2.push (arr1[i]);
}
arr2.push(4);
alert(arr1);//1,2,3
alert(arr2);//1,2,3,4

解决上面B与A引用问题

function A() {
 this.abc = 12;
}
A.prototype.show = function() {
 alert(this.abc);
}

function B() {
 //this->new B()
 A.call(this);
}
for(var i in A.prototype){
  B.prototype[i]=A.prototype[i];
}

// 当B有自己的方法
B.prototype.fn = function() {
 alert('abc')
}
var objB = new B();
objB.show();
var objA = new A();
objA.fn();//=>objA.fn() is not a function
//此时，B有自己方法，而A没有B的fn

拖拽和继承

面向对象的拖拽

改写原有拖拽

对象的继承

什么是继承

--在原有类的基础上，略作修改，得到一个新的类

--不影响原有类的功能

instanceof运算符

查看对象是否是某个类的实例

拖拽例子

css

#div1 {
  width: 200px;
  height: 200px;
  border: 1px solid #666;
  position: absolute;
}

---

html

<div class="" id="div1">div>

js

一般写法

window.onload = function() {
  var oDiv = document.getElementById('div1');
  oDiv.onmousedown = function(ev) {
    var oEvent = ev || event;
    var disX = oEvent.clientX - oDiv.offsetLeft;
    var disY = oEvent.clientX - oDiv.offsetTop;
    document.onmousemove = function(ev) {
      var oEvent = ev || event;
      oDiv.style.left = oEvent.clientX - disX + 'px';
      oDiv.style.top = oEvent.clientY - disY + 'px';
    };
    document.onmouseup = function() {
      document.onmousemove = null;
      document.onmouseup = null;
    }
  };
};

改成面向对象

把函数嵌套拿出来，吧需要的一部分变量变成全局变量

var oDiv =null;
var disX = 0;
var disY =0;
window.onload = function() {
  oDiv = document.getElementById('div1');
  oDiv.onmousedown= fnDown;
};
function fnDown(ev) {
  var oEvent = ev || event;
  disX = oEvent.clientX - oDiv.offsetLeft;
  disY = oEvent.clientX - oDiv.offsetTop;
  document.onmousemove = fnMove;
  document.onmouseup = fnUp;
};
function fnMove(ev) {
  var oEvent = ev || event;
  oDiv.style.left = oEvent.clientX - disX + 'px';
  oDiv.style.top = oEvent.clientY - disY + 'px';
};
function fnUp() {
  document.onmousemove = null;
  document.onmouseup = null;
}

第二步增加参数，把onload变成构造函数,把oDiv变为属性

window.onload = function() { //初始化程序
  new Drag('div1');
};

function Drag(id)
{
	var _this=this;
	this.disX=0;
	this.disY=0;

	this.oDiv=document.getElementById(id);
	this.oDiv.onmousedown=function (ev)
	{
		_this.fnDown(ev);

		return false;
	};
};

Drag.prototype.fnDown=function (ev)
{
	var _this=this;
	var oEvent=ev||event;

	this.disX=oEvent.clientX-this.oDiv.offsetLeft;
	this.disY=oEvent.clientY-this.oDiv.offsetTop;

	document.onmousemove=function (ev)
	{
		_this.fnMove(ev);
	};
	document.onmouseup=function ()
	{
		_this.fnUp();
	};
};

Drag.prototype.fnMove=function (ev)
{
	var oEvent=ev||event;

	this.oDiv.style.left=oEvent.clientX-this.disX+'px';
	this.oDiv.style.top=oEvent.clientY-this.disY+'px';
};

Drag.prototype.fnUp=function ()
{
	document.onmousemove=null;
	document.onmouseup=null;
};