JavaScript 学习之 this 用法详解

作者: 邪人君子 | 来源:发表于2018-01-02 17:28 被阅读37次

简介

this是Javascript语言的一个关键字。在Javascript中,This关键字永远都指向函数(方法)的所有者。
随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。
在Javascript中this总是指向调用它所在方法的对象。因为this是在函数运行时,自动生成的一个内部对象,只能在函数内部使用。

全局性调用

当没有明确的执行时的当前对象时,this指向全局对象window。我们先来看一个简单的例子:

 var name = "baobao";     
    function myName(){       
        alert(this.name);     
    }     
    myName();  

输出结果为:


定义在全局的函数, 其实也就是window对象的一个方法.所以此处this就代表全局对象window。全局函数是window对象的方法, 全局变量是window对象的属性,所以在全局函数中就可用通过this关键字来访问全局变量。

对象方法调用

 var name = "baobao";     
    function myName(){       
        alert(this.name);     
    }     
 var my = {};     
    my.name = "yuanyuan";
    my.myName = myName;     
    my.myName();

输出结果为:


此处this指向my对象,即调用方法的对象,而不再是全局对象window

构造函数调用

构造函数中的this指向新创建的对象本身。

 var name = "baobao";     
    function myName(){     
        this.name = "yuanyuan";
    }     
 var my = new myName(); 
        alert(my.name);

输出结果为:


image.png

上述代码中,我们通过new关键字创建一个对象的实例,new关键字可以改变this的指向,将这个this指向对象my。在构造函数的内部,我们对this.name进行赋值,但并没有改变全局变量name

apply调用

apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是这第一个参数。apply()的参数为空时,默认调用全局对象。

var name = "baobao";     
    function myName(){       
        alert(this.name);     
    }     
var my = {};     
    my.name = "yuanyuan";
    my.myName = myName;     
    my.myName.apply();       //baobao
    my.myName.apply(my);     //yuanyuan

new关键字

new关键字后的构造函数中的this指向用该构造函数构造出来的新对象:

function Person(__name){
    this.name = __name;        //这个this指向用该构造函数构造的新对象,这个例子是Bob对象
}
Person.prototype.show = function(){
    alert(this.name);
}
var Bob = new Person("Bob");
Bob.show();        //Bob

没有明确的当前对象时

当没有明确的执行时的当前对象时,this指向全局对象window

var name = "Tom";
var Bob = {
    name: "Bob",
    show: function(){
        alert(this.name);
    }
}
var show = Bob.show;
show();  //Tom

此处this的调用位置是show方法,并没有明确的对象。所以this指向全局对象window。下例同理:

var name = "window";
var Bob = {
    name: "Bob",
    showName: function(){
        alert(this.name);
    }
};
var Tom = {
    name: "Tom",
    showName: function(){
        var fun = Bob.showName;
        fun();
    }
};
Tom.showName();  //window

虽然 funBob.showName 的一个引用,但是实际上,它引用的是showName 函数本身,因此此时的fun() 其实是一个不带任何修饰的函数调用,因此应用了默认绑定。

本文参考文献

Javascript中this关键字详解------作者:Justany_WhiteSnow
javascript中的this作用域详解----作者:coder_Jenny

相关文章

网友评论

    本文标题:JavaScript 学习之 this 用法详解

    本文链接:https://www.haomeiwen.com/subject/uaofnxtx.html