js面向对象-复习一

1、面向对象四种创建方式

1.1 传参形式

    function Product(name){
        this.name = name
    }
    Product.prototype={}


    var iphone = new Product('iphone8s')

1.2 默认值

    function Product(){
        this.name = ''
        this.price=0
    }
    Product.prototype={}


    var iphone = new Product()
    /*动态添加形式*/
    iphone.description='XXXXXXXXXX'
    iphone.images=[]

1.3 混合模式/动态添加形式

    function Product(name,price){
        this.name = name
        this.price=price
        this.version=1.0
        this.add=function(){}
    }
    Product.prototype={}


    var iphone = new Product()
    /*动态添加形式*/
    iphone.description='XXXXXXXXXX'
    iphone.images=[]


    console.log(iphone instanceof Product)//true

2.Object.defineProperty()和get，set

语法：

Object.defineProperty(obj, prop, descriptor)

参数说明：

• obj：必需。目标对象
• prop：必需。需定义或修改的属性的名字
• descriptor：必需。目标属性所拥有的特性

例子：

var obj = {
    test:"hello"
}
//对象已有的属性添加特性描述
Object.defineProperty(obj,"test",{
    configurable:true | false,//是否可以被删除，以及重新复制
    enumerable:true | false,//目标属性是否可以被枚举
    value:任意类型的值,//复制
    writable:true | false//是否可以被重写
    get:function (){} | undefined,//获取值，该方法自动调用
    set:function (value){} | undefined//赋值，同上
});

具体可参考：理解Object.defineProperty的作用

3.对象的公私有属性

私有就是外部不可访问，而公有即可访问

简单例子 看看

    //对象构造函数
    // 私有属性好处： 安全 就类似闭包中的函数一样 减少污染
    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 错误 不能这样访问
    }

    /*什么是公有属性：*/
    /*使用象的人可以访问到对象内部的某个属性*/
    var penson = new Person('xiaowang')

    console.log(penson.className);
    console.log(penson.name)
    console.log(person.publicFunction())
    console.log(person.privateFunction())

    /*最小原则：*/
    $('#tab').tab()

4.对象的数据类型

4.1 五大基础数据类型

<script>
   document.write("<h1 style='color:red'>啦啦啦</h1>");
//数值型
var num1 = 1;
//字符串型
var num2 ='2333fgfgfggggggggggggggggggggg';
//布尔型
var num3 =false;
//对象型
var num4 = document.getElementById('mydiv');
//未定义
var num5;

var a = typeof(num1);
// var b ='b';
// alert(a+b);
document.write('<h1>num1的数据类型是'+a+'</h1>');
document.write('<h1>num2的数据类型是'+typeof(num2)+'</h1>');
</script>

4.2 数据类型判断

<script>
    var num = 1
    var str = '传智播客'
    var bool=false;
    var arr=[];
    var obj={name:'传智播客'};
    var date = new Date();
    var fn = function(){}

    /******************************************************************************
     数据类型判断 - 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
</script>

自己封装几个判断类型的方法

    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";
        }

     function isUndefined(val) {
             return typeof val === "undefined";
     }

    function isObj(str){
         if(str === null || typeof str === 'undefined'){
             return false;
         }
         return typeof str === 'object';
     }

    function isNull(val){
             return  val === null;
         }

    function isArray2(arr) {
              if(arr === null || typeof arr === 'undefined'){
                  return false;
              }
              return arr.constructor === Array;
          }

4.3 Function和constructor

我们定义的各种数据类型的变量最终其实都是一个对象

        var str = ‘1’
        var str = new String()
        var sum = 1;
        var = new Number()

同样的，函数也是这样：

所有函数其实都是Function的实例,constructor属性其实就是Function对象的一个属性而已

对象又是通过函数实现的,对象其实就是一个Function的一个实例而已。。。
所以构造函数其实就是Function对象的一个实例
而实例拷贝自构造函数，所以实例含有Function对象的所有属性和方法

constructor属性:
它就是用于检测某个实例的构造函数是哪个,其实constructor是构造函数的一个隐藏属性
为什么实例也拥有这个属性呢？？
因为实例的属性都是拷贝自构造函数,会拷贝所有的构造函数中的属性，包含你定义的也包含系统隐藏的
而 constructor属性是构造函数中的一个隐藏属性