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

var a = 2;

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

这是理所当然的,不是么?实际上我们平时接触的最多可能就是这种,词法作用域(实际上当我们没有使用到关键字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个,可能会更加深你的理解

如果你看到最后的话~

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

  1. js模块开发(一)

    现在嵌入页面里面的javascript代码越来越复杂,于是可能依赖也越来越严重,使用别人开发的js也越来越多,于是在理想情况下,我们只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 于是j ...

  2. js 模块开发之一(模块开发价值)

    首先引用我们的今天的主角 ----<前端模块化开发的价值> 1,前端开发最常见的两个问题 ---命名冲突和文件依赖 2,对于命名冲突的基本解决办法就是学习其他语言的习惯,添加命名空间 va ...

  3. js模块开发

    js模块开发(一) 现在嵌入页面里面的javascript代码越来越复杂,于是可能依赖也越来越严重,使用别人开发的js也越来越多,于是在理想情况下,我们只需要实现核心的业务逻辑,其他都可以加载别人已经 ...

  4. python-django框架-电商项目-订单模块开发_20191125

    python-django框架-电商项目-订单模块开发 提交订单页面: 在购物车中点击提交订单,就应该到达提交订单页面了, 显示: 1,收获地址, 2,支付方式 3,用户购买的商品信息,数量,小计, ...

  5. python-django框架-电商项目-购物车模块开发_20191125

    python-django框架-电商项目-购物车模块开发 商品详情页js代码: 在商品详情页,有加入购物车按钮, 点击加减号可以增加减少,手动输入也可以, 点击加入购物车,就要加过去, 先实现加减的操 ...

  6. 基于 Angularjs&Node.js 云编辑器架构设计及开发实践

    基于 Angularjs&Node.js 云编辑器架构设计及开发实践 一.产品背景 二.总体架构 1. 前端架构 a.前端层次 b.核心基础模块设计 c.业务模块设计 2. Node.js端设 ...

  7. seajs实现JavaScript 的 模块开发及按模块加载

    seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http:/ ...

  8. 《深入浅出Node.js》第2章 模块机制

    @by Ruth92(转载请注明出处) 第2章 模块机制 JavaScript 先天缺乏的功能:模块. 一.CommonJS 规范: JavaScript 规范的缺陷:1)没有模块系统:2)标准库较少 ...

  9. 【转】Nginx模块开发入门

    转自: http://kb.cnblogs.com/page/98352/ 结论:对Nginx模块开发入门做了一个helloworld的示例,简单易懂.也有一定的深度.值得一看. Nginx模块开发入 ...

随机推荐

  1. Mysql root账号general_log_file方法获取webshell

    在前面的phpmyadmin漏洞利用专题中介绍了如何通过root账号来获取webshell,但在现实情况中,由于Mysql版本较高以及配置文件的缘故,往往无法直接通过root账号写入网站真实路劲下获取 ...

  2. windows下的redis集群搭建的艰辛历程

    我是参照这两篇教程进行的操作:   1.https://www.cnblogs.com/weiqinl/p/6490372.html   (主) 2.https://blog.csdn.net/qiu ...

  3. Vue2.5开发去哪儿网App 第三章笔记 下

    1.样式的绑定 我们可以传给 v-bind:class 一个对象,以动态地切换 class   例如: :class="{activated:isactivated}" 上面的语法 ...

  4. Vue源码翻译之渲染逻辑链

    本篇文章主要要记录说明的是,Vue在Vdom的创建上的相关细节.这也是描绘了Vue在界面的创建上的一个逻辑顺序,同时我也非常拜服作者编码的逻辑性,当然或许这么庞大复杂的编码不是一次性铸就的,我想应该也 ...

  5. C#基础篇七类和静态成员

    1.new关键字做的4个事情 1.1 开辟堆空间 a.开辟多大的空间呢? 当前类 所有的 成员变量类型所占空间的总和 + 类型指针(方法表的地址) b.开辟了空间干什么用呢? 存放 成员变量 1.2 ...

  6. 深入了解preventDefault与stopPropagation

    event.preventDefault()用法介绍(阻止默认事件) 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "subm ...

  7. 每一行代码都有记录—如何用git一步步探索项目的历史

    每一行代码都有一块被隐藏了的文档信息. 下面的代码片段不管是谁写的,其第4行因为某些原因要访问一个DOM结点的clientLeft属性,但却对结果不作任何处理.这十分的莫名其妙,你能告诉我他们为什么要 ...

  8. 31-hadoop-hbase-mapreduce操作hbase

    有一些大的文件,需要存入HBase中,其思想是先把文件传到HDFS上,利用map阶段读取<key,value>对,可在reduce把这些键值对上传到HBase中. HbaseMapper: ...

  9. mysql添加用户、修改权限,修改登录权限ip

    1.添加用户 1.1 登录MYSQL: @>mysql -u root -p @>密码 1.2 创建用户: 格式:grant select on 数据库.* to 用户名@登录主机 ide ...

  10. 《Netty权威指南》(三)Netty 入门应用

    Netty 服务端   Netty 客户端