js面向对象学习一《面向对象概念》

①.js的字符串操作是非常消耗性能，我们如果拼接字符串的时候，要尽量定义一个数组，用push往里面添加，性能相对来说好一点

如下：

 var content = ["<option value=''>请选择品牌</option>"];
                for (var og in data) {
                    content.push("<optgroup label='" + og + "'>");
                    for (var i = 0; i < data[og].length; i++) {
                        if (data[og][i].ID == obj) {
                            content.push("<option selected='selected' value='" + data[og][i].ID + "'>" +
                                data[og][i].NAME + "</option>");
                        } else {
                            content.push("<option  value='" + data[og][i].ID + "'>" +
                                data[og][i].NAME + "</option>");
                        }
                    }
                    content.push("</optgroup>");
  }

②.2.在javaScript中凡是有结果的都叫做表达式

③.===与==

    》如果是数值的话，前者比较类型也比较值，后者只比较值，不比较类型
    》如果是对象类型(引用数据类型)，两者没有差别只比较地址

④.面向对象是对面向过程的封装

⑤.js是一个基于对象的，不是完全面向对象的

⑥.js是一个基于对象的多范式的编程语言

         多范式例子：jquery的函数式编程规则（将值传入函数中执行），链式编程，支持面向对象的编程方式，支持面向过程的编程方式

⑦.js中所谓的对象就是键值对的集合

        例如，表示一个学生的json对象，里面有name，age等属性

                   键值是数据（基本数据，复合数据，空数据），就称为属性
                   键值是函数，那么就称为方法

⑧.面向对象概念

     1.抽象性：如果需要用一个对象描述一个数据，需要抽取这个对象的核心数据
            比如：name，age，gender这几个属性可以描述人，也可以描述动物，比较模糊，需要通过环境确定是描述的什么
            抽象性两点:
           1.抽取核心数据（上面的name，age，gender）
           2.不在特定条件下不知道是什么
     2.封装性：对象是将数据与功能组合到一起，即封装
          js对象就是键值对的集合
          键值如果是数据（基本数据，复合数据，空数据），就称为属性
          如果键值是函数，那么就称为方法
          对象是将属性与方法封装起来
         方法是将过程封装起来
     3.继承性：①自己没有，但是别人有，②拿过来成为自己的
         继承是实现复用的一种手段

继承性详解：

     JS中没有明确的继承语法，一般都是按照继承的理念实现对象的成员扩充实现继承
    因此js中实现继承的方法非常多

    其中一个最简单的方法就是 混入（mix）

混入继承如下：

<script>
    //js中没有明确的继承语法，一般都是按照继承的理念实现对象的成员的扩充实现继承
    //因此js中实现继承的方法非常多
    //其中一个最简单的方法就是 混入（mix）
    function mix(o1,o2){//下面的k就是对应得属性，比如age与name
            for(var k in o2){       //在jq中将该函数命名为extend
                o1[k] = o2[k];
            }
    }
    var o1={name:'张三'};
    var o2={age:15};
    mix(o1,o2);//就是将o2的成员一一加到o1中，使的o1具有两个对象的属性
</script>

⑨.断点调试

    》浏览器调试
    》条件断点

⑩调试查询api

通过在console中写,创建一个标签，然后赋给一个变量，然后在watch中看这个变量

十一，js中实用的运算符

<script>
//    console.log(typeof  123);//number
//    console.log(typeof  new Number());//object


//    in 运算符
//      语法：      '名字'   in   对象
//      返回值      boolean
//      判断该名字是否在对象中存在一个属性与之相同
//        例如：
//            var o = {name:'张三'};
//            console.log('name' in o);//true  name属性在o对象中存在，所以返回true
//            console.log('age' in o);//false  name属性在o对象中不存在，所以返回false



//    什么是逻辑中断？？
//    使用|| 或  && 表示或与并且的关系的时候，分为两种情况：
//      >1. || 如果左边的表达式为真，那么就不再计算右边的表达式
//        var num = 4;
//        console.log(123 || (num=5));//0为false，123为true
//        console.log(num);//4,因为123为true，右边的表达式没有执行，所以num还是为4
//      >2. && 如果左边的表达式为假，那么就不再计算右边的表达式


//    delete运算符
//    语法： delete 变量，数据项，对象属性
//    返回值： boolean   true代表删除成功   false代表删除失败
//    var o={name:'张三'};
//    var arr=[1,2,3];
//    console.log(delete o.name);//true  将name属性从o对象中删除，
//    console.log(delete arr[1]);//true  将arr数组中索引为1的一项删除，但是数组的长度不变
//    上面的两个值可以从浏览器的调试工具，watch中看到

//    var num1 = 123; //标准的语法声明变量
//    num2 = 456; //在代码执行到改行范围内的时候，会在全局范围内增加该变量
//    console.log(delete num1);//false
//    console.log(delete num2);//true
//    console.log(num1);//123
//    console.log(num2);//undefiend  因为上边的delete已经删除了

//    js中的循环：for，while,do{}while(),foreach



//    从下面的字符串中找出e的索引
      var str='abcdefj';
    for(var i = 0;i<str.length;i++){
//            if(str[i]==='e'){//这种方式，虽然可以使用，但是会出现不兼容的情况，数组可以这样用，但是字符串一般用下面的情况
                if(str.charAt(i)==='e'){
                console.log(i);
            }
            if(i===str.length){
                console.log(-1);
            }
    }
</script>

十二，第一个面向对象js实例的编写过程（从原生到面向对象）

<script>  在一个body标签中添加一个div标签
 使用原生的方式
//1.首选找到对象
    //2.任何操作都交给对象处理

    //任务需求：(使用原始的方式)
    //1>创建一个div标签
    var div = document.createElement('div');
    //2>将div添加到页面
    document.body.appendChild(div);
    //3>设置div的样式
    div.style.border = '1px dashed red';
    div.style.width = '400px';
    div.style.height = '300px';



    //使用面对象的方式去思考
    //1.抽象对象（名称提炼法）  div，body
    //2.分析属性与方法    加到，设置样式

    //创建一个代表div的构造函数
//    function DivTag() {
//        this.DOM = document.createElement('div');
//        this._加到 = function (node) {
//            //将新创建的div添加到node中
//            node.appendChild(this.DOM);
//        }
//        this._样式 = function (name,value) {
//            this.DOM.style[name] = value;//注意：这里在引用name的时候，因为这里是形式参数所以要用【】不能用逗号
//        }
//    }
//    var div = new DivTag();
//    div._加到(document.body);
//    div._样式('border','1px solid red');
//    div._样式('width','400px');
//    div._样式('height','100px');
//    div._样式('background','pink');


    //将参数替换为对象
//    function DivTag() {
//        this.DOM = document.createElement('div');
//        this._加到 = function (node) {
//            //将新创建的div添加到node中
//            node.appendChild(this.DOM);
//        }
//        this._样式 = function (obj) {
//            for(var k in obj){
//                this.DOM.style[k] = obj[k];
//            }
//        }
//    }
//    var div = new DivTag();
//    div._加到(document.body);
//    div._样式({
//        border:'1px solid red',
//        width:'800px',
//        height:'400px',
//        background:'red'
//    });


    //使用链式编程的方式
    function DivTag() {
        this.DOM = document.createElement('div');
        this._加到 = function (node) {
            //将新创建的div添加到node中
            node.appendChild(this.DOM);
            return this;//链式编程添加
        }
        this._样式 = function (obj) {
            for(var k in obj){
                this.DOM.style[k] = obj[k];
            }
            return this;//链式编程添加
        }
    }
    var div = new DivTag();
    div._加到(document.body)._样式({
        border:'1px solid red',
        width:'800px',
        height:'400px',
        background:'blue'
    });
</script>