原生方法系列(查缺补漏不断更新)

Function.call Function.apply

将其他对象的方法"借用"在自己身上用(this) Function.call 和Function.apply的行为非常相似只不过是Function.call接受的参数列表 Function.apply接受的是参数数组

　　　　var friend = {
     　　　　food:0,
            eat:function(amount,money) {
                this.food = amount;
                console.log(money);
            }
        }//friend对象有一个eat方法  设置自己的food属性 并且输出相应的money
        var me = {
            food:0,
            isHungry:function() {
                return this.food < 100;
            }
        }  //me只有一个根据food值判断是否饥饿的方法 me很懒 想使用朋友的eat方法（可以理解为喂我吃） 通过this的绑定eat方法中的this指向了我 所以我不在饥饿了

        console.log(me.isHungry());
        friend.eat.call(me,100,"120");  //call 接受参数列表
        console.log(me.isHungry());
        friend.eat.apply(me,[100,"120"]); //apply 接受参数数组
        console.log(me.isHungry());

生成对象的三种方法

对象字面量

　　　　var dog = {
            name:"ha",
            say:function() {
                return "wang";
            }
        }
　　　　dog.age = 9;
　　　　console.log(dog.age)  //9

其实可以理解为对象字面量是Object.create()的一种快捷调用

        var dog = Object.create(Object.prototype,{
            name:{
                value:"sss"
            },
            say:{
                value:function() {
                    return "wang";
                }
            }
        });

        console.log(dog.say()); //wang  //会在下面介绍Object.create()

这种方式是创建简单的一次性对象的最佳选择

new Object()

        var dog = new Object({
            name:"haha",
            say:function() {
                return "wang";
            }
        });

        console.log(dog.say());//wang

通过原生对象的构造函数进行对象的创建注意原生对象的构造函数是属于全局命名空间的也就是通过winow.Object能获取到这个构造函数(有可能被修改了)

Object.create(args1,args2) 第一个参数是提供原型的对象第二个参数是提供可选属性的对象 Object.create() 提供了new操作符的优点

        var person = {
            getOld:function() {
                this.age = this.age + 10;
                return this.age;
            }
        }
          var haha = Object.create(person,{
              age:{
                  value:10,
                  writable:true
              }
          });
          console.log(haha.getOld());  //20

第二个参数可选属性对象相应的属性配置需要配置否则默认为false 就是不可修改不可以枚举

window.getComputedStyle(元素,伪类) 第二个参数不是必须的使用这个方法可以获得当前元素所有使用的最终的CSS属性值返回一个样式声明对象它是一个只读的对象

对比 element.style element.style 也能获得一个元素的样式声明对象但是element.style只能获取元素style属相里面设置的css属性但是element.style 是可以读写的

在老版本的IE上是不支持window.getComputedStyle()这个方法的可以使用element.currentStyle 它同样是一个只读的对象我在IE11 上window.getComputedStye() element.currentStyle 都支持

2016 3 13 发现在chrome中并不支持element.currentStyle 也就是这玩意还是个IE搞特殊化的东西

要获取我们获得的样式声明对象obj（无论是通过window.getComputedStyle() 或者 element.currentStyle获取的）可以通过 obj.attrName 或者 obj['attrName'] 这样的方式获取

但是在不同的浏览器下同样的属性 attrName 的定义又有可能不同通用的方法是使用getPropertyValue('attrName') (不支持驼峰获取background-color getPropertyValue('background-color'))

element.getBoundingClientRect() 返回一个对象里面包含六个属性元素的width height 元素的上下左右相对于浏览器窗口的距离仔细理解上下左右相对于浏览器窗口的位置

我们可以通过这个方法获取元素的当前的位置通过以下这样的方式

      var interval = setInterval(function(){
        var rectObj = b.getBoundingClientRect();
        var x = rectObj.left + document.documentElement.scrollLeft;
        var y = rectObj.top + document.documentElement.scrollTop;
　　　　　//  当前元素距离窗口的位置  + 当前滚动条的位置  
        console.log('当前x坐标' + x  + ' 当前的y坐标 ' + y);



      },3000);  //这样拖动滚动条也能得到正确的元素的位置
2016 3 13  这里的top left bottom right 是没有单位的

element.getClientRects() 该方法返回一个TextRectangle集合也就是TextRectangleList对象每一个TextRectangle包含 top right bottom left width height 6个属性 TextRectangl是针对文本区域的一个描述也就是该方法只能在inline的文本元素上使用 (这里的top right bottom left 也是相对于浏览器窗口的位置)

      <div id="test">
         <span   id="b">sdadasda  dadasd  sadadad
        </span>
      </div>

对于上面的页面结构在页面上是这样显示的(由于空格的作用和外层div 的限制文本形成了 3行 )

形成了3个文本区域也就是3个TextRectangle对象这三个TextRectangle对象形成了一个TextRectangleList集合

      var span = document.getElementById('b');
      var list = span.getClientRects();
      var length = list.length;
      console.log(length);//3

通过length我们就可以判断文字是否换行并且换了几行在结合鼠标的位置就可以判断鼠标停留在哪行了

      var span = document.getElementById('b');
      var list = span.getClientRects();
      var length = list.length;
      console.log(length);

      span.onclick = function(event) {
        var i;
        var mouseY = event.clientY;
        var mouseX = event.clientX;
        for(i = 0;i < length;i++) {
          if( mouseY >= list[i].top  && mouseY <= list[i].bottom && mouseX >= list[i].left && mouseX < list[i].right) 
          {
            console.log(i);
          }

          
        }
      }   // 上面的例子就可以通过判断测试出鼠标点击的是哪行

element.addEventListener(event,handler,useCapture)

event 必须需要监听的时间例如 click

handler 必须监听时间发生后的处理函数

useCapture 可选布尔值指定事件是在捕获或者冒泡阶段执行 true 捕获阶段执行 false 冒泡阶段执行默认false

我们可以为一个事件添加多个处理程序

        var btn = document.getElementById('btn');
        function a() {
            console.log('a');
        }

        function b() {
            console.log('b');
        }
        btn.addEventListener('click',a);
        btn.addEventListener('click',b);

上面的例子中我们为click事件添加了两个事件处理程序当点击页面中的btn的时候两个事件监听程序都进行了处理并且是按照绑定的先后顺序进行事件的处理的

element.removeEventListener(event,hadler) 例如上面的例子我们可以通过下面的语句移除事件监听程序

btn.removeEventListener('click',a);

**通过匿名函数绑定的事件无法移除** （因为我们再次传入的handler并不是同一个函数）

有时候我们不想定义函数的声明也就是想要通过匿名函数的方式去绑定事件处理程序

        var btn = document.getElementById('btn');
        
        var handler = function () {
            console.log(1);
        }
        btn.addEventListener('click',handler);
        btn.removeEventListener('click',handler);   //也就是两个handler要指向同一个函数

关于添加事件监听的跨浏览实现请参考我的另一篇blog js事件小记

下面这种情况也许不大常见我们想移除上面绑定的事件处理程序怎么操作呢

        var btn = document.getElementById('btn');
        function a() {
            console.log(1);
        }
        function b() {
            console.log(2);
        }
        btn.addEventListener('click',a);
        btn.addEventListener('click',b);
        btn.addEventListener('click',function test() {
            console.log(3);//加断点
        })

在这个例子我们在click事件上绑定了有函数声明的函数和有名的匿名函数 (我的理解是外界无法取到它的引用而且我们使用匿名函数的时候也最好给它一个名字这样在控制台调试的时候通过堆栈的调用能查看我们调用的函数) 上面的例子中我在标注出加了断点

可以看出它调用了test函数回归正题对于这种情况我们要移除绑定的事件监听程序呢(里面还有一个万恶的匿名函数) 首先是可以通过一个一个的removeEventListener()来进行的(对于匿名函数没有办法) 我们可以通过cloneNode()的方法对要移除事件的元素进行复制在复制的时候不会保留上面绑定的事件监听程序并且匿名函数也移除了下面是简单的实现

        var new_btn = btn.cloneNode(true);
        btn.parentNode.replaceChild(new_btn,btn); //通过这种方式上面绑定的事件监听程序都移除了

原生方法系列(查缺补漏 不断更新)

原生方法系列(查缺补漏不断更新)