原生方法系列(查缺补漏 不断更新)
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); //通过这种方式上面绑定的事件监听程序都移除了
posted on 2016-02-21 22:14 icantunderstand 阅读(233) 评论(0) 编辑 收藏 举报