JS進階學習路線——物件導向進階

標籤：t許可權   isp   通用   產品   枚舉   instance   eric   nan   conf   

建構函式進階使用建構函式建立對象

用於建立對象 其除了是一個函數之外，我們又稱之為構造對象的函數 - 簡稱建構函式

    function Product(name,description){    //屬性   this.name=name;    // 屬性    this.description = description    //方法 又稱方法屬性 萬物皆屬性    this.buy=function(){        alert(‘buy‘)    } }    //會拷貝一份    var p1 = new Product()    var p2 = new Product()    console.log(p1.constructor)    console.log(p2.constructor)

如何判斷某個執行個體是否是根據某個建構函式建立的
if(p1 instanceof Product){
alert(‘true‘)
}

四種建立方式

1.傳參形式

2.預設值

3.動態添加形式

4.混合模式

 

對象屬性進階1 get set許可權

產品對象

對象內如何使用對象的屬性和方法：this，對象外如何使用：先執行個體化，後用點文法

類 -- 抽象對象

    function Product(name,price) {        /*屬性 行為 可以為空白或者給預設值*/        this.name=name        this.price=0;        this.description = ‘‘;        this.zhekou = ‘‘        this.sales = ‘‘        /*我們的需求：自動計算打折後的價格*/        /*形象的理解：封裝*/        Object.defineProperty(this, "price", {            get: function () {return price*0.9;},            set: function (value) {                /*大概普通產品的價格都在0--1萬*/                if(value>10000)                {                    alert(‘產品價格必須在0--1萬之間‘);                }else{                    price = value;                }            }        });    }

　　get set 日期 拓展性知識

Object.defineProperty(this, "produceDate", {            get: function () {                return dateFormat(produceDate,‘yyyy-MM-dd‘);            },            set: function (value) {                produceDate = value;            }        });function dateFormat(date,format) {        var o = {            "M+" : date.getMonth()+1, //month            "d+" : date.getDate(),    //day            "h+" : date.getHours(),   //hour            "m+" : date.getMinutes(), //minute            "s+" : date.getSeconds(), //second            "q+" : Math.floor((date.getMonth()+3)/3),  //quarter            "S" : date.getMilliseconds() //millisecond        }        if(/(y+)/.test(format)) format=format.replace(RegExp.$1,                (date.getFullYear()+"").substr(4- RegExp.$1.length));        for(var k in o)if(new RegExp("("+ k +")").test(format))            format = format.replace(RegExp.$1,                    RegExp.$1.length==1? o[k] :                            ("00"+ o[k]).substr((""+ o[k]).length));        return format;    }

　　許可權的設定——可讀

/*我們的需求：自動計算打折後的價格*/        Object.defineProperty(this, "price", {            value:5000000,            writable: t,        });

　　

 

對象屬性進階2 公有私人屬性

物件建構函數

    // 私人屬性好處： 安全 就類似閉包中的函數一樣 減少汙染    function Person(name) {        //私人屬性，只能在物件建構函數內部使用        var className = "使用者物件";        //公有屬性,在對象執行個體化後調用        this.name = name;        //私人方法        var privateFunction = function () {            alert(this.name);        }        //公有方法        this.publicFunction = function () {            alert(this.name); //公有屬性            alert(className); //正確 直接通過變數名訪問            alert(this.className); //undefined 錯誤 不能這樣訪問        }        //公有屬性        alert(className);        //正確 直接通過變數名訪問        alert(this.className); //undefined 錯誤 不能這樣訪問    }

什麼是公有屬性：
使用象的人可以訪問到對象內部的某個屬性

init函數的引入

Product.prototype={    /*初始化函數的引入*/        /*我們將開發某個功能的初始化的工作都放在一起函數裡面，使用者只需要只要這一個工具就可以了*/        init:function(){            this.bindDOM()            this.bindEvents()        },     bindDOM:function(){}，    bindEvents:function(){}}

私人成員的引入config

        var that = this;        //定義一個變數 ：這個變數可以被對象中所有的屬性訪問到。。。。        /*避免重複，減少記憶體*/        /*統一管理*/        this.config = {            btnConfirm: document.getElementById(‘btn‘),            btnBuy: document.getElementById(‘btn‘),            btnAddCart: document.getElementById(‘btn‘),            domProductName :  document.getElementById(‘pname‘),            domProductPrice :  document.getElementById(‘pprice‘),            sum :  1000,            des :  document.getElementById(‘pdes‘),            youhuijia :  document.getElementById(‘pyouhui‘),            zhekou :  document.getElementById(‘pzhekou‘),            sales :  document.getElementById(‘psales‘),            date :  document.getElementById(‘date‘)        }        function bindDOM(){            that.config.name.innerHTML=that.name        }

對象執行個體進階資料類型的複習

call

    console.log(toString.call(123)) //[object Number]    var num = 123;    console.log(num.toString())

資料類型檢測進階

資料類型判斷 - typeof

    console.log(‘資料類型判斷 - typeof‘)    console.log(typeof undefined)//‘undefined‘    console.log(typeof null) // well-known bug    console.log(typeof true) //‘boolean‘    console.log(typeof 123)  //‘number‘    console.log(typeof "abc")  //‘string‘    console.log(typeof function() {}) //‘function‘    var arr=[];    console.log(typeof {}) //‘object‘    console.log(typeof arr)//‘object‘    console.log(typeof unknownVariable) //‘undefined‘    //    在使用 typeof 運算子時採用參考型別儲存值會出現一個問題，    //    無論引用的是什麼類型的對象，它都返回 "object"

資料類型判斷 - toString.call
通用但很繁瑣的方法： prototype

    console.log(‘資料類型判斷 - toString.call‘)    console.log(toString.call(123))          //[object Number]    console.log(toString.call(‘123‘))        //[object String]    console.log(toString.call(undefined))    //[object Undefined]    console.log(toString.call(true))         //[object Boolean]    console.log(toString.call({}))           //[object Object]    console.log(toString.call([]))           //[object Array]    console.log(toString.call(function(){})) //[object Function]    console.log(Object.prototype.toString.call(str) === ‘[object String]‘)   //-------> true;    console.log(Object.prototype.toString.call(num) === ‘[object Number]‘)   //-------> true;    console.log(Object.prototype.toString.call(arr) === ‘[object Array]‘)    //-------> true;    console.log(Object.prototype.toString.call(date) === ‘[object Date]‘)     //-------> true;    console.log(Object.prototype.toString.call(fn) === ‘[object Function]‘) //-------> true;

     資料類型判斷 - instanceof

   //    判斷已知物件類型的方法： instanceof    console.log(‘資料類型判斷 - instanceof‘)    console.log(arr instanceof Array)     //---------------> true    console.log(date instanceof Date)     //---------------> true    console.log(fn instanceof Function)   //------------> true    //    alert(f instanceof function)        //------------> false    //    注意：instanceof 後面一定要是物件類型，並且大小寫不能錯，該方法適合一些條件選擇或分支。

     資料類型判斷 - 根據對象的constructor判斷： constructor

 //    根據對象的constructor判斷： constructor    var arr=[];    console.log(‘資料類型判斷 - constructor‘)    console.log(arr.constructor === Array)   //----------> true    console.log(date.constructor === Date)   //-----------> true    console.log(fn.constructor === Function) //-------> true

資料類型判斷 函數封裝

 判斷變數是不是數值型

    function isNumber0(val){         return typeof val === ‘number‘;         }//    但有些情況就不行，比如：//    1 var a;//    2 alert(isNumber(parseInt(a)));//    但實際上變數a是NaN，它是不能用於數值運算的。//    所以上面的函數可以修改為：     function isNumber(val){        return typeof val === ‘number‘ && isFinite(val);        }//    順便介紹一下JavaScript isFinite() 函數，isFinite() 函數用於檢查其參數是否是無窮大，//    如果 number 是有限數字（或可轉換為有限數字），//    那麼返回 true。否則，如果 number 是 NaN（非數字），或者是正、負無窮大的數，則返回 false。

　　  判斷變數是不是布爾類型

 function isBooleanType(val) {        return typeof val ==="boolean";    }

　　判斷變數是不是字串類型

 function isStringType(val) {        return typeof val === "string";    }

　判斷變數是不是Undefined

 function isUndefined(val) {        return typeof val === "undefined";    }    var a;//a是undefined    var s = "strType";    alert("變數a是Undefined的判斷結果是："+isUndefined(a));    alert("變數s是Undefined的判斷結果是："+isUndefined(s));

判斷變數是不是對象

function isObj(str){        if(str === null || typeof str === ‘undefined‘){            return false;        }        return typeof str === ‘object‘;    }    var a;    var b = null;    var c = "str";    var d = {};    var e = new Object();    alert("變數a是Object類型的判斷結果是："+isObj(a));//false    alert("變數b是Object類型的判斷結果是："+isObj(b));//false    alert("變數c是Object類型的判斷結果是："+isObj(c));//false    alert("變數d是Object類型的判斷結果是："+isObj(d));//true    alert("變數e是Object類型的判斷結果是："+isObj(e));//true

　　 判斷變數是不是null

function isNull(val){        return  val === null;    }    /*測試變數*/    var a;    var b = null;    var c = "str";    //彈出運行結果    alert("變數a是null的判斷結果是："+isNull(a));//false    alert("變數b是null類型的判斷結果是："+isNull(b));//true    alert("變數c是null類型的判斷結果是："+isNull(c));//false

　 判斷變數是不是數組

//數群組類型不可用typeof來判斷。因為當變數是數群組類型是，typeof會返回object。   //方法1    function isArray1(arr) {        return Object.prototype.toString.call(arr) === ‘[object Array]‘;    }   //方法2    function isArray2(arr) {        if(arr === null || typeof arr === ‘undefined‘){            return false;        }        return arr.constructor === Array;    }

　Jquery判斷資料類型

//    jQuery提供一系列工具方法，用來判斷資料類型，以彌補JavaScript原生的typeof運算子的不足。//     以下方法對參數進行判斷，返回一個布爾值。//    jQuery.isArray()：是否為數組。//    jQuery.isEmptyObject()：是否為空白對象（不含可枚舉的屬性）。//    jQuery.isFunction()：是否為函數。//    jQuery.isNumeric()：是否為數字。//    jQuery.isPlainObject()：是否為使用“{}”或“new Object”產生的對象，而不是瀏覽器原生提供的對象。//    jQuery.isWindow()：是否為window對象。//    jQuery.isXMLDoc()：判斷一個DOM節點是否處於XML文檔之中。

　　

　

　　

 

JS進階學習路線——物件導向進階