七、面向对象

1、概述

（1）js 中的面向对象：隐藏实现的细节，对外发布功能；

（2）面向对象的特点：

抽象：抓住核心问题；
封装：隐藏实现的细节，对外发布功能；
继承：已有对象派生出新的对象（多态和多重继承）；

（3）对象的组成：

属性（变量）
方法（函数）

2、为对象添加方法和属性

（1）this 的本质：函数属于谁，全局函数属于 window 对象；

（2）Object 对象：

不能随意给系统的对象添加属性和方法，可能会造成方法和属性的覆盖；
Object 是一个空的对象，可以用来改造；

3、类的构建方法

（1）工厂方式

原理：用构造函数创建一个类
存在问题：不能 new；通用的方法存在很多，浪费资源；
构造函数也可以加上 new ，加上 new 后会自动做两件事：创建空白对象和返回对象，new 创建的对象名即为 this；

（2）原型（prototype）

概念：类似于 css 中的 class 的概念，修改他可以影响一类的元素；
给对象加方法类似于行间样式；给原型加方法类似于 class；
原型的缺陷：无法限制属性和方法的覆盖；

（3）混合方法（推荐）

构造函数加属性；
原型加方法；

function CreatePerson(name, qq)		//构造函数
{
	this.name=name;
	this.qq=qq;
}

CreatePerson.prototype.showName=function ()	//原型
{
	alert('我的名字叫：'+this.name);
};

CreatePerson.prototype.showQQ=function ()
{
	alert('我的QQ号：'+this.qq);
};

var obj=new CreatePerson('blue', '258248832');
var obj2=new CreatePerson('张三', '45648979879');

4、面向对象的选项卡（练习）

（1）面向过程改面向对象原则

不能有函数套函数、但可以有全局变量

（2）过程

onload → 构造函数
全局变量 → 属性
函数 → 方法

（3）注意 this 在面向对象的用法

window.onload=function(){
            new Tar('div1');
        };

        function Tar(id) {
            var _this = this;
            this.oDiv = document.getElementById(id);
            this.aInput = this.oDiv.getElementsByTagName('input');
            this.aDiv = this.oDiv.getElementsByTagName('div');

            for(var i = 0;i < this.aInput.length;i ++){
                this.aInput[i].index = i;
                this.aInput[i].onclick=function () {
                    _this.fnClick(this);
                };
            }
        }

        Tar.prototype.fnClick = function (aInput) {
            for(var j = 0;j < this.aInput.length;j ++){
                this.aDiv[j].style.display = "none";
                this.aInput[j].className = '';
            }
            this.aDiv[aInput.index].style.display = 'block';
            aInput.className = 'active';
        };

5、面向对象高级

（1）JSON方式的面向对象

json 和 js 对象是无缝衔接的；
将方法和属性加入 json 即可实现面向对象；
json 的面向对象适合单例模式；
命名空间的概念：区分同名方法；

var json = {
            name:'allen',
            age:24,
            show:function () {
                alert(this.name+':'+this.age);
            }
        };
        json.show();

（2）继承（以拖拽为例）

继承的概念：在原有类的基础上，略作修改，得到一个新的类；不影响原有类的功能；
继承使用：普通拖拽和限制范围的拖拽

//1、构造函数内用 call 继承属性；
//2、遍历原型链复制继承方法；

/*普通拖拽*/
function Drag(id) {
    var _this = this;
    this.oDiv = document.getElementById(id);
    this.oDiv.onmousedown = function (ev) {
        _this.down(ev);
    }
}

Drag.prototype.down = 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.move(ev);
    };
    document.onmouseup = function () {
        _this.up();
    };
};

Drag.prototype.move = 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.up = function () {
    document.onmousemove = null;
    document.onmouseup = null;
};


/*限制拖拽*/
function LimitDrag(id) {
            Drag.call(this,id);
        }

        for(var i in Drag.prototype){
            LimitDrag.prototype[i] = Drag.prototype[i];
        }

        LimitDrag.prototype.move = function (ev) {
            var oEvent = ev || event;
            var l = oEvent.clientX - this.disX;
            var t = oEvent.clientY - this.disY;
            if(l < 0){
                l = 0;
            }
            if(t < 0){
                t = 0;
            }
            this.oDiv.style.left = l + "px";
            this.oDiv.style.top = t + "px";
        }

（3）系统对象

本地对象（非静态）：Object、Function、Array、Number、String 等
内置对象（静态）：Math、Global
宿主对象（浏览器提供）：BOM、DOM

八、其他知识

1、BOM应用

（1）基础

window.open(url,'_self')：打开一个窗口；
window.close()：关闭一个窗口，最好是脚本打开，脚本关闭，不然会有一些问题；
window.navigator.userAgent
window.location：就是html文件的地址，不仅可以取值，也可以赋值；

（2）尺寸坐标

1、可视区宽高

document.documentElement.clientWidth
document.documentElement.clientHeight

2、滚动距离

document.body.scrollTop
document.documentElement.scrollTop

（3）常用方法事件

对话框：alert、confirm、prompt
事件：onload、onscroll、onresize

2、cookie基础与应用

（1）基础

作用：用来保存信息，比如用户名密码；
特点：同一域名所有页面共享一套 cookie；cookie的数量和大小十分有限；cookie有过期时间；
使用：document.cookie属性；

（2）使用

getCookie：split分割后遍历；
setCookie：重复设置不会覆盖，只会增加；
removeCookie：通过设置过期时间为 -1 来实现；
登录页面的例子：提交记录用户名，onload读取信息；

3、正则表达式

（1）基础

常用字符串操作：search、substring、charAt、split
练习：找出字符串中的数字（两种方法）
概念：正则是一种规则，用来匹配字符串
RegExp对象：new RegExp（re，'i'）； /re/ ；

（2）正则和字符串配合

search：返回位置
match：返回匹配的
replace：返回替换后的
re.test：

（3）正则分解

全局规则：i（忽略大小写）g（全部匹配）；
方括号:[abc] [a-z] [a-z0-9] [^a]
转义字符：点（.）表示匹配所有字符；\d、\w、\s、\D、\W、\S
量词：｛n,m｝ {n,} {n} + *（尽量不用） ?
头尾匹配：^ $

（4）常用正则练习

邮箱电话匹配

前端学习（三）javascript（2）

七、面向对象

1、概述

2、为对象添加方法和属性

3、类的构建方法

4、面向对象的选项卡（练习）

5、面向对象高级

八、其他知识

1、BOM应用

2、cookie基础与应用

3、正则表达式

猜你喜欢