JavaScript设计模式基础之thiscallapply

Posted 2021-01-06 y-y-y-y

1.this的指向

除去不常用的with和eval，具体应用中this指向大概能分为4种情况分别是

　　1.作为对象的方法调用。

　　2.作为普通函数的方法调用。

　　3.Function.prototype.call或Function.prototype.appy

1.如果作为对象方法的调用，this是指向该对象：

 let obj = {
            objName:\'obj\',
            objThis(){
                alert(this.objName);
            }
        }    
        obj.objThis();

输出如下：

对象obj里面的方法objThis的this是指向该对象

2.作为普通函数调用，this指向全局对象也就是window对象

var objName = \'window\';
        //  let obj = {
        //     objName:\'obj\',
        //     objThis(){
        //         alert(this.objName);
        //     }
        // }    
        function objThis(){
            alert(this.objName);
        }
        objThis();

输出：

函数里面的this默认指向全局window

3.构造器调用（es6类调用）,this指向实例化对象

class Obj{
            constructor(str,nub){
                this.str = str;
                this.nub = nub;
            }
            num(){
                console.log(this.str,this.nub,this)
            }
        }
        //类实例
        let obj = new Obj(\'hello\',123);
        obj.num();

输出：

this输出的是类的实例对象 构造函数或者类中this指向自身实例

总结：在谁里面使用this，this指向谁

2.call和apply

1.区别

　　appy接收2个参数，第一个参数指定函数体内this对象的指向，第二个参数为一个带下标的集合，这个集合可以为数组，也可以为类数组，appy方法吧这个集合中的原生

　　作为参数传递给呗调用的函数。

 

　　call传入的参数数量不固定第一个参数和apply相同，后面的每个参数依次传入只是不是以集合的方式而是参数的方式

　　　　　//apply
        let apply1 = function(){
            alert(arguments)//输出[1,2,3]
        }
        apply1.apply(null,[1,2,3])
        //call
        let call1 = function(){
            alert(arguments)//输出[1,2,3]
        }
        call1.call(null,1,2,3)

call是包装在apply上面的语法糖，如果我们传入的第一个参数是null，那么函数体内的this会默认指向宿主对象，在浏览器中就是全局window 

call和apply能改变this指向和借用其他对象的方法 这里就不一一阐述了 网上特别多 

为后面的设计模式做基础 是必须会的