作为原始对象的布尔值和作为对象属性的布尔值有什么区别?

2022-01-17 00:00:00 javascript html5-canvas

我正在关注一些画布 教程.下面的代码就是其中的一个片段.

I'm following some canvas tutorial. The code below is a snippet of that.

在这个片段中，他们为什么不选择 runAnimation 作为一个简单的布尔值?我认为 x = !x 语句无论如何都会起作用，但是当我尝试将代码更改为使用布尔值时，代码不起作用.

In this snippet, why would they not choose for runAnimation to be a simple boolean? I would think the x = !x statement would work anyways, but when i tried changing the code to use booleans, the code didn't work.

那么，作为原始对象的布尔值和作为对象属性的布尔值有什么区别?

So, what's the difference between a boolean as primitive and a boolean as property of an object?

   /*
   * define the runAnimation boolean as an object
   * so that it can be modified by reference
   */
  var runAnimation = {
    value: false
  };

  // add click listener to canvas
  document.getElementById('myCanvas').addEventListener('click', function() {
    // flip flag
    runAnimation.value = !runAnimation.value;

推荐答案

在 JavaScript 中，所有参数都是通过值"传递的.这意味着当传递参数时，会传递存储在变量中的内容的副本.

基元(如布尔值)存储它们所代表的实际数据，因此，当传递一个基元时，会发送数据的副本，从而产生两个副本数据.更改一个，不会影响另一个.

Primitives (like booleans) store the actual data they represent and so, when a primitive is passed, a copy of the data is sent, resulting in two copies of the data. Changes to one, won't affect the other.

但是，当您将对象分配给变量时，该变量存储了可以找到该对象的内存位置，而不是对象本身.将对象作为参数传递会导致传递内存地址的副本.在这些情况下，您可能会得到两个存储相同内存地址的变量，因此无论您使用哪个变量，都会影响同一个底层对象.

But, when you assign an object to a variable, the variable stores the memory location for where that object can be found, not the object itself. Passing an object as an argument results in a copy of the memory address being passed. In these cases, you may wind up with two variables that store the same memory address, so no matter which variable you use, the same one underlying object is affected.

在您的场景中，您当然可以仅使用一个布尔变量使其工作，但似乎本教程希望将其封装到一个对象中，以便布尔数据的副本不会四处飘荡，并且会更少意外改变一个变量而不改变另一个变量的可能性.

In your scenario, you could certainly make it work with just a boolean variable, but it appears that the tutorial wants to encapsulate that into an object so that copies of the boolean data won't be floating around and there will be less chances of accidentally changing one variable but not another.

以下是一些基本示例:

// This function takes a single argument, which it calls "input"
// This argument will be scoped to the function.
function foo(input){
  // The function is going to alter the parameter it received
  input = input + 77;
  console.log(input); 
}

var input = 100;  // Here's a higher scoped variable also called "input"

foo(input);       // We'll pass the higher scoped variable to the function

// Now, has the higher level scoped "input" been changed by the function?
console.log(input);  // 100 <-- No, it hasn't because primitives pass a copy of their data

// ************************************************

// Now, we'll do roughly the same thing, but with objects, not primitives
function foo2(obj){
  obj.someProp = 100;
  console.log(obj.someProp);
}

var obj = {
  someProp : 50
};

foo2(obj);

// Here, we see that the original object has been changed by the funciton we passed it to
console.log(obj.someProp);

相关文章