js中this和回调方法循环-我们到底能走多远系列(35)

我们到底能走多远系列(35)

扯淡:

  13年最后一个月了,你们在13年初的计划实现了吗?还来得及吗?

  请加油~

 

主题:

最近一直在写js,遇到了几个问题,可能初入门的时候都会遇到吧,总结下。

例子:
var x =9;
var fobj ={x:1,test:function(callback){var x= 2;callback();}
}
function pp(){var x = 3;fobj.test(function(){alert(this.x)//9
    })
}
pp();
上面这段代码打印出的是 9 ,可以看到test的调用者是fobj,可是在test中执行回调时callback();这调代码前面是空的。所以其实是有一个作为的全局调用了这个回调,所以,执行回调代码时的this则就是全局环境。
总结一下:当方法被一个对象调用的时候:fobj.test(),那么this是绑定在fobj上的。
如果不是这样调用:callback() 那么this则绑定在全局变量上。
回调函数中的this,最好不要使用,因为this指的是,调用函数的那个对象。
回调函数作为参数传入一个方法,我们就不能确定这个方法中的环境变量是怎样了的。
Function的bind方法:
var x =9;
var fobj ={x:1,test:function(callback){var x= 2;callback();}
}
function pp(){var x = 3;fobj.test(function(){alert(this.x)//1
    }.bind(fobj))
}
pp();
使用bind方法后输出为1,其中的this指向了fobj。
Array的forEach方法
在使用forEach方法的时候,也有类似的场景,这个方法提供了参数传入指定的上下文
例子:
var x = "test";
var ojb = {x : "obj"
}
function pp(){var t = [1,2,3,4];t.forEach(function(value,index){alert(this.x + value);},ojb);
}
pp();
以上代码就指定了forEach中第一个参数匿名函数的上下文为ojb。
详细的参数规则和方法使用教程:摸我
循环回调函数问题:
例子:
for(var i=1;i<4;i++){doCallBack(function(){alert(i);//1,2,3
   });
}function doCallBack(callback){var x = "callback";callback();
}    
上面的代码执行结果看似没有问题,在实际项目中,使用回调异步一些耗时工作,比如数据库的查询,写node的时候这种情况很多,那么会出现什么样的结果呢?
看下下面的模拟:
for(var i=1;i<4;i++){doCallBack(function(){setTimeout(function(){alert(i);},1000)//4,4,4
   });
}function doCallBack(callback){var x = "callback";callback();
}
     全部打印4,导致这个发生的原因是因为回调函数中的耗时工作是异步的,也就是说第一次循环执行到doCallBack的时候,直接跳到for的末尾,然后开始第二次循环,一次类推,当循环达到i的最大值4的时候跳出循环,而延迟的工作开始了,这时候他们打印i,而这个i被加到了4,所以就有了全部打印4的结果。
先理解下js中的作用域链,比如下面的代码型式:
function A(){var i =1;function B(){i =2;...}
}
function C(){...}
     B方法的作用域链就像这样 B内部 ->A内部 ->全局,也就是说方法内部的方法是可以引用到外部方法的变量的,如果这个B方法在C被调用,那么我们就实现C方法使用到了同级方法的作用域。其实我们就会认为这是一个闭包的行为。这样的作用域链机制,带来的副作用在前面提到的例子中展示了。
解决办法: 
for(var i=1;i<4;i++){(function(x){doCallBack(function(){// alert(x)setTimeout(function(){alert(x);},1000);//1,2,3
      });})(i) 
}function doCallBack(callback){callback();
}
     这里我们可以看到加了个匿名方法包在外面然后直接传入i,执行方法。还利用了这个i作为基本类型是按值传递的,所以在函数内部是一个复制的值,外部i的自增将不能改变内部函数的x的值了。
也可以写成这样:
for(var i=1;i<4;i++){!function(x){doCallBack(function(){// alert(x)setTimeout(function(){alert(x);},1000);//1,2,3
      });}(i)
}function doCallBack(callback){callback();
}
用递归的办法:感受下
function doCallBack(x){if(x<=1){return 1;}else{setTimeout(function(){alert(x);},1000);//4,3,2return doCallBack(x-1);}}
doCallBack(4)

 

实际应用中,遇到引用类型的时候,展示使用里很土的办法先解决一下
代码类似:(3次循环,修改成下面代码)
var rstScoreMsg0 = {score : scores[0],username : uids[0],expLoser : expLoser,expWinner : expWinner,uid : 0};var rstScoreMsg1 = {score : scores[1],username : uids[1],expLoser : expLoser,expWinner : expWinner,uid : 0};var rstScoreMsg2 = {score : scores[2],username : uids[2],expLoser : expLoser,expWinner : expWinner,uid : 0};recordUser(rstScoreMsg0);recordUser(rstScoreMsg1);recordUser(rstScoreMsg2);
理论上,通过对象复制也是可行的。

让我们继续前行

----------------------------------------------------------------------

努力不一定成功,但不努力肯定不会成功。

转载于:https://www.cnblogs.com/killbug/p/3457445.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/473778.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用户画像系统

用户画像系统 1 用户画像概述 1.1 什么是用户画像 用户画像就是对现实世界中用户的数学建模。现实世界的用户通过自己各种各样的行为&#xff0c;浏览购买&#xff0c;或者收藏&#xff0c;等等这些行为会把自己的兴趣爱好等体现在这些行为中&#xff0c;比如喜欢看书就会有…

编程思想:面向对象和面向过程

何谓面向对象&#xff1f;何谓面向过程&#xff1f;对于这编程界的两大思想&#xff0c;一直贯穿在我们学习和工作当中。我们知道面向过程和面向对象&#xff0c;但要让我们讲出来个所以然&#xff0c;又感觉是不知从何说起&#xff0c;最后可能也只会说出一句就是那样啦&#…

LeetCode 1210. 穿过迷宫的最少移动次数(状态压缩BFS)

文章目录1. 题目2. 解题1. 题目 你还记得那条风靡全球的贪吃蛇吗&#xff1f; 我们在一个 n*n 的网格上构建了新的迷宫地图&#xff0c;蛇的长度为 2&#xff0c;也就是说它会占去两个单元格。 蛇会从左上角&#xff08;(0, 0) 和 (0, 1)&#xff09;开始移动。 我们用 0 表示…

读书笔记2013第18本:《像外行一样思考,像专家一样实践》

这本书是在看《暗时间》时收集到的&#xff0c;书的副标题是科研成功之道&#xff0c;自己是个信息工作者&#xff0c;也号称科研工作者&#xff0c;虽然经常忙着一些杂活&#xff0c;没有时间认真思考和做实验。但从中找点立项、研究、演讲、总结的经验也是有益的。这本书的目…

Django模板(编写html代码

1.模板 用于编写html代码&#xff0c;还可以嵌入模板代码更快更方便的完成页面开发&#xff0c;再通过在视图中渲染模板&#xff0c;将生成最终的html字符串返回给客户端浏览器 模版致力于表达外观&#xff0c;一个视图可以使用任意一个模板&#xff0c;一个模板可以供多个视图…

用户画像之Spark ML实现

用户画像之Spark ML实现 1 Spark ML简单介绍 Spark ML是面向DataFrame编程的。Spark的核心开发是基于RDD&#xff08;弹性分布式数据集&#xff09;&#xff0c;但是RDD&#xff0c;但是RDD的处理并不是非常灵活&#xff0c;如果要做一些结构化的处理&#xff0c;将RDD转换成…

EBS业务学习之应收管理

Oracle Receivable 是功能完备地应收款管理系统&#xff0c;它能够有效地管理客户、发票和收帐过程&#xff0c;因此是财务模块的重要组成部分&#xff0c;是财务系统中较为核心的模块之一。对于一个公司来说&#xff0c;是否能够与客户保持良好的跟踪&#xff0c;及时收取应收…

[Kaggle] Digit Recognizer 手写数字识别(神经网络)

文章目录1. baseline2. 改进2.1 增加训练时间2.2 更改网络结构Digit Recognizer 练习地址 相关博文&#xff1a; [Hands On ML] 3. 分类&#xff08;MNIST手写数字预测&#xff09; [Kaggle] Digit Recognizer 手写数字识别 1. baseline 导入包 import tensorflow as tf fr…

逻辑回归原理

逻辑回归原理 1 逻辑回归简介 logistic回归&#xff08;LR&#xff09;&#xff0c;是一种广义的线性回归分析模型&#xff0c;常用于数据挖掘&#xff0c;疾病预测&#xff0c;经济预测等方面。 优点&#xff1a;计算代价低&#xff0c;思路清晰易于理解和实现&#xff1b;…

Django中示例验证码的实现总结

验证码 在用户注册、登录页面&#xff0c;为了防止暴力请求&#xff0c;可以加入验证码功能&#xff0c;如果验证码错误&#xff0c;则不需要继续处理&#xff0c;可以减轻业务服务器、数据库服务器的压力。 1&#xff09;安装包Pillow3.4.1。 1pip install Pillow3.4.1点击查看…

java.lang.IllegalStateException: Not connected to server

在开发人际银行的时候 客户端smack老是出现如下错误: 12-09 13:00:37.115: E/AndroidRuntime(5221): FATAL EXCEPTION: Thread-1812-09 13:00:37.115: E/AndroidRuntime(5221): java.lang.IllegalStateException: Not connected to server.12-09 13:00:37.115: E/AndroidRuntim…

LeetCode 956. 最高的广告牌(DP)

文章目录1. 题目2. 解题1. 题目 你正在安装一个广告牌&#xff0c;并希望它高度最大。 这块广告牌将有两个钢制支架&#xff0c;两边各一个。每个钢支架的高度必须相等。 你有一堆可以焊接在一起的钢筋 rods。 举个例子&#xff0c;如果钢筋的长度为 1、2 和 3&#xff0c;则…

python面试题总结(一)字符串反转,写取指定数函数

1.请至少用一种方法下面字符串的反转&#xff1f; # 1.请至少用一种方法下面字符串的反转&#xff1f; s hello print() print(-a1-切片,简单的步长为-1, 即字符串的翻转(常用)-) #方法一&#xff1a;切片,简单的步长为-1, 即字符串的翻转(常用); a1s[::-1] print(a1)print() …

新闻发布系统登陆页

主要为前台设计&#xff0c;这真是一个细致活。另外用到圆角矩形制作&#xff0c;其实学会了也蛮简单的。 要学好后台对前台一定要有一定的了解并掌握一些相关知识。 以下为登录页代码&#xff1a; <% Page Language"C#" AutoEventWireup"true" CodeFil…

Tensorflow线程队列与IO操作

目录 Tensorflow线程队列与IO操作 1 线程和队列 1.1 前言 1.2 队列 1.3 队列管理器 1.4 线程协调器 2 文件读取 2.1 流程 2.2 文件读取API&#xff1a; 3 图像读取 3.1 图像读取基本知识 3.2 图像基本操作 3.3 图像读取API 3.4 图片批处理流程 3.5 读取图片案例 …

Django其他(站点、列表、上传

1.静态文件&#xff1a; 项目中的CSS、图片、js都是静态文件 一般会将静态文件放到一个单独的目录中&#xff0c;以方便管理 在html页面中调用时&#xff0c;也需要指定静态文件的路径&#xff0c;Django中提供了一种解析的方式配置静态文件路径 静态文件可以放在项目根目录下…

LeetCode 1298. 你能从盒子里获得的最大糖果数(BFS)

文章目录1. 题目2. 解题1. 题目 给你 n 个盒子&#xff0c;每个盒子的格式为 [status, candies, keys, containedBoxes] &#xff0c;其中&#xff1a; - 状态字 status[i]&#xff1a;整数&#xff0c;如果 box[i] 是开的&#xff0c;那么是 1 &#xff0c;否则是 0 。 - 糖…

给javascript初学者的24条最佳实践

1.使用 代替 JavaScript 使用2种不同的等值运算符&#xff1a;|! 和 |!&#xff0c;在比较操作中使用前者是最佳实践。 “如果两边的操作数具有相同的类型和值&#xff0c;返回true&#xff0c;!返回false。”——JavaScript&#xff1a;语言精粹 然而&#xff0c;当使用和&a…

Python面试题(二)列表去重,单例

1.Python里面如何实现tuple和list的转换python中&#xff0c;tuple和list均为内置类型&#xff0c; 以list作为参数将tuple类初始化&#xff0c;将返回tuple类型tuple([1,2,3]) #list转换为tuple以tuple作为参数将list类初始化&#xff0c;将返回list类型list((1,2,3)) #tuple转…

LeetCode 1614. 括号的最大嵌套深度

文章目录1. 题目2. 解题1. 题目 如果字符串满足一下条件之一&#xff0c;则可以称之为 有效括号字符串&#xff08;valid parentheses string&#xff0c;可以简写为 VPS&#xff09;&#xff1a; 字符串是一个空字符串 ""&#xff0c;或者是一个不为 "("…