JS 为什么在涉及到模块开发this的时候使用类似 self = this 的形式 p7
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的更多相关文章
- js模块开发(一)
现在嵌入页面里面的javascript代码越来越复杂,于是可能依赖也越来越严重,使用别人开发的js也越来越多,于是在理想情况下,我们只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 于是j ...
- js 模块开发之一(模块开发价值)
首先引用我们的今天的主角 ----<前端模块化开发的价值> 1,前端开发最常见的两个问题 ---命名冲突和文件依赖 2,对于命名冲突的基本解决办法就是学习其他语言的习惯,添加命名空间 va ...
- js模块开发
js模块开发(一) 现在嵌入页面里面的javascript代码越来越复杂,于是可能依赖也越来越严重,使用别人开发的js也越来越多,于是在理想情况下,我们只需要实现核心的业务逻辑,其他都可以加载别人已经 ...
- python-django框架-电商项目-订单模块开发_20191125
python-django框架-电商项目-订单模块开发 提交订单页面: 在购物车中点击提交订单,就应该到达提交订单页面了, 显示: 1,收获地址, 2,支付方式 3,用户购买的商品信息,数量,小计, ...
- python-django框架-电商项目-购物车模块开发_20191125
python-django框架-电商项目-购物车模块开发 商品详情页js代码: 在商品详情页,有加入购物车按钮, 点击加减号可以增加减少,手动输入也可以, 点击加入购物车,就要加过去, 先实现加减的操 ...
- 基于 Angularjs&Node.js 云编辑器架构设计及开发实践
基于 Angularjs&Node.js 云编辑器架构设计及开发实践 一.产品背景 二.总体架构 1. 前端架构 a.前端层次 b.核心基础模块设计 c.业务模块设计 2. Node.js端设 ...
- seajs实现JavaScript 的 模块开发及按模块加载
seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http:/ ...
- 《深入浅出Node.js》第2章 模块机制
@by Ruth92(转载请注明出处) 第2章 模块机制 JavaScript 先天缺乏的功能:模块. 一.CommonJS 规范: JavaScript 规范的缺陷:1)没有模块系统:2)标准库较少 ...
- 【转】Nginx模块开发入门
转自: http://kb.cnblogs.com/page/98352/ 结论:对Nginx模块开发入门做了一个helloworld的示例,简单易懂.也有一定的深度.值得一看. Nginx模块开发入 ...
随机推荐
- MVC3学习:利用mvc3+ajax实现全选和批量删除
本例数据库操作使用EF code first; 先利用mvc自带的模板,先生成一个list视图,然后再手动添加复选框和删除按钮 <table> <tr> @*在标题行添加一个全 ...
- (转)Linux 系统监控、诊断工具之 top命令详解
原文:https://www.linuxidc.com/Linux/2014-12/110563.htm 目录 (1)系统.任务统计信息:(2)进程. cpu 统计信息:(3)最后两行为内存信息:3. ...
- js获取上一个兄弟元素
需要用到的两个属性:previousSbiling和previousElementSibling previousSibling:获取元素的上一个兄弟节点:(既包含元素节点.文本节点.注释节点) pr ...
- [Java初探实例篇02]__流程控制语句知识相关的实例练习
本例就流程控制语句的应用方面,通过三个练习题来深入学习和巩固下学习的流程控制语句方面的知识,设计到,if条件判断语句,switch多分支语句,for循环语句及其嵌套多层使用,while循环语句. 练习 ...
- Linux系列:Fedora虚拟机设置固定IP上网(配置IP、网关、DNS、防止resolv.conf被重写)
首先声明:该方法在Fedora 17和18版本下有效,其它版本也许可行也许有所差异. 1. 虚拟机相关配置 如果不是虚拟机系统,则这步不需要,若是相关配置详细信息请看“Linux系列:Ubuntu虚 ...
- T-SQL 分布式查询
--返回本地服务器中定义的链接服务器列表. EXEC sys.sp_linkedservers /* 创建或更新 SQL Server 本地实例上的登录名与远程服务器中安全帐户之间的映射. 当用户登录 ...
- Linux的僵尸进程及其解决方法
1. 产生原因: 在UNIX 系统中,一个进程结束了,但是他的父进程没有等待(调用wait / waitpid)他,那么他将变成一个僵尸进程.通过ps命令查看其带有defunct的标志.僵尸进程是一个 ...
- VC++记录
1. 记录时间 #include <atlstr.h>#include <time.h>clock_t clockBegin, clockEnd; clockBegin = c ...
- spring mvc requestmapping 配置多个
参考 import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation. ...
- Swift基础
github上找了swift中文翻译,上传到百度云,给大家分享下 链接:http://pan.baidu.com/s/1hqGOxfe 密码:asto