星空网 > 软件开发 > Java

javaScript this理解

之前学javascript的时候总搞不清this,这个this不像java里的this那么好理解。我后来也是看了许多别人写的文章,才理解过来的。现在把别人写的东西搬过来,怕以后忘记。

总得来说 this的指向分三种。指向全局window,该对象,构造函数。 

结论:Javascript中,this指向函数执行时的当前对象。  简单点说就是调用的方法属于哪个对象,this就指向那个对象。

 

1.   全局window

简单代码

    var message = "this in window";    var printMessage = function(){      console.info(this === window);      console.info(this.message);    };    printMessage();

       因为调用方法printMessage是属于window的,所以输出结果为:

          true   this in window

       现在如果将代码改复杂点

javaScript this理解
    var message = "this in window";    var printMessage = function(){      console.info(this === window);      console.info(this.message);    };    var obj = {      message: 'this in obj',      printMsg : function(){        printMessage();      }    };    obj.printMessage();
javaScript this理解

          此时printMessage方法是属于window的,所以他的this还是指向window。obj.printMessage 方法是属于obj对象的,看看下面的分析。

          所以输出结果还是为:true   this in window

           

 

 2.  该对象

现在看看该对象的,稍微改一下代码

javaScript this理解
    var message = "this in window";    var printMessage = function(){      console.info(this === window);      console.info(this.message);    };    var obj = {      message: 'this in obj',      printMessage : window.printMessage    };    obj.printMessage();
javaScript this理解

 

 结果:

 false        this in obj

对的,你想的没错 , 还是上一步的结论,obj.printMessage 方法是属于obj对象的,所以this是指向obj的。

 

好的再呕心点,看代码:

 

javaScript this理解
    var message = "this in window";    var printMessage = function(){      console.info(this === window);      console.info(this.message);    };    var obj = {      message: 'this in obj',      printMessage : function(){        var obj2 = {          message:'this in obj2',          printMessage: window.printMessage        };        obj2.printMessage();      }    };    obj.printMessage();
javaScript this理解

 最终调用的是 obj2.printMessage(),所以执行到this的时候,那个this是obj2

结果:

     false,this in obj2

  哈哈,是不是和你想的一样,谁调用的,就指向谁。

3. 构造函数

javaScript this理解
    var Person = function(){      this.age = 1;      this.name = 'no name';    };    var p = new Person();    console.info('age = ' + p.age);    console.info('name = ' + p.name);
javaScript this理解

 

结果:

       age = 1 name = no name。

 

那么构造函数对this作了什么呢?  昨天讲了原型链 http://www.cnblogs.com/nicholaszjb/p/4485482.html  有做new做分析。

var Person = function(){};

var p = new Person();

   new的过程拆分成以下三步:
   (1) var p={}; 也就是说,初始化一个对象p
   (2) p.__proto__ = Person.prototype;
   (3) Person.call(p); 也就是说构造p,也可以称之为初始化p

那么就来说说call。

       call 方法
       应用于:Function 对象
       调用一个对象的一个方法,以另一个对象替换当前对象。
          call([thisObj[,arg1[, arg2[,   [,.argN]]]]])
       参数:
          thisObj 
       可选项。将被用作当前对象的对象。 
          arg1, arg2, , argN 
       可选项。将被传递方法参数序列。 
    说明:
    call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

解释一下,call方法的作用其实是更改默认方法的this指向。调用call方法的肯定是一个方法对象,当调用call,方法对象的this指向会变成call方法的第一个参数,就这么简单。

var p = new Person();  

当调用构造函数Person时,可能是通过call来处理,使Person内的this指向了p,this.age = 1 就相当于p.age = 1,这样就张p添加了age这个属性。

 




原标题:javaScript this理解

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

艺术家:https://www.goluckyvip.com/tag/47597.html
亦邦国际物流:https://www.goluckyvip.com/tag/47598.html
亦邦物流:https://www.goluckyvip.com/tag/47599.html
提前布局2022:https://www.goluckyvip.com/tag/476.html
信息泄露:https://www.goluckyvip.com/tag/4760.html
亦简亦家:https://www.goluckyvip.com/tag/47601.html
价格翻了8倍,居然还有人买,秘诀在这里。:https://www.kjdsnews.com/a/1836642.html
欧洲B2B电商市场有待挖掘!销售总额将达1.7万亿欧元:https://www.kjdsnews.com/a/1836643.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流