js基础篇(dom操作，字符串，this等)

首先我们来看这样一道题

<div id='foo' class='aa bb cc'></div>写出如何判断此div中是否含有aa(注：aa成立，aaa不成立)

首先，我们一定是取出class里面的这个字符串，然后我们想办法判断出这个字符串里面是否存在aa，并且只有aa。

我给大家提供了三种方法，第一种利用getAttribute方法，第二种利用getElementByClassName,第三种就是正则匹配了。

代码如下：

        /*
        ***用getAttribute方法实现
         */
        var oFoo = document.getElementById('foo');
        var str = oFoo.getAttribute('class');
        var arr = str.split(' ');
        for(var i=0;i<arr.length;i++){
            if(arr[i]=='aa'){
                alert('yes');
                break;
            }else if(i==arr.length-1&&arr[i]!='aa'){
                alert('no');
            }
        }

        /*
        ***用getElementByClassName实现
         */
         var oEle = document.getElementsByClassName('aa');
         console.log(oEle[0]);
         if(oEle[0]!=undefined){
             alert('yes');
         }else{
             alert(' no');
         }

         /*
         **正则匹配
          */ 
          var str = document.getElementById('foo').getAttribute('class');
          console.log(str);
          var re = /(sa{2}s)|(^a{2}s)|(sa{2}$)/g;
          alert(re.test(str));

正则这一定要注意了，这里有一个小坑就是可能会有人这么用：

var re = /a{2}/g;

这么用的问题就是的确是只匹配2个a，但是三个a其实也是成立的，因为整个字符串中三个a也是满足两个a的条件。而且我们需要满足存在aa条件就必须要有存在空格的情况。所以三种开情况必须都要考虑全面（正则的坑还是蛮多的，主要的坑不是语法，而是我们的逻辑）。

下面我们来看第二道比较坑的题目（关于js连等复制的指针指向问题）

题目是这样子的：

var a = {x:1};
var b=a;
a.c = a = {x:2};

a.c的值是多少？

首先看到了肯定是a指向{x：1}

然后b指向{x:1}，之后a又指向{x：2}

然后a中添加属性c为{x：2}

那么a的值就变成了{x：2,c：{x：2}}

所以结果应该是：{x：2}

其实这个逻辑是错误的，我们忽略了b指针的赋值，所以往下所有的结果都是错误的

我们来看下面代码

    var a = {x:1};
    var b=a;
    a.c = a = {x:2};
    console.log(a.c);//undefined
    console.log(b);//{x:1,c:{x:2}}
    console.log(a);//{x:2}

没错a.c的运行结果是undefined，没错就是你看到的，其实在最后一步的时候

1.先执行的是把a的指针指向了{x：1}

2.然后把b的指针指向了a指针的指向，也就是{x：1}

3.然后在把a的指针指向{x：2}，这个时候b的指针是{x：1}

4.所以连等中a.c中的a其实并不是上面指针指向啊a，因为连等操作还没有做完，所以a的指针指向的是{x：1}，然后给{x：1}添加c属性赋值为{x：2}

所以现在的结果就是b--->{x:1,c:{x:2}} a--->{x:2}

相信你看到这里就明白了，你在输出的a中是没有c属性的，所以a.c的值为undefined

如果到这里你真的明白了，那么在js底层数据指针的问题，我想你就应该算是了解透彻了！

下面我们来看一下最后一道题：

    var x=1;
    o={
        x:10,
        getVal:function(){
            alert(x);
            var x = 15;
            (function(){
                alert(this.x++);
            })();
　　　　　　  alert(++this.x);
        }
    };
    o.getVal();

请问三次alert分别是输出什么？

首先我们看第一个alert，这个alert输出的一定是一个undefined，因为alert后面有一句var x，这个就相当于是定义了局部的变量，然后我们的x就相当于预定义了一个

var x = undefined；所以输出的一定是undefined;

然后第二个alert因为在一个闭包里面，所以里面的this指向的是window，所以x就是1，因为后运行的++，所以是先alert出1之后，x的值就变成了2;

关于第三个this，指向的一定是调用它方法的那个对象也就是o，this.x指向的也就是o.x，因为前置++，所以alert出来的结果是11。

这样子看来，this是不是很好辨认呢？

    var x=1;
    o={
        x:10,
        getVal:function(){
            alert(x);//undefined
            var x = 15;
            (function(){
                alert(this.x++);//1
            })();
            alert(++this.x);//11
        }
    };
    o.getVal();