我们到底能走多远系列(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)//
})
}
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)//
}.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,2
return 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);
 
理论上,通过对象复制也是可行的。
 
 
 
 
 

让我们继续前行

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

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

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

  1. 利用spring AOP 和注解实现方法中查cache-我们到底能走多远系列(46)

    主题:这份代码是开发中常见的代码,查询数据库某个主表的数据,为了提高性能,做一次缓存,每次调用时先拿缓存数据,有则直接返回,没有才向数据库查数据,降低数据库压力. public Merchant lo ...

  2. 【温故知新】——原生js中常用的四种循环方式

    一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0   网页输出“欢迎下次光临” 在网页中弹出框输入1   网页输出“查询中……” 在 ...

  3. node.js中的url.parse方法使用说明

    node.js中的url.parse方法使用说明:https://blog.csdn.net/swimming_in_it_/article/details/77439975 版权声明:本文为博主原创 ...

  4. javascript基础入门之js中的结构分支与循环语句

    javascript基础入门之js中的结构分支与循环语句 程序的结构①顺序结构:自上而下:②选择(分支)结构:多条路径,根据不同的条件,只执行其中一个:③循环结构:重复某些代码④配合特定的语句实现选择 ...

  5. JS中的对象和方法简单剖析

    众所周知,在js中对象就是精髓,不理解对象就是不理解js. 那么什么事js中的对象呢? 在js中,几乎一切皆对象: Boolean ,String,Number可以是对象(或者说原生数据被认作对象): ...

  6. 为什么JS是单线程?JS中的Event Loop(事件循环)?JS如何实现异步?setimeout?

    https://segmentfault.com/a/1190000012806637 https://www.jianshu.com/p/93d756db8c81 首先,请牢记2点: (1) JS是 ...

  7. js中数组去重的方法

    在实际工作或面试中,我们经常会遇到"数组去重"问题,接下来就是使用js实现的数组去重的多种方法: 1.借助ES6提供的Set结构 var arr = [1,1,2,2,3,3,4, ...

  8. JS中 call() 与apply 方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  9. JS中定义类的方法

    JS中定义类的方式有很多种: 1.工厂方式    function Car(){     var ocar = new Object;     ocar.color = "blue" ...

随机推荐

  1. Struts+Spring+Hibernate整合入门详解

    Java 5.0 Struts 2.0.9 Spring 2.0.6 Hibernate 3.2.4 作者:  Liu Liu 转载请注明出处 基本概念和典型实用例子. 一.基本概念       St ...

  2. ID3

    # -*- coding: utf-8 -*- import copy from numpy import * import math class ID3DTree(object): def __in ...

  3. jq 判断输入数字

    jq 判断输入数字 <input   id="N_source" name="N_source"   type="text" valu ...

  4. 二模 (4) day1

    第一题: 题目描述: 有一个无穷序列如下:110100100010000100000…请你找出这个无穷序列中指定位置上的数字 解题过程: 1.考虑到1的数目比0少的多,就从1的位置的规律开始分析.前几 ...

  5. exe转msi

    1.起因 由于域推送只支持msi安装包,而很多常用的工具比如Adobe Flash Player.exe.SilverLight.exe都是exe格式的,于是引出要将exe转成silent msi的工 ...

  6. LTP学习

    下载LTP源码和模型文件: https://github.com/linux-test-project/ltp 官方说明文档 http://ltp.readthedocs.org/zh_CN/late ...

  7. HDU 3336 扩展kmp

    题目大意: 找到字符串中所有和前缀字符串相同的子串的个数 对于这种前缀的问题,通常通过扩展kmp来解决 其实吧这是我第一次做扩展kmp的题目,原来确实看过这个概念,今天突然做到,所以这个扩展kmp的模 ...

  8. JSON.parse()和eval()区别

    JSON.parse()只会将标准的Json字符串(key和value都由双引号引起来,最外面用单引号括住)转为JSON对象. eval()在转换字符串的时候是比较松的,即使不是标准的Json字符串也 ...

  9. IBInspectable / IBDesignable

    无论陈词滥调多少次,比起一个需要我们记住并且输入什么的界面来说,如果替换成我们能够看见并可控制的界面的话将会是巨大的进步. Xcode 6 提供了这样一个替代,在旧技术上建立新的互动.在设计项目的时候 ...

  10. [网络技术]网关 路由器 OSI

    tracert 1.网关与路由 关键的区别:网关是这样一个网络节点:以两个不同协议搭建的网络可以通过它进行通信.路由器是这样一种设备:它能在计算机网络间收发数据包,同时创建一个覆盖网络(overlay ...