• JavaScript的this指针到底指向哪?


    编程过程中,着实十分困扰this的指向性,经过查阅一番资料,终于搞清楚了,在这里总结一下,全文分为以下三个部分:

    1. 什么是this指针?
    2. this指针指向哪里?
    3. 何时使用this?

    一 什么是this指针?

    在JavaScript中,this指针是在创建函数时,由系统默认生成的两个隐式参数之一(另一个是arguments)。

    this指针指向与该函数调用进行隐式关联的一个对象,该对象被称为“函数上下文”。

    要想成功的使用this,就必须搞清楚在不同情形下,this指针指向什么“函数上下文”,下面将总结this参数在不同状况下的不同表现。

    二 this指针指向哪里?

    要搞清楚this指针的指向,需要根据不同的函数调用方式进行分析,有以下四种不同的调用情况:

    (1)作为函数进行调用

    这里作为函数进行调用是为了区分函数的其他调用方式(作为方法调用,new操作符调用和call,apply调用)。

    函数通常通过()操作符进行调用,此时函数内的this指针指向的是window对象。

    原因其实很好理解,默认this指针指向调用函数的对象,此时函数实际上是window对象的一个方法,因此this指针指向window对象是合情合理的。

    但是,这里有一个不太好的地方需要特别注意:

    var object = {
        way1 : function() {
            console.log(this);
            function innerFunc() {
                console.log(this);   
            }
            innerFunc();
        }
    }    
    
    object.way1();
    
    //object
    //window

    innerFunc函数内的this指针在此时意外的指向了window对象,使用时应该记住这个差异。因为本质上这个函数依然作为满足“作为函数进行调用”的条件。

    (2)作为方法进行调用

    一个方法所属的对象在该方法体内可以以this的形式进行引用,因此,当一个函数以方法的形式被调用时,this指针指向该方法的所有者。

    这是可以将JavaScript作为面向对象代码进行编写的主要手段之一。

    (3)作为构造器进行调用

    当函数作为“构造函数”进行调用时,this指针的指向解释起来就略微复杂一点了。

    我们要从构造函数本身来说起:

    在JavaScript中,构造函数被用来构造对象:

    function Person(name,age) {
        this.name = name;
        this.age = age;
    }
    
    var jenny = new Person('jenny',24);
    
    console.log(jenny.name); //jenny

    构造函数的调用,返回值即为一个对象,而这个对象即为构造函数作用域内this指针的引用对象,即“函数上下文”。

    (4)call(),apply()方法调用

    除了上述的三种情况下造成this指针的引用对象差异外,我们还可以自定义this指针的指向,通过使用call(),apply()方法。

    两个方法的使用方式为:

    function getName(age,sex) {
        console.log(this.name);
        this.age = age;
        this.sex = sex;  
    }
    
    var jenny = { name : jenny };
    
    getName.call(jenny,24,female);
    
    getName.apply(jenny,[24,female]);
    
    //jenny

    可见这两种调用方式的唯一区别在于,传入参数的形式,call方法依次写入参数,而apply方法则将所需传入函数的参数打包为一个数组统一传入。

    而这两种方法在做的事为,将函数内部的隐式this参数指向其第一个参数,并将其后的参数传入至函数中,调用函数。

    因此,在此种情况下,函数内部的this指针指向call与apply方法指定的对象。

    以上是JavaScript中,this指针在四种情况下的引用对象。

    三 何时使用this指针

    未完待续。

  • 相关阅读:
    JS 操作属性
    JS 操作对象 事件 样式
    JS 一个页面关闭多个页面
    JS DOM
    JS 语言基础
    JS 基础知识
    CSS样式表
    HTML 常用标记
    HTML iframe框架
    28-2 logging 日志模块
  • 原文地址:https://www.cnblogs.com/libinfs/p/5753560.html
Copyright © 2020-2023  润新知