七、面向物件

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）常用正則練習

• 郵箱電話匹配