美文网首页前端Web前端之路让前端飞
JavaScript的this的值到底是什么?

JavaScript的this的值到底是什么?

作者: 朋友喜欢叫我春哥 | 来源:发表于2017-04-29 15:26 被阅读47次

    前言

    JavaScript 有一套完全不同于其它语言的对 this 的处理机制。 一般有四种不同的情况下 ,this 指向的各不相同。但是有一个总的原则,那就是this指的是,调用函数的那个对象。

    this

    一、函数调用

    函数调用时,this指向全局对象,如果是在浏览器中中,这个对象是window

    请看下面这段代码:

    var fn  = function() {
        function test() {
          console.log(this);
        // this 将会被设置为全局对象(译者注:浏览器环境中也就是 window 对象)
        }
        test();
    }
    fn() //执行函数fn,结果指向window
    

    二、方法调用

    当函数作为对象的方法时,this指向该对象

    请看下面这段代码:

    var age = 10;
    var xiaoming = {};
    
    xiaoming.age = 18;
    xiaoming.getAge = function(){
      console.log(this.age);
    }
    
    xiaoming.getAge(); //18
    
    

    之所以为18不是10,因为this指向xiaoming这个对象,所以打印出来是18

    三、调用构造函数

    如果函数倾向于和 new 关键词一块使用,则我们称这个函数是 构造函数。 在函数内部,this 指向新创建的对象。

    请看下面这段代码:

    
    var x = 0;
    
    function test(){
      this.x = 1;
    }
    var obj = new test();
    
    console.log(obj.x); //  1
    
     
    

    打印出来为1不为0,表明this指向新对象obj,而不是全局对象。

    四、显式的设置 this (apply和call)

    当使用 Function.prototype 上的 call 或者 apply 方法时,函数内的 this 将会被 显式设置为函数调用的第一个参数.

    当第一参数为null 或者 undefined,在浏览器环境里那么window对象就是默认的this指向。

    var age = 0;
    var xiaoming = {};
    
    function setAge(age){this.age = age;}
    
    xiaoming.age = 18;
    xiaoming.setAge = setAge;
    
    xiaoming.setAge.apply(null,[20]);
    xiaoming.age     // 18
    age              // 20
    
    xiaoming.setAge.call(xiaoming,25);
    xiaoming.age     // 25
    age              // 20
    
    

    apply和call区别在于传递参数格式不同,call()接受一个参数列表,而apply()接受包含多个参数的数组(或类数组对象)

    文笔有限,才疏学浅,文中若有不对之处,还望告知。


    参考文章

    this 的工作原理

    this 的值到底是什么?一次说清楚

    Javascript的this用法

    Function.prototype.apply()

    相关文章

      网友评论

        本文标题:JavaScript的this的值到底是什么?

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