this call() apply()理解

小鱼儿 2022-08-02 15:57 199阅读 0赞

今天根据大神的讲解，我来总结一下最近有关JS的一些问题  
首先是this问题，一直困扰着我。今天看了大神的文章我先记下我的理解  
this 就是函数据以执行的环境对象。。。  
首先是一个例子

var point={
    x : 0,
    y : 0,
    moveTo:function( x , y ){ 
    this.x =x;
    this.y =y;
    }
    }

这个函数是被封装在对象里的，没有直接调用，而是通过point调用的，  
我们用moveTo方法时时这样写的，point.moveTo(1,1)所有这里的this绑定在了point对象里  
而我们换一种写法，写一种直接调用的方法

function qfy(){ 
    this.x=x;
    }
    qfy(5);

这时候我们会发现我们在全局中创建了一个x，这并不是我们想要的，因为在编写代码时，我们需要尽量减少全局变量的使用，  
在举一个例子，闭包的写法

var point={
    x : 0,
    y : 0,
    moveTo:function( x ){ 
    var moveX=function(){ 
    tihs.x=x;
            }
        }
    }

这是里面的this也是指向全局的，我们的初衷是想让他指向调用moveTo的对象的，那么我们如何改进呢，我们可以用一个变量记录下moveTo的this指向

var point={
    x : 0,
    y : 0,
    moveTo:function( x ){ 
    var that=this;
    var moveX=function(){ 
    that.x=x;
            }
        }
    }

这样我们就成功的将this指向改变了。。。  
**那么我们总结下上面两个例子的this为何会指向不同，首先第一个moveTo我们需要point对象才能调用，也就是说该方法不在全局中，是在对象中，所以this指向point而第二种是一种闭包情况，因为匿名函数的执行环境具有全局性，所以依旧指向全局（除非用call或者apply）为什么呢？因为我们在创建每个函数调用时会自动取得this和arguments而闭包至搜索到自身，不会向外部搜寻this，也就是说moveTo的this他无法获取到，所以this自然成了全局变量，说了这么多应该上面的情况清楚多了吧**  
之后再说一下，我们在构造函数的时候也会用this  
举一个最简单的构造函数

function Person(name,age){ 
        this.name=name;
        this.age=age;
    }
    var person1=new Person(“qft” ,”19”);
    //在构造函数中this指向构造对象

下面说一下call和apply这两个函数方法，主要的起别在第二个参数，call需要将传递给函数参数一一列举，而apply不需要。简单的一个例子

function sum (num1,num2){ 
    return num1+num2;
    }
    function callSum(num1,num2){ 
    return sum.call(this,num1,num2)
    }
    alert(callSum(10,10))    //20
    
    //而用apply方法怎么写呢
    function sum (num1,num2){ 
    return num1+num2;
    }
    function callSum1(num1,num2){ 
    return sum.apply(this,[num1,num2])//传入数组
    }
    function callSum2(num1,num2){ 
    return sum.apply(this,arguments)//arguments)的意思是传入调用函数也就是callSum传入的值，我们经常用到arguments.length来作为判断条件
    }
    
    alert(callSum1(10,10))    //20
    alert(callSum2(10,10))    //20

无论是call还是apply方法到底是什么意思呢，从结果上看，好像是我们定义的callSum函数也可以调用sum函数，这是怎么回事呢，这两个函数的意思，是在特定的作用域调用该函数，这里的this指向全局，也就说在全局变量调用sum函数，也就是说在调用callSum的时候也调用了sum函数。所以得到了结果与直接调用sum一样。  
它们还有一个强大之处就是扩大函数的作用域。

window.color=”red”;
    var o={
    color : “blue”
    };
    function sayColor(){ 
    alert (this.color);
    }
    sayColor()//red
    sayColor.call(this)//red
    sayColor.call(window)//red
    sayColor.call(o)//blue

o是对象，this指向自己  
这种方法的好处是，我们之前需要将方法写在o对象里，而现在我们不需要方法和对象有任何的关系，很好的将它们分开处理。