码迷,mamicode.com
首页 > Web开发 > 详细

JS 为什么在涉及到模块开发this的时候使用类似 self = this 的形式 p7

时间:2019-01-30 16:09:48      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:console   模块   函数   变量   通过   his   自定义   有关   span   

JS 动态作用域(调用栈)实际上也没有准确说明的,大多数我们使用对多和认知上大多是词法作用域,但是this的机制跟动态作用域很像。

var a = 2;

function fn(){
     console.log(a);
}

fn();// 2

这是理所当然的,不是么?实际上我们平时接触的最多可能就是这种,词法作用域(实际上当我们没有使用到关键字this时,都是这种)

但是有时候我们也想这样:

var a = 2;

function fn(){
    
  console.log(a);
} 


function fn2(){
  var a = 3;
  fn();
}

fn2();// 输出3

实际上,是不会的,还是输出2 ~

 

使用this看看

var obj = { id:‘我是内部ID‘,x : function (){console.log(this.id)} }
var id = "我是外部Id";
obj.x(); //我是内部ID

window.setTimeout(obj.x,100); //我是外部Id

this 在window调用的时候访问了其作用域 中的id “我的外部ID”,这跟 一级标识符有关,this会执行第一级调用它的对象,并绑定其作用域,所以如你所看到的一样,输出了外部ID

那么怎么解决这个问题:

使用self或者自定义一个变量声明来告诉它我要使用 “词法作用域

var obj = {
   id : ‘我是内部id‘,
   x : function(){
      var self = this;
      
      setTimeout(function timer(){console.log(self.id)},100)
   }

}

obj.x(); // 我是内部id

或者使用箭头函数(箭头函数在设计this绑定适会放弃普通this的规则)

var obj = {
   id : ‘我是内部id‘,
   x : function(){
      
      setTimeout(()=>{console.log(this.id)},100)
   }
}

或者使用bind绑定:

var obj = {
   id : ‘我是内部id‘,
   x : function(){
      
      setTimeout(function timer(){console.log(this.id)}.bind(this),100)
   }

}

上面的self 可能不明显,因为setTimeout看上去是在函数内部,但是实际上调用的还是通过window去调用,按照之前所说,还应该是输出 外部ID,但是实际输出为内部ID,如果还是有点晕,再补充2个,可能会更加深你的理解

如果你看到最后的话~ ??:

 

var obj = {
   id : ‘我是内部id‘,
   x : function(){
        function y(){  console.log(this.id) }; 
        y();
   }
}

var id = ‘我是外部ID‘;

obj.x();  //我是外部ID

// 使用self
var obj = {
   id : ‘我是内部id‘,
   x : function(){
        var self = this;
        function y(){  console.log(self .id) };  
        y();
   }
}    

obj.x();  //我是内部id

这里实际上应用到了闭包的概念(不是很典型),找找看,它在哪。

其实上面的最后一句y() 可以放到 function y() 中,也就是执行了IIFE ,IIFE 是会单独创建一个作用域,而访问的self就在其中。

或者这样:

var obj = {
   id : ‘我是内部id‘,
   x : function(){
        var self = this;
        function y(){  console.log(self .id) };  
        return y;
   }
} 


obj.x()()  // 我是内部id
var obj = {
   id : ‘我是内部id‘,
   x : function(){
        function y(){  console.log(this .id) };  return y;
   }
}   

obj.x()() // 我是外部ID

 

JS 为什么在涉及到模块开发this的时候使用类似 self = this 的形式 p7

标签:console   模块   函数   变量   通过   his   自定义   有关   span   

原文地址:https://www.cnblogs.com/jony-it/p/10337892.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!