Question

我在Javascript中使用＆＃34;这＆＃34;，绑定和事件创建对象时非常新。试图掌握那些对我来说很常见的东西。我在Javascript中做了一个简单的测试，创建了一个函数可以被任何html元素调用，以便在使用setTimeout函数片刻后应用css类：

HTML：

<body>
  <div id="circle"></div>
  <div id="square"></div>
  <div id="triangle"></div>
</body>

CSS：

.square {
  width: 50px;
  height: 50px;
  background-color: blue;
  opacity: 1;
  transition: all ease 1s;
}

.rotate {
  transform: rotate(45deg);
}

JS（我将关键字＆＃34; this＆＃34;分配给一个名为self的值，不引用窗口对象）：

var square = document.getElementById('square');
square.classList.add('square');

function rotate (elm){
  elm.classList.toggle('rotate');
}

square.addEventListener('click', function(){
  var self = this;
  setTimeout(function(){
   rotate(self);
  }, 500);
});

我是用另一种方式做的：

function rotate(){
  this.classList.toggle('rotate');
  console.log(this.getAttribute('id'));
}

square.addEventListener('click', rotate);

上面有事件监听器，关键字＆＃34; this＆＃34;自然传递给函数，getAttribute返回我点击的div的好ID：＆＃34; square＆＃34;。

//

这两个例子有效，但我想知道是否有更好的方法来做一个像使用＆＃34;这个＆＃34;在功能中。我在上面展示的两种方式的混合。还想添加setTimeout函数，但我不知道如何。例如，如果我执行类似的操作，则此关键字未定义，并且add事件侦听器的语法似乎错误：

function rotate(){
  this.classList.toggle('rotate');
  console.log(this.getAttribute('id'));
}
square.addEventListener('click', rotate(){
  setTimeout(function(){
   rotate();
  }, 500);
});

你能告诉我一个更好的方法吗？

Answer 1

您可以使用bind()

var square = document.getElementById('square');
square.classList.add('square');

function rotate() {
  this.classList.toggle('rotate');
}

square.addEventListener('click', function() {
  setTimeout(rotate.bind(this), 500);
});

.square {
  width: 50px;
  height: 50px;
  background-color: blue;
  opacity: 1;
  transition: all ease 1s;
}

.rotate {
  transform: rotate(45deg);
}

<div id="circle"></div>
<div id="square"></div>
<div id="triangle"></div>

Javascript和函数使用＆＃39;这个＆＃39;

1 个答案: