javascript设计模式学习之二——this

Posted 2020-07-26 初学者学习笔记

一、this指向问题

1）作为对象的方法调用

　　当函数作为对象的方法被调用时，this指向该对象，如obj.getA()；this就指向.之前的函数调用者；据此，事件处理函数内部的this也是指向事件发生的节点；

2）作为普通函数调用

　　在普通函数中，this指向全局对象window;

3)构造器调用

　　当使用new运算符调用函数时，该函数会返回一个对象，构造器中的this就指向返回的这个对象；需要注意的是，如果构造器显式返回了一个object类型的对象，那么此次运算结果最终会返回这个对象，构造器中的this也会指向这个对象，而非我们期望的this；

二、this丢失问题

思考下面一个问题，在prototype.js等框架中，做过这样的事情：

 

        var getId=function(id){
            return document.getElementById(id);
        }
        var oDiv=getId(‘div1‘);

 

思考为什么不用下面更简单的方式：

        var getId=document.getElementById;
        var oDiv=getId(‘div1‘);

 

 

后者会抛出一个异常，这是因为许多引擎的document.getElementById方法的内部会用到this;这个this被期望指向document,当getElementById被作为方法调用的时候，this指向没有问题；但是当用getId来引用documant.lgetElementById的时候，就成了普通函数的调用，其函数内部的this指向了window,而不是期望的doucment;

可以尝试利用下面的方法进行this修正：

        document.getElementById=(function(func){
            return function(){
                func.apply(document,arguments);
            }
        })(document.getElementById);
        var getId=document.getElementById;
        var div=getId(‘div1‘);

三、call和apply

1.这两个函数可以指定this的指向，apply使用数组或者类数组作为参数，call则参数数量不固定，从这个意义来说，apply比call使用的频率更高；如果传入的首个参数是null，则代表作为普通函数调用，this此时指向window；

2.这两个函数在某些场合下使用的目的不在于指向this，而是用于借用其他对象的方法；比如类数组如arguments添加数据可以借用[].prototype.push.call;转换为真正的数组可以采用[].prototype.slice.call;截取收元素可以借用[].prototype.shift.call;能够借用的关键在于这些函数内部实现原理同样也可适用于类数组的对象；只要满足以下条件：

　　1）对象本身可以通过数字下标存取属性；

　　2）对象的length属性可以读写；

jQuery框架中的$对象设计成类数组，其思想大概也是由此而来的吧。