深入理解JavaScript中this取值的几种情况

  • A+
所属分类:JavaScript

在JavaScript中this的取值一直是一个困扰很多JavaScript初学者的一个问题,而且很多的前端面试题也是经常的以this的取值问题为考点来考察一个应试者的水平,下面就用我认为最简单最直接的语言来说一下this的取值情况。 this的取值一般有4中情况,但是需要深入理解每一种情况的原理。

1、构造函数

什么是构造函数?构造函数就是可以new出对象的函数,有些函数是为了实现一个功能用来调用而有些函数就是为了new出一个函数,就是根据函数的用途不同才有了构造函数这个词语,构造函数和普通都是一样的都是函数,构造函数的名称的一个第一个字母一般大写(约定俗成和普通函数区分),直接上代码:

function Foo(){
    this.name = "xiamm.cc",
    console.log(this);// Foo{...}对象
}
var obj = new Foo();

以上代码中构造函数里的this就是指的构造函数new出来的对象。

但是注意如果该还是没有被用作构造函数,也就是说该函数被直接调用了,那么此时的this指的就是window对象了

function Foo(){
    this.name = "xiamm.cc",
    console.log(this);//window{...}对象
}
Foo();

2、函数作为对象的一个属性

如果函数作为一个对象的属性并被用作该对象的属性调用,则此函数内的this指的是该对象。

var obj = {
    x:10,
    fn:function(){
    console.log(this); //obj{...}
    console.log(this.x); //10
    	}
    }
obj.fn();

以上代码fn作为一个对象的属性且作为对象的属性被调用,所以fn中的this就是指的是obj对象。

但是如果fn不是作为obj的属性被调用则又会是另外一种情况。

var obj = {
    x:10,
    fn:function(){
    console.log(this); //window{...}
    console.log(this.x); //undefined
    	}
    }
var f = obj.fn();
f();

以上代码中fn被赋值到一个变量中,fn没有被作为obj的属相调用而只是作为一个普通的函数调用,此时的this就是window。

3、函数使用call和apply调用

使用函数使用call或者apply调用,则函数内的this指的是传入的call或者apply的对象。

var obj  = {
    x:10
}
		
function fn(){
    console.log(this);//obj{...}
    console.log(this.x);//10
}
		
fn.call(obj);

关于call和apply的具体用法和区别,建议参考我的其他专题文章。

4、全局环境和普通函数内的this

全局环境的this指的都是当前的对象window。

console.log(this === Window);//true

普通函数的内的this也是指的window。

function fn(){
    console.log(this);//window
}
fn();

注意一下情况:

var obj = {
    x:10,
    fn:function(){
        function f(){
            console.log(this);//window{}对象
        }
        f()
    }
}
obj.fn();

f函数虽然是在fn的内部创建,但是它不是对象的属相只是一个普通的函数所以tihs还是window。

总结:

以上就是JavaScript中this的4中常见取值情况,我尽量使用简单的语言来解释自己理解的this,但是涉及到的原理性问题还需要自己去好好理解才能真正的明白而不是仅仅死记硬背,明白了原理以后再遇到考this的JavaScript面试题应该可以迎刃而解了。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: