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. DES/3DES/AES区别

    公元前400年,古希腊人发明了置换密码.1881年世界上的第一个电话保密专利出现.在第二次世界大战期间,德国军方启用“恩尼格玛”密码机,密码学在战争中起着非常重要的作用. DES 1977年1月,美国 ...

  2. Shell - 简明Shell入门12 - 定制输出(ColorOutput)

    示例脚本及注释 #!/bin/bash echo -e "\033[32m" # 设置输出属性,绿色字体 echo "This is a test!" echo ...

  3. 让PETSc跑得再快一些

    最近做了一个使用PETSc来求解线性方程组(Ax=b)的项目,把其中遇到的一些坑和解决方法记录下来.本文不介绍PETSc如何入门,而是给出一些能让PETSc运行得更快的编程细节.开始我只是简单地修改P ...

  4. 【VC版】如何获取其他进程中ListView控件中的内容

    如果需要C#版的,可以看下我之前写的:C#如何获取其他程序ListView控件中的内容 获取其他进程的数据需要使用到以下几个函数: VirtualAllocEx() VirtualFreeEx() W ...

  5. js便签笔记(11)——浏览TOM大叔博客的学习笔记 part1

    1. 前言 这两天看了一下TOM大叔的<深入理解js系列>中的基础部分,根据自己的实际情况,做了读书笔记,记录了部分容易绊脚的问题.写篇文章,供大家分享. 2. 关于HTMLCollect ...

  6. Disruptor入门

    一.什么是 Disruptor Disruptor是一个高性能的异步处理框架,或者可以认为是最快的消息框架(轻量的JMS),也可以认为是一个观察者模式实现,或者事件-监听模式的实现,直接称disrup ...

  7. Spring代理

    概述 代理(Proxy)是一种设计模式, 提供了对目标对象另外的访问方式:即通过代理访问目标对象. 这样好处: 可以在目标对象实现的基础上,增强额外的功能操作.(扩展目标对象的功能). 举例:假设某用 ...

  8. solr(二) : 整合ik-analyzer

    一. 问题: 在使用solr时, 分词器解析中文的时候, 是一个一个字解析的. 这并不是我们想要的结果. 而在lucene中, 使用的中文分词器是 IKAnalyzer. 那么在solr里面, 是不是 ...

  9. sql的存储过程实例--动态根据表数据复制一个表的数据到另一个表

    动态根据表数据复制一个表的数据到另一个表 把track表的记录 根据mac_id后两位数字,复制到对应track_? 的表中 如:mac_id=12345678910,则后两位10 对应表为track ...

  10. k8s一点

    1.kubectl get secret -n kube-system|grep admin-token kubernetes-dashboard-admin-token-9q757  2.kubec ...