首页 > 代码库 > JS高级学习路线——面向对象进阶

JS高级学习路线——面向对象进阶

构造函数进阶

使用构造函数创建对象

用于创建对象 其除了是一个函数之外,我们又称之为构造对象的函数 - 简称构造函数

    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高级学习路线——面向对象进阶