h5学习笔记(2)this 、循环赋值引用问题

这几天开始练习js,js写法让我无法适应,一方面是弱引用,更多方面本身对js不熟悉,于是我连续踩坑了几次。

踩坑日志一

第一次踩坑是关于this 这个在闭包函数的时候指向的问题,第一次在使用egret的时候遇到的,我在function 的function 加入了这个this 后 出现this 指向了window的可笑情况。

看看下面朋友提供的几个案例:

var person = {
   word: 'Hi',
   greet: function() {
       setTimeout(function(){
         alert(this.word);
       }, 1000);
   }
};
person.greet();

运行后,你会发现在setTimeout 里面 this 的指向是有问题的。

再看看改写了情况

var person = {
   word: 'Hi',
   greet: function() {
       var self = this;
       setTimeout(function(){
         alert(self.word);
       }, 1000);
   }
};
person.greet();

再来看看 ,采用匿名函数es6 的写法 ()=> 你会发现其实可以执行到。this 引用没有错。

var person = {
   word: 'Hi',
   greet: function() {
       setTimeout(()=>{ alert(this.word); }, 1000); } }; person.greet(); 

这几种写法 还是要注意问题,js机制问题,一不小心很容易理解错误。this 的指向同一样,其实会发生改变的。包括oc self ,as3的this 也会出现这种类似的问题。

但是为什么采用()=> 这个es6 标准,js 的this 没有之前问题,依旧可以继续使用?

继续引用朋友的讲解图片(O(∩_∩)O哈哈~)
经过我们早上的讨论和学习,可以发现这个问题,es6 内部已经干了这件事情,将this 引用改 了一下,当中还是回归到我们上面的案例。es6 暗中帮你解决这个this麻烦事情,你依旧可以安心去使用this,不知道能不能这样理解呢。

h5学习笔记(2)this 、循环赋值引用问题_第1张图片

可以在里面执行代码调试
http://www.typescriptlang.org/Playground

踩坑日志二

第二次踩坑是在for 循环的时候为按钮传递一个参数的时候发生一个问题。

var a = [];
function foo() {
  console.log(a);
}

//修改值
var a =['qq'];
foo();

首先我们知道a 在这个区域当中是一个全局变量了,a变化,则函数foo 输出的 变不一样。

在for 循环的时候 还有一个要注意的是for的时候 或者有其他条件体的时候。 我也踩过坑:(引用朋友的话)

for() {
  var a = i;
}
你不要想着a每次都是“新建变量”

其实是这样

一定记得其实是这样:
var a;
for() {
  a = i;
}

实际上当你引用这个a的时候,这个a 是发现奇怪为什么是最后一个数? 这个是作用域的一个问题。

再来看看 坑在哪了。

我将我这个有毛病的代码粘贴在一起

var vboxs = document.getElementsByClassName("ui-vbox");
function show(value) {
    console.log(value.value);
}
for(var j = 0;j<vboxs.length;j++)
{
    var btn = vboxs[j].getElementsByTagName("button")[0];
    var numInput = vboxs[j].getElementsByTagName("input")[1];
    var shopName = vboxs[j].getElementsByTagName("p")[0];
    var price = vboxs[j].getElementsByTagName("span")[0];

    btn.onclick = function() {show(numInput)};
}

我天真以为,为一个按钮传递参数是一件很平常的事情,当我执行
btn.onclick = function() {show(numInput)}; 的时候,其实numInput是一直改变当中,所以当我发现for 循环走完后,引用其实一直指向最后一个。

也是回归到之前的问题

var a;
for() {
  a = i;
}

这种情况就是我踩坑的地方。
于是朋友改过一下 换一种偷懒的做法解决这个问题

var vboxs = document.getElementsByClassName("ui-vbox");
function show(value) {
    console.log(value.value);
}
for(var j = 0;j<vboxs.length;j++)
{

    var btn = vboxs[j].getElementsByTagName("button")[0];
    var numInput = vboxs[j].getElementsByTagName("input")[1];

    var shopName = vboxs[j].getElementsByTagName("p")[0];
    var price = vboxs[j].getElementsByTagName("span")[0];

    btn.numInput = numInput;
    btn.onclick = function() {show(this.numInput)};
}

btn.numInput = numInput; 采用这种动态属性的做法。js 的对象是可以动态加属性,类似as3 MovieClip 里面动态属性。借用这个写法,可以在for 循环一一对应了为每一列数据添加相应的对象引用了。突然发现 js 还是挺多需要注意的地方。

踩坑日志三

最近经常接触 到 需要对标签内的文本进行采用或者浮点数和整形之间的转换 ,p ,span ,input 等标签内的文本进行转换。

Js的浮点数是一大坑,遇到的时候要小心注意使用。

innerHTML 带标签的
innerText 不带标签文本
parseFloat 转浮点数
parseInt 转换整形
Math.floor 取下限整形还是有效

你可能感兴趣的:(h5学习笔记(2)this 、循环赋值引用问题)