JavaScript中this的使用(四种情况下this的指向)

首先,我们先来简单了解一下在JavaScript中this是什么:

       解析器在调用函数时每次都会向函数内部传递一个隐含的参数, 这个隐含的参数就是this,this指向的是一个对象,这个对象我们称为函数执行的上下文对象。

在JavaScript中,根据函数的调用方式的不同,this会指向不同的对象

            this的四种情况:

                1.以函数的形式调用时,this永远指向window(浏览器)或global(nodejs)

                2.以方法的形式调用时,this就是调用方法的那个对象

                3.当以构造函数的形式调用时,this就是新创建的那个对象

                4.使用call()和apply()调用时,this是指定的那个对象

下面举例子来详细说明:

1.以函数的形式调用时,this永远指向window(浏览器)或global(nodejs)

//以函数声明的方式创建一个函数

function fun(){

            console.log(this);     //调用函数时会向函数中传递隐含参数this

        }

        fun();     //===>直接调用函数,在浏览器控制台输出结果为  object window

    创建一个函数,当我们以函数形式fun()直接调用时,函数中的this就会指向全局作用域的window对象。

2.以方法的形式调用时,this就指向调用方法的那个对象

//以对象字面量的方式创建一个对象

var obj={

            name:'terry',

            sayName:function(){

                                console.log(this);

                               }      //将函数作为一个对象属性的值来调用(即以方法的形式调用)

        }

obj.sayName();                 //   ===>此时会输出obj这个对象

 3.当以构造函数的形式调用时,this就是新创建的那个对象

构造函数的执行流程:

                    1.立刻创建一个新的对象

                    2.将新建的对象设置为函数中的this,在构造函数中可以使用this来引用新建的对象

                    3.执行函数中的函数体

                    4.将新建的对象作为一个返回值返回

这四步中只有第3步是需要我们来操作的,1、2、4都是自动完成的

//    构造一个存放人信息的函数 

       function Person(name,age,gender){

           this.name=name,

           this.age=age,

           this.gender=gender,

           this.sayName=function(){

                       alert(this.name);

                       }

       };

   var per=new Person('terry',18,'女');       //定义一个新的对象,将函数赋值给它

     per.sayName();                                    //此时会输出'terry',

  4.使用call()和apply()调用时,this是指定的那个对象

        语法:函数名.call(obj,实参列表);

                   函数名.apply(obj,实参列表数组);

        作用:改变this指向的对象

        区别:call()中实参列表可以接受无数个参数

                 apply()中只能接受两个参数,一个是对象名,一个参数数组,将参数放到数组中去

//创建一个函数

function fun(a,b){

                console.log('a='+a);

                console.log('b='+b)

                console.log(this.name)           //这里大家也可以打印console.log(this),最后输出的是obj这个对象;this.name输出的是obj这个对象的name属性的值。

}

//创建一个对象

var obj={

    name:'obj',

};

//用对象来调用函数fun,并传入实参   call()

fun.call(obj,1,2);         //输出的结果a=1    b=2     obj

//apply()  方法

fun.apply(obj,[1,2]);   //输出的结果也是a=1    b=2     obj

 


版权声明:本文为qq_45867474原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。