你的位置:首页 > 软件开发 > Java > 别真以为JavaScript中func.call/apply/bind是万能的!

别真以为JavaScript中func.call/apply/bind是万能的!

发布时间:2016-05-06 21:00:12
自从学会call/apply/bind这三个方法后我就各种场合各种使用各种得心应手至今还没踩过什么坑,怎么用?说直白点就是我自己的对象没有某个方法但别人有,我就可以通过call/apply/bind去调用执行别人家的方法,不太懂具体用法的同学可移至MDN学习一下Function. ...

别真以为JavaScript中func.call/apply/bind是万能的!

自从学会call/apply/bind这三个方法后我就各种场合各种使用各种得心应手至今还没踩过什么坑,怎么用?说直白点就是我自己的对象没有某个方法但别人有,我就可以通过call/apply/bind去调用执行别人家的方法,不太懂具体用法的同学可移至MDN学习一下Function.prototype.call() Function.prototype.apply() Function.prototype.bind() ,本文不讲解使用,但是这三个方法并不是万能的,并不一定会执行你想要的那个函数,因为可能要看函数中上下文对象的某些属性特性值允许不允许改变,今天这个坑我就深深踩了一下,并探索了一番。

事件起因:(2).然后实现我们的add函数

Object.defineProperty(DOMTokenList.prototype, 'add', {  configureable : true,  enumerable : true,  writable : true,  value : function(value){    if([].indexOf.call(this, value)>=0) return;   //加到classList类数组中   [].push.call(this, value); }});
这里push方法因为会改变数组的长度length,而且不止push,pop,unshift,shift的执行也会改变数组长度,经测试它们会报出同样的错。这里的DOMTokenList.prototype.length获取它的特性值为:length的访问器属性中set特性被引擎设置为undefiend了,怪不得不能将value加到document.body.classList类数组中,因为引擎没有给你提供set的接口函数啊,只给你提供get特性函数返回length长度。而我们平常使用的这个不会报错是因为length属性的value值是可变的,注意这里其实是每个数组实例都有自己的length属性。不过好在DOMTokenList.prototype的length属性configurable特性是true,意味着我可以自己写length的set函数。现在整个过程就是:当实现我自己的add函数,因为add函数中调用到push操作,当执行push操作时会更新DOMTokenList.prototype.length(自动调用set函数),我可以在set函数中执行相关处理,先拿console测试一下是不是这个流程

Object.defineProperty(DOMTokenList.prototype, 'length', { set : function(){console.log('执行了')}})
确实是的,而且现在不报错了。但是我现在做的只是皮毛,'classA'还没有加到document.body.classList中去呢,看看列表里还只是"document":不知道push函数引擎是怎么实现的,这说明JS引擎好像就没执行push函数,此方法行不通...不清楚它为什么不执行push操作??那还是乖乖转化为数组再处理吧。常见的是将类数组转化为真正的数组再做相关处理,方法挺多比如Array.from(),Array.prototype.slice.call()等等,不过这会改变原来类数组的类型啊,我就想问怎么样处理能给类数组添加项而不改变类数组的类型。数组实例的类型由它的__proto__决定,那就好办了,不过得先设置classList属性的一些特性项,JS引擎给的set是undefiend最后重写下来为:

Object.defineProperty(DOMTokenList.prototype, 'add', {  configureable : true,  enumerable : true,  writable : true,  value : function(value){    if([].indexOf.call(this, value)>=0) return;   //加到classList类数组中   var newarr = Array.from(this);   newarr.push(value);   newarr.__proto__ = DOMTokenList.prototype;   document.body.classList = newarr; }});Object.defineProperty(Element.prototype, 'classList', { set: function(value){  console.log(value);  //这里怎么处理不同元素的classList值是JS引擎的事,我实在是不会了 }})


原标题:别真以为JavaScript中func.call/apply/bind是万能的!

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。