学习JavaScript中this的指向问题

Daming 2018-01-22
1条评论 961 次浏览
Daming 2018-01-221条评论 961 次浏览

this的指向问题是学习JavaScript必须要理解的。

第一个例子:

 function demo1() {
        var user="crazyming";
        console.log(this.user);//undefined
        console.log(this);//winodw
    }

    demo1();

这种写法 this指向的是window(winodow是js中的全局对象),demo1的所有者是window对象,即window是demo1()的函数上下文,demo1实际上就是window对象中的一个方法, demo1()等同于window.demo1(),我们并没有在window中(demo1()函数外面)定义变量user,所以打印出了underfined

第二个例子:

//定义 object1对象
 var object1={

     user:"crazyming",//添加对象属性user

     //给对象添加method方法
     method:function () {

         console.log("hello, i am "+this.user);//打印出 hello, i am + object1对象中的user属性值,this指向了object1

     }

 };

 object1.method();//调用方法 输出 hello, i am crazyming

现在可以明白一点 this的指向在函数创建的时候是决定不了的,在调用的时候才能决定,谁调用的就指向谁。

第三个例子:

var  value=10;//定义一个变量value ,他实际上是window的一个属性 可以通过window.value 得到10

 //定义 object2对象
 var  object2 = {
     value:20,//给object2对象定义一个变量value
     //给对象添加method方法
     method:function(){
         console.log(this.value); //20  this指向了object2对象
     }
 };
 window.object2.method();//输出object2对象中的value,20

按照先前的说法,this指向的是调用它的对象,这里的this应该指向window才对。其实 先前的说法是不准确的。

准确来说:如果一个函数有this,this指向的就是调用这个函数的上一级对象。

比如demo1()的上一级对象是window(window是js中的全局对象,demo1()相当于window.demo1()),object2对象中的method方法的上一级对象是object2 。
this只会指向 调用它所的在函数的上一级对象

第四个例子:

var object3 = {
     test:1,
     b:{
         test:2,
         method:function(){
             console.log(this.test); //undefined
             console.log(this); //window
         }
     }
 }
 var test = object3.b.method;
 test();

这里this 指向的是window。

this 指向 调用它所的在函数的上一级对象,也就是this所在的这个函数 执行的时候是谁调用的,虽然函数method是被对象b所引用,但是在将method赋值给变量test时候并没有执行,,赋值就是将test和b.method指向了同一个引用地址。最终执行的是test(),所以this最终指向的是test()的上一级对象window。

构造函数中的this:

function Fn(){
    this.user = "crazyming";
}
var a = new Fn();
console.log(a.user); //crazyming

2018.11.1 更新:
new关键字可以改变this的指向,具体参考:http://www.crazyming.com/note/1308/

1+

学习JavaScript中this的指向问题” 有1条评论

发表评论

电子邮件地址不会被公开。