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. 一步步Cobol 400 上手自学入门教程03 - 数据部

    数据部的作用 程序中涉及到的全部数据(输入.输出.中间)都要在此定义,对它们的属性进行说明.主要描述以下属性: 数据类型(数值/字符)和存储形式(长度) 数据项之间的关系(层次和层号) 文件与记录的关 ...

  2. info.plist的选项含义

    1.     Application does not run in background(鍵名:UIApplicationExistsOnSuspend)自從iOS4.0之後,當你在應用程式執行的時 ...

  3. 浏览器内核、渲染引擎、JS引擎简介

    一.定义 浏览器内核分成两部分:渲染引擎和JS引擎. 由于JS引擎越来越独立,浏览器内核 就倾向于 单指 渲染引擎.  渲染引擎是一种对HTML文档进行解析并将其显示在页面上的工具.(说白了,就是按照 ...

  4. mvc大对象json传输报错

    public ActionResult GetLargeJsonResult() { return new ContentResult { Content = new JavaScriptSerial ...

  5. 避免resolv.conf设置被覆盖

    resolv.conf文件简介 /etc/resolv文件是系统指定dns服务器地址的配置文件.下面简称resolv.conf 当系统进行域名解析时,会先读取resolv.conf文件中设置的DNS地 ...

  6. nginx配置client_body_temp_path

    http://wiki.nginx.org/HttpCoreModule 中写道: 这里的client_body_temp_path是制定post上传的$_FILES上传的文件地址 后面的level1 ...

  7. 再学C/C++ 之 浅析gdb的-g选项

    浅析gdb的-g选项   准备 gdb是Linux下学习C/C++最常用的debug工具.要使用这一强大工具,必须在编译时加上-g选项,生成的目标文件才可以用gdb进行调试. 如,先创建一个test. ...

  8. Selenium自动化测试Python四:WebDriver封装

    WebDriver 封装 欢迎阅读WebDriver封装讲义.本篇讲义将会重点介绍Selenium WebDriver API的封装的概念和方法,以及使用封装进行自动化测试的设计. WebDriver ...

  9. 一道JS面试题引发的血案

    刚入职新公司,属于公司萌新一枚,一天下午对着屏幕看代码架构时. BI项目组长给我看了一道面试别人的JS面试题. 虽然答对了,但把理由说错了,照样不及格. 话不多说,直接上题: var a = 1; s ...

  10. Mac系统配置JDK1.8环境变量

    1.首先我们得知道JDK目录安装在哪里,按照下面的路径我们可以找到JDK的主目录,如下图所示.这里有两个目录是因为本机较早前安装过早期版本的JDK1.8. /Library/Java/JavaVirt ...