一、基本概念
Array类 ————> 不具备实际的功能,只能用来构造对象
arr对象 ————> 有实际的功能,被类给构造出来
如:var arr=new Array();
prototype原型 ————> 可以扩展系统或自建对象的功能,添加一些本不支持或没有的方法和属性,就类似于class,可以影响一类元素
function CreatePerson(name,sex){//构造函数
//系统内部工作流程
//var this=new Object(); this.name=name;
this.sex=sex; //系统内部工作流程
//return this;
}
CreatePerson.prototype.show=function(){
alert(this.name+'/'+this.sex);alert(typeof Date);
}
p1=new CreatePerson('blue','man');p1.show();
var arr1=new Array(12,5,8,3);
var arr2=new Array(112,33,9,15); Array.prototype.sum=function(){
var result=0;
var i=0; for(i=0;i<this.length;i++){
result+=this[i];
}
return result;
}
//alert(arr2.sum());
String.prototype.trim=function(){
return this.replace(/^\s+|\s+$/g,'');
};
var str=' fsf ew op ';
//alert(str.length+'--'+str.trim().length);
原型的优先级:
给原型添加方法或属性,类似于class;给对象添加方法或属性,类似于行间样式;而行间样式优先级>class
Array.prototype.a=12;
var arr=[1,3,5];alert(arr.a); // arr.a=2;alert(arr.a); // delete arr.a;alert(arr.a); //
二、把面向过程改写成面向对象的形式
1前提:所有东西都在window.onload里面
2.把onload 改成 构造函数 注意应该用大驼峰规则命名
全局变量 改成 属性 栗子:vardisX=0 改成 this.disX=0;
函数 改成 方法 栗子:function fnDown(){} 改成 Drag.prototype.fnDown=function(ev){};
最后把有事件和定时器的this再套一层函数
栗子一:
改写前
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var aBtn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div');
var i=0; for(i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onclick=function ()
{
for(i=0;i<aBtn.length;i++)
{
aBtn[i].className='';
aDiv[i].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
};
}
};
改写后
window.onload=function(){
var oTab=new TabSwitch('div1');
};
function TabSwitch(id){console.log(this);//this指向oTab
var oDiv=document.getElementById(id);
this.aBtn=oDiv.getElementsByTagName('input');
this.aDiv=oDiv.getElementsByTagName('div');
var _this=this;
var i=0; for(i=0;i<this.aBtn.length;i++)
{
this.aBtn[i].index=i;
this.aBtn[i].onclick=function(){
_this.tab(this);console.log(this);//this指向aBtn[i]
}
}
}
TabSwitch.prototype.tab=function (oBtn){console.log(this);//this指向oTab
for(i=0;i<this.aBtn.length;i++)
{
this.aBtn[i].className='';
this.aDiv[i].style.display='none';
}
oBtn.className='active';
this.aDiv[oBtn.index].style.display='block';
};
3.改错:
this啥时候出问题? 1.定时器 2.事件
1.再套一层函数
function Al(){
var _this=this;
this.a=12;//alert(this); setInterval(function(){
_this.show();//console.log(_this);//_this指向Al,this指向window
},100);
}
Al.prototype.show=function(){
console.log(this.a);
}
var obj=new Al();
2.同上
三、面向对象的拖拽
window.onload=function(){
new Drag('div1');
new Drag('div2');
}
function Drag(id){
var _this=this;
this.disX=0;
this.disY=0; this.oDiv=document.getElementById(id); this.oDiv.onmousedown=function(){
_this.fnDown();
};
};
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(){
_this.fnMove();
};
document.onmouseup=function(){
_this.fnUp();
};
};
Drag.prototype.fnMove=function(ev){
var _this=this;
var oEvent=ev||event;
oEvent.preventDefault();
this.oDiv.style.left=oEvent.clientX-this.disX+'px';
this.oDiv.style.top=oEvent.clientY-this.disY+'px';//console.log(oEvent.clientX+'--'+disX);
};
Drag.prototype.fnUp=function(){
document.onmousemove=null;
document.onmouseup=null;
};
四、对象的继承
function Person(name,sex){
this.name=name;
this.sex=sex;
}
Person.prototype.showName=function(){
alert(this.name);
}
function Worker(name,sex,job){
//构造函数伪装 ——>调用父级的构造函数,为了继承属性
Person.call(this,name,sex);//console.log(this);this指向new出来的Worker对象,然后传给Person,Person把它当作自己的孩子(其实不是亲生的)赋予属性
this.job=job;
}
//原型链——>通过原型继承父级的方法
//Worker.prototype=Person.prototype;//这种方式会把子类的方法添加到父类console.log(Person.prototype.showJob);
//把父级的所有方法复制到子类,再设置子类方法就不会影响到父级
for(var i in Person.prototype){console.log(i);
Worker.prototype[i]=Person.prototype[i];
}
Worker.prototype.showJob=function(){
alert(this.job);
}
var oWk=new Worker('lee','man','boss');
oWk.showName();
oWk.showJob();
五、封装继承的拖拽框架
先引入父框架Drag.js
<script type="text/javascript" src="../js/Drag.js"></script>
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;//解决ff、chrome二次拖拽的bug
};
};
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 _this=this;
var oEvent=ev||event;
oEvent.preventDefault();
this.oDiv.style.left=oEvent.clientX-this.disX+'px';
this.oDiv.style.top=oEvent.clientY-this.disY+'px';//console.log(oEvent.clientX+'--'+disX);
};
Drag.prototype.fnUp=function(){
document.onmousemove=null;
document.onmouseup=null;
};
引入子框架LimitDrag.js
<script type="text/javascript" src="../js/LimitDrag.js"></script>
让子框架LimitDrag.js继承父框架
// JavaScript Document
function LimitDrag(id){
Drag.call(this,id);
} for(var i in Drag.prototype){
LimitDrag.prototype[i]=Drag.prototype[i];
} LimitDrag.prototype.fnMove=function(ev){
var _this=this;
var oEvent=ev||event;
oEvent.preventDefault();
var l=oEvent.clientX-this.disX;
var t=oEvent.clientY-this.disY;console.log(l+'--'+t); if(l<0){
l=0;
}else if(l>=document.documentElement.clientWidth-this.oDiv.offsetWidth){
l=document.documentElement.clientWidth-this.oDiv.offsetWidth;
} if(t<0){
t=0;
}else if(t>=document.documentElement.clientHeight-this.oDiv.offsetHeight){
t=document.documentElement.clientHeight-this.oDiv.offsetHeight;
} this.oDiv.style.left=l+'px';
this.oDiv.style.top=t+'px';//console.log(oEvent.clientX+'--'+disX);
};
然后就可以为不同的div使用不同的框架
window.onload=function(){
new Drag('div1');
new LimitDrag('div2');
}
js基础之面向对象的更多相关文章
-
JS基础入门篇(三十五)—面向对象(二)
如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)
-
js 基础
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
-
JS基础知识总结
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...
-
js基础知识总结(2016.11.1)
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
-
Web3D编程入门总结——WebGL与Three.js基础介绍
/*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...
-
【 js 基础 】Javascript “继承”
是时候写一写 "继承"了,为什么加引号,因为当你阅读完这篇文章,你会知道,说是 继承 其实是不准确的. 一.类1.传统的面向类的语言中的类:类/继承 描述了一种代码的组织结构形式. ...
-
JS基础学习1
1 JS 概述 一个完整的javascript实现是由以下3个不同部分组成的: (1) 核心(ECMAscript) (2) 文档对象模型(DOM) Document object ...
-
python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
-
【 js 基础 】【读书笔记】Javascript “继承”
是时候写一写 “继承”了,为什么加引号,因为当你阅读完这篇文章,你会知道,说是 继承 其实是不准确的. 一.类1.传统的面向类的语言中的类:类/继承 描述了一种代码的组织结构形式.举个例子:“汽车”可 ...
随机推荐
-
不相交集python实现
1.不相交集是解决等价关系的一种数据结构,执行合并和查找的速度都很快,M次执行合并和查找的执行时间为(M*logN). 在一个集合中.对于每一对元素(a,b),a,b∈S,对于关系R假设满足以下三个条 ...
-
Java进程通讯
管道(Pipe):管道可用于具有亲缘关系进程间的通信,允许一个进程和另一个与它有共同祖先的进程之间进行通信. 创建子进程Java有两种方式 //第一种 Runtime rt = Runtime.get ...
-
JEESZ-kafka集群安装
1. 在根目录创建kafka文件夹(service1.service2.service3都创建) [root@localhost /]# mkdir kafka 2.通过Xshell上传文件到s ...
-
2018-2019-2 网络对抗技术 20165317 Exp4 恶意代码分析
2018-2019-2 网络对抗技术 20165317 Exp4 恶意代码分析 实验要求 1.系统运行监控 使用如计划任务,每隔一分钟记录自己的电脑有哪些程序在联网,连接的外部IP是哪里.运行一段时间 ...
-
基于FPGA的16阶级联型iir带通滤波器实现
警告 此文章将耗费你成吨的流量,请wifi下阅读,造成的流量浪费本人不承担任何责任.初版源代码获取(请勿用作他用,仅供学习):https://gitee.com/kingstacker/iir.git ...
-
springcloud灰度发布实现方案
Nepxion Discovery是一款对Spring Cloud Discovery服务注册发现.Ribbon负载均衡.Feign和RestTemplate调用.Hystrix或者阿里巴巴Senti ...
-
day5_不能循环删除list-深拷贝、浅拷贝(import copy)
一.循环删list里面的元素,会导致下标错位,结果是不对的举例:想删除奇数 l = [1,1,1,2,3,4,5] for i in l: if i%2 !=0: l.remove(i) #删除后,导 ...
-
jiedui
源代码:https://github.com/hanzhaoyan/jieduizuoye/tree/master 功能要求: 该程序用图形界面实现下面功能:用计算机产生一个100以内的随机数,游戏者 ...
-
MySQL性能优化(七&#183;下)-- 锁机制 之 行锁
一.行锁概念及特点 1.概念:给单独的一行记录加锁,主要应用于innodb表存储引擎 2.特点:在innodb存储引擎中应用比较多,支持事务.开销大.加锁慢:会出现死锁:锁的粒度小,并发情况下,产生锁 ...
-
sevlet实现反盗链
有时候为了网站的版权和安全问题,我们需要为我们的网站应用设置防盗链,这样可以保证我们网站的一些资源的安全性.防盗链的主要是通过获取http的请求头referer的信息来和我们的网站地址做对比,如果相同 ...