js基础之面向对象

时间:2022-11-01 21:18:32

一、基本概念

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基础之面向对象的更多相关文章

  1. JS基础入门篇(三十五)—面向对象(二)

    如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)

  2. js 基础

    js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...

  3. JS基础知识总结

      js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...

  4. js基础知识总结(2016&period;11&period;1)

    js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...

  5. Web3D编程入门总结——WebGL与Three&period;js基础介绍

    /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...

  6. 【 js 基础 】Javascript &OpenCurlyDoubleQuote;继承”

    是时候写一写 "继承"了,为什么加引号,因为当你阅读完这篇文章,你会知道,说是 继承 其实是不准确的. 一.类1.传统的面向类的语言中的类:类/继承 描述了一种代码的组织结构形式. ...

  7. JS基础学习1

    1 JS 概述 一个完整的javascript实现是由以下3个不同部分组成的: (1)     核心(ECMAscript) (2)     文档对象模型(DOM)  Document object ...

  8. python 全栈开发,Day52&lpar;关于DOM操作的相关案例&comma;JS中的面向对象&comma;定时器&comma;BOM&comma;client、offset、scroll系列&rpar;

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  9. 【 js 基础 】【读书笔记】Javascript &OpenCurlyDoubleQuote;继承”

    是时候写一写 “继承”了,为什么加引号,因为当你阅读完这篇文章,你会知道,说是 继承 其实是不准确的. 一.类1.传统的面向类的语言中的类:类/继承 描述了一种代码的组织结构形式.举个例子:“汽车”可 ...

随机推荐

  1. 不相交集python实现

    1.不相交集是解决等价关系的一种数据结构,执行合并和查找的速度都很快,M次执行合并和查找的执行时间为(M*logN). 在一个集合中.对于每一对元素(a,b),a,b∈S,对于关系R假设满足以下三个条 ...

  2. Java进程通讯

    管道(Pipe):管道可用于具有亲缘关系进程间的通信,允许一个进程和另一个与它有共同祖先的进程之间进行通信. 创建子进程Java有两种方式 //第一种 Runtime rt = Runtime.get ...

  3. JEESZ-kafka集群安装

     1. 在根目录创建kafka文件夹(service1.service2.service3都创建) [root@localhost /]# mkdir kafka   2.通过Xshell上传文件到s ...

  4. 2018-2019-2 网络对抗技术 20165317 Exp4 恶意代码分析

    2018-2019-2 网络对抗技术 20165317 Exp4 恶意代码分析 实验要求 1.系统运行监控 使用如计划任务,每隔一分钟记录自己的电脑有哪些程序在联网,连接的外部IP是哪里.运行一段时间 ...

  5. 基于FPGA的16阶级联型iir带通滤波器实现

    警告 此文章将耗费你成吨的流量,请wifi下阅读,造成的流量浪费本人不承担任何责任.初版源代码获取(请勿用作他用,仅供学习):https://gitee.com/kingstacker/iir.git ...

  6. springcloud灰度发布实现方案

    Nepxion Discovery是一款对Spring Cloud Discovery服务注册发现.Ribbon负载均衡.Feign和RestTemplate调用.Hystrix或者阿里巴巴Senti ...

  7. day5&lowbar;不能循环删除list-深拷贝、浅拷贝(import copy)

    一.循环删list里面的元素,会导致下标错位,结果是不对的举例:想删除奇数 l = [1,1,1,2,3,4,5] for i in l: if i%2 !=0: l.remove(i) #删除后,导 ...

  8. jiedui

    源代码:https://github.com/hanzhaoyan/jieduizuoye/tree/master 功能要求: 该程序用图形界面实现下面功能:用计算机产生一个100以内的随机数,游戏者 ...

  9. MySQL性能优化(七&&num;183&semi;下)-- 锁机制 之 行锁

    一.行锁概念及特点 1.概念:给单独的一行记录加锁,主要应用于innodb表存储引擎 2.特点:在innodb存储引擎中应用比较多,支持事务.开销大.加锁慢:会出现死锁:锁的粒度小,并发情况下,产生锁 ...

  10. sevlet实现反盗链

    有时候为了网站的版权和安全问题,我们需要为我们的网站应用设置防盗链,这样可以保证我们网站的一些资源的安全性.防盗链的主要是通过获取http的请求头referer的信息来和我们的网站地址做对比,如果相同 ...