最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

js函数的new调用与普通调用中this的差异问题

来源:懂视网 责编:小采 时间:2020-11-27 20:12:30
文档

js函数的new调用与普通调用中this的差异问题

js函数的new调用与普通调用中this的差异问题:首先看一段代码感受一下this的作用。 place='out'; function where(){ var place='in'; alert(place); //in alert(this.place); //out } where();从中可以得知,place获得了函数内部的变量,而this.place则
推荐度:
导读js函数的new调用与普通调用中this的差异问题:首先看一段代码感受一下this的作用。 place='out'; function where(){ var place='in'; alert(place); //in alert(this.place); //out } where();从中可以得知,place获得了函数内部的变量,而this.place则

首先看一段代码感受一下this的作用。

 place='out'; 
 function where(){
 var place='in';
 alert(place); //in
 alert(this.place); //out
 }

 where();

从中可以得知,place获得了函数内部的变量,而this.place则获得了外部的变量值。这是为什么呢?其实,this的作用是指向执行当前函数的外部环境对象。在这里执行where时的环境是全局环境,所以this指向global(在浏览器中是window),那么 this.place 得到的就是全局变量 place 了。

通过下面一段代码进行验证。

 place='out';
 passer={ var place: 'in',
 askWhere: function(){
 alert(this.place); //in
 },
 };

 passer.askWhere();

这里的this在askWhere指向的函数中,函数执行的外部环境是passer对象,所以 this 指向 passer 对象,this.place 得到的也就是 in 。

那么再看下面一段代码,new 会导致函数中的 this 出现哪些不同呢?

 function Passer(){
 this.place = 'in'; this.askWhere = function(){
 alert( this.place ); //in
 }
 }
 alert(window.place); //undefined
 Tom = new Passer();
 Tom.askWhere();

如果按照之前的理论分析,Passer 中的 this 指向 global ,那么this.place 应该是在全局环境中定义了place,为什么会出现window.place = undefined 的情况呢?

这里就体现出new 调用与普通调用的区别了。其实 new 操作时进行了一下几个步骤:

 1.创建一个新的对象(并把空对象的__proto__属性设置为Passer.prototype)。

 2.将构造函数的作用域赋给新对象(此时this 指向了这个新对象)。

 3.执行构造函数中的代码(通过this 为这个新对象添加属性)

 4.返回新对象。

因此这里的this 实际上并没有指向全局,而是一个新的对象。那么执行askWhere 时函数内的this 也是指向这个新的对象内部的。

如果这里的构造函数Passer 进行普通调用,结果和我们最开始的分析是相符的。

总结:在对函数进行new 调用时this 的表现的根本原因在于创建了一个新的对象并将构造函数的作用域赋给新对象,这使得this 指向了新对象。其实this 指向执行当前函数的外部环境对象的作用是一直没变的。

文档

js函数的new调用与普通调用中this的差异问题

js函数的new调用与普通调用中this的差异问题:首先看一段代码感受一下this的作用。 place='out'; function where(){ var place='in'; alert(place); //in alert(this.place); //out } where();从中可以得知,place获得了函数内部的变量,而this.place则
推荐度:
标签: js 问题 的问题
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top