JS数据类型与面向对象开发

2018-10-15 数据类型与面向对象开发

今日分享

1. 数据类型（常见、数组、对象、方法）
2. 引用类型（与值类型的区别）
3. 过程式开发与面向对象开发

---

1、数据类型

string\number\boolean\null\undefined
object
例如 ‘123’，这个就属于字符串类型 string
数据类型检测：typeof

（1）常见数据类型

<script type="text/javascript">
        window.onload = function () {
            var str = 'str';
            var num = 123;
            var boolean = true;
            var n = null;//n是空的对象指针
            var und = undefined;
            var a;//定义一个变量，没有初始化，类型就是typeof
            var arr = [1,2,3,4,5];
            var obj = {name:'sonia'};
            var f = function(){};
            console.log(typeof str);
            alert(typeof und);
        }
    </script>

小技巧：

1. Chrome浏览器调试技巧-打断点，可以在浏览器的调试框中获得很多信息
2. 浏览器的控制台可以用来快速验证一些js代码的运行结果
   

（2）数组类型

<script type="text/javascript">
  //Array类型
            var arr1 = new Array();
            arr[0] ='1';
            arr[1] ='2';
            var arr2 = new Array('a','b','c');
            //第一种方法是构造函数，不够直观
            
            var arr3 = [1,2,3,4,5];
            var arr4 = [1,'2',true,[1,2],{id:1}];  //arr4[2]
            //第二种方法是字面量表示法
  </script>

（3）对象数据类型（4种创建方式）

1. 构造函数定义，这种方式的可读性不好

<script type="text/javascript">
  //object类型
  //第一种object构造函数
  var obj = new Object();
  obj.name = 'abc';
  obj.action = function(){
      console.log(this.name);
      };
  obj.name;
  obj.action();  //这种方式的可读性不好

</script>

2. 对象字面量

<script type="text/javascript">
  //第二种字面量
  //1）简单字面量
  var obj2 = {};
  obj.name = 'sonia';
  //2）嵌套字面量，这种方法是最常用的，可读性也比较好
  var obj3 = {
     name:'jack',
     age:18,
     action:function(){
        return this.name;
     }
  //如果键中含有空格等特殊符号，键要加引号
  }
</script>

3. 工厂模式

<script type="text/javascript">
            //第三种工厂方式。这个方法暂时只需要了解，通常用在写插件上
            function creatObj(name){
                var obj4 = new Object();
                obj4.name = name;
                obj4.action = function(){
                    return this.name;
                };
                return obj4;
            }
            var a = creatObj('衣服');//这里的衣服是传入的name
            a.name
</script>

4. 构造函数

//第四种构造函数（首字母必须大写，驼峰命名法）
            function CreatObj2(name){
                this.name = name;
                this.action = function(){
                    console.log(this.name);
                }
            };
            var a1 = new CreatObj2('包包');

（4）方法数据类型

//function类型
            //函数声明
            fun(123);//可执行
            function fun(name){
                return name;
            };
            //函数表达式
            fun(123);//不可执行
            var fun2 = function(name){
                return name;
            };
            fun(123);//可执行
            //两种方法的区别在与函数声明会优先被浏览器解析
            //函数表达式必须先定义再调用

（5）引用类型（指针指向内存地址）

注意：值类型和引用类型的区别，值类型就是独立的，不会影响，可以比喻为两个双胞胎；引用类型因为指针指向内存地址，所以变一个就会改动内存，可以比喻为影子

//值类型和引用类型的区别
            var a = 10;
            var b = a;  //10
            a = 20;
            console.log(b);  //10
//引用类型，会跟着变，因为指针指向的是内存地址
            var arr5 = [1,2,3,4,5];
            var arr6 = arr5;//[1,2,3,4,5]
            arr6[1] = 99;//[1,99,3,4,5]
            console.log(arr5);

            var o = {name:'aa'};
            var o2 = o;// {name:'aa'}
            o2.name = 'www';
            console.log(o);
            //这里输出的是www，因为同样是指向的是内存地址

2、过程式开发与面向对象开发

从弹层小demo来引入这个概念，面向对象开发暂时可以理解为装换为

var obj = {
    init:function (){  //初始化方法，这里可以传参数进来
      this.bind();
      this.popup();
    },
    bind: function () {  //绑定事件，移入、移出、单击
      $(".root .list-b").hover(function () {
        //注：这里为了保证选择器的唯一性，要习惯性的加上父级
        //移入
        $(this).find(".see").show();
      }, function () {
        //移出
        $(this).find(".see").hide();
      });
      $(".root .see").click(function () {
        $(".bg").show();
        $(".popupbox").show();
        //$(".bg , .popupbox").show();  这部分可以写成缩写，寻找公共部分
      });
    },
    popup: function (type) {  //弹层居中
      var _w = document.body.clientWidth,  //网页可见区域的宽
          _h = document.body.clientHeight,  //网页可见区域的高
          pw = type.width(),
          ph = type.height(),
          left = (_w - pw) / 2,   //弹层距离左边的距离
          top = (_h - ph) / 2;    //弹层距离顶部的距离
      $(".popupbox").css({ 'left': left, 'top': top });
    }
  }