javascript中的this!

进来发现很多初学前端的程序猿对this这个关键词的用法不是很了解,接下来就分几种方式来解析一下这个this

一、全局调用

    function yourName() {
        this.name = "寒冷东";
        console.log(this.name);
    }
    yourName(); //寒冷东

以上代码中,yourName()是全局性的方法,属于全局性调用,因此this就代表全局对象window

二、对象调用

    function yourName() {
        console.log(this.name);
    }
    var obj = {};
    obj.name = "寒冷东";
    obj.show = yourName;
    obj.show(); //寒冷东

函数还可以作为某个对象的方法调用,这时this就指这个上级对象。

三、构造函数调用

构造函数,就是通过这个函数,可以生成一个新对象。这时,this就指这个新对象。

    function yourName() {
        this.name = "寒冷东";
    }
    var obj=new yourName();
    obj.name // 寒冷东

上述代码中,我们通过new关键字创建一个对象的实例,new关键字可以改变this的指向,将这个this指向对象obj。
可以再生命一个name来证明this指向的不是全局。

	var name=‘程序猿’
    function yourName() {
        this.name = "寒冷东";
    }
    var obj=new yourName();
    obj.name // 寒冷东

在构造函数里面我们可以对name重新赋值,但并没有改变全局的name

四、apply/call调用时

apply()call()。两者用途都是在特定的作用域中调用函数,等于重新设置了函数体内this对象的值。

    var name = "程序猿";

    function FunOne() {
        this.name = "寒冷东";
    }

    function FunTwo() {
        console.log(this.name );
    }
    FunTwo(); //程序猿 因为是在全局中调用的FunTwo(),this.name 指向全局的name 
    FunTwo.call(window); //程序猿,this指向window对象,因此this.name 指向全局的name 
    FunTwo.call(new FunOne()); //寒冷东, this指向参数new FunOne(),即FunOne对象

    FunTwo.apply(window); //程序猿
    FunTwo.apply(new FunOne()); //寒冷东

上面的代码中,apply()call()this指向都是一样的。只不过调用参数的方式不一样,call() 是一个一个调用参数,apply() 是调用一个数组。
以上是我自己的一些见解,不足之处请各位大佬指出。

猜你喜欢

转载自blog.csdn.net/weixin_42870180/article/details/89184398
今日推荐