1.对象
/*
JavaScript是基于对象和事件驱动的解释性脚本语言
两种思维模式:
面向过程:注重的是过程,每一步每一步的实现过程
面向对象:注重的是结果
对象的特征:封装,继承,多态
对象的组成:
属性:静态,对象特征的描述 ----- 》变量
方法:动态,对象的行为 ------- 》function
*/
2.面向对象的几种创建方式
(1)字面量:
var obj = {
"name":"web",
"eat":function(){
}
}
*/缺点:代码冗余,适合创建单个对象*/
(2)实例对象—> new
var obj = new Object();
obj.name = "Web"; //添加属性
//添加方法
obj.eat = function(){
}
*/缺点:代码冗余,适合创建单个对象*/
(3)工厂模式创建
function createO(name){
var obj = new Object();
obj.name = name;
obj.eat = function(){
}
return obj
}
var obj1 = createO("如花");
var obj2 = createO("旺财");
*/缺点:解决了代码冗余的问题但是新的问题是识别不清,不清楚是哪个对象的实例*/
(4)构造函数创建
function Student(name){
this.name = name;
this.eat = function(){}
}
var obj = new Student("web");
*/构造函数的特点:
1.构造函数名首字母大写(为了区分普通函数。不是规定是约定)
2.调用的时候前面必须加new ,不加和普通函数一样
3.通过this添加属性和方法
4.没有return语句,不需要返回对象*/
*/new的作用
1.创建了一个空对象 new Object
2.让this指向这个空对象,通过this添加属性和方法
3.让实例对象的原型属性__proto__指向原型对象prototype
4.返回创建好的对象*/
*/ 缺点:解决了识别不清的问题,但是新的问题是浪费内存*/
(5)原型创建
*/原型对象:prototype,每一个函数在声明的时候,js都会默认创建一个prototype,里面存放共享的公共的属性和方法*/
*/原型属性:__proto__,每一个实例对象创建的时候都会有一个原型属性__proto__,指向构造函数的prototype*/
var arr = new Array(1,2,3,4);
//1.获取原型对象
console.log(Array.prototype);
//2.原型属性
console.log(arr.__proto__);
console.log(Array.prototype === arr.__proto__);//true
//3.原型创建对象
function Student(){}
Student.prototype = {
"name":"Web",
"eat":function(){}
}
*/解决了内存浪费的问题,但是新的问题是不能传参*/
(6)混合创建 构造函数(可变的)+原型(不变的,共享的)
function Student(name,age){
this.name = name;
this.age = age;
}
Student.prototype.eat = function(){}
3.面向对象实例
(1)选项卡
<button>首页</button>
<button>焦点</button>
<button>咨询</button>
<div style="display:block">首页</div>
<div>焦点</div>
<div>咨询</div>
<script>
var oBtn=document.getElementsByTagName("button");
var oDiv=document.getElementsByTagName("div");
for(var i=0;i<oBtn.length;i++){
oBtn[i].index=i;
oBtn[i].onclick = function(){
for(var j=0;j<oDiv.length;j++){
oDiv[j].style.display="none";
}
oDiv[this.index].style.display="block";
}
}
面向对象选项卡
*/步骤:
1.声明构造函数
2.确定属性属性--- 以var声明,并且在别的地方有使用的就作为属性
3.写方法--- function,放在prototype
*/
<div id="box">
<button>首页</button>
<button>焦点</button>
<button>咨询</button>
<div class="box1" style="display:block">首页</div>
<div class="box1">焦点</div>
<div class="box1">咨询</div>
</div>
<script>
function Select(id) {
//确定属性
var oBox = document.getElementById(id);
this.oBtn = oBox.getElementsByTagName("button");
this.oDiv = oBox.getElementsByTagName("div");
var _this = this;
for (var i = 0; i < this.oBtn.length; i++) {
this.oBtn[i].index = i; 7
this.oBtn[i].onclick = function () {
//调用显示div的方法
_this.clickFun(this.index);
//这里的_this需要说一下,正常来说我们都会想是this.clickFun,clickFun是Select的方法,但是在点击事件里this代表点击对象,是oBtn,所以我们可以在外面存一个代表Select的this所以这里用_this
}
}
}
//在原型对象中写方法
Select.prototype.clickFun = function (index) {
for (var j = 0; j < this.oDiv.length; j++) {
this.oDiv[j].style.display = "none";
}
this.oDiv[index].style.display = "block";
}
new Select("box");
</script>
(2)拖拽
<div></div>
<script>
var oDiv = document.getElementsByTagName("div")[0];
oDiv.onmousedown = function(ev){
var ev = window.event||ev;
var x=ev.clientX-oDiv.offsetLeft;
var y=ev.clientY-oDiv.offsetTop;
document.onmousemove = function(ev){
var ev = window.event||ev;
var l=ev.clientX;
var t=ev.clientY;
oDiv.style.top=t-y+"px";
oDiv.style.left=l-x+"px";
}
}
oDiv.onmouseup = function(){
document.onmousemove=null;
}
</script>
面向对象拖拽
<div id="box1"></div>
<div id="box2"></div>
<script>
//创建构造函数
//属性,方法
function Move(id) {
this.oDiv = document.getElementById(id);
this.x = 0;
this.y = 0;
var _this = this;
this.oDiv.onmousedown = function (ev) {
_this.mouseDown();
document.onmousemove = function (ev) {
_this.mouseMove();
}
document.onmouseup = function () {
_this.mouseUp();
}
}
}
Move.prototype.mouseDown = function () {
var ev = window.event || ev;
this.x = ev.clientX - this.oDiv.offsetLeft;
this.y = ev.clientY - this.oDiv.offsetTop;
}
Move.prototype.mouseMove = function () {
var ev = window.event || ev;
var l = ev.clientX;
var t = ev.clientY;
this.oDiv.style.top = t - this.y + "px";
this.oDiv.style.left = l - this.x + "px";
}
Move.prototype.mouseUp = function () {
document.onmousemove = null;
}
new Move("box1");
new Move("box2");
</script>