Question

基本上代码说明了一切。我有一个变量x，其css属性。我将css的所有x保存到y，然后我更改了y的属性值。这种变化也会影响x，为什么？如何使它只传递值以使x保持不变？

var x = {};
x.css = {height: 100, width: 100};

var y = {};
y.css = x.css;
y.css.height = 200;

console.log(x.css.height); //equals to 200 while it should be 100

Answer 1

您正在创建一个对象，然后将两个不同的变量指向同一个对象。最简单的解释是，您只是给变量x另一个名称/变量访问器。请查看以下示例以了解如何克服此问题，或者您可以创建对象的副本。

解决方案1：使用此技巧克隆对象。

＆＃13;

var x = {};
x.css = {height: 100, width: 100};

var y = JSON.parse(JSON.stringify(x));
y.css.height = 200;

console.log('Y Height:', y.css.height);
console.log('X Height:', x.css.height);

＆＃13;

解决方案2：创建一个拥有它自己的本地属性的新实例

＆＃13;

var elementInstance = function() {
  return {
    css: {
      height: 100,
      width: 100
    }
  }
}

var x = new elementInstance();
var y = new elementInstance();

y.css.height = 200;

console.log(x, y); // They should be different instances

＆＃13;

Answer 2

Javascript分配是通过引用完成的，因此当您修改<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <meta name="description" content="My cool website."> <meta name="author" content="ThisGuy"> <link rel="icon" href="img/quintin.ico"> <title>test test</title>  <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">  <link href="bootstrap-3.3.7-dist/css/ie10-viewport-bug-workaround.css" rel="stylesheet">   <script src="bootstrap-3.3.7-dist/js/ie-emulation-modes-warning.js"></script> <script src="bootstrap-3.3.7-dist/js/carousel.js"></script>    <link href="carousel.css" rel="stylesheet"> </head>  <body> <div class="navbar-wrapper"> <div class="container"> <nav class="navbar navbar-inverse navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> </div> </nav> </div> </div>  <div id="myCarousel" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img class="first-slide" src="img/example1.jpg" alt="First slide"> <div class="container"> <div class="carousel-caption"> <h1>Example headline.</h1> <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> </div> </div> </div> <div class="item"> <img class="second-slide" src="img/example2.jpg" alt="Second slide"> <div class="container"> <div class="carousel-caption"> <h1>Another example headline.</h1> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> </div> </div> </div> <div class="item"> <img class="third-slide" src="img/example3.jpg" alt="Third slide"> <div class="container"> <div class="carousel-caption"> <h1>One more for good measure.</h1> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> </div> </div> </div> </div> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="bootstrap-3.3.7-dist/js/jquery.min.js"><\/script>')</script> <script src="bootstrap-3.3.7-dist/dist/js/bootstrap.min.js"></script>  <script src="bootstrap-3.3.7-dist/js/holder.min.js"></script>  <script src="bootstrap-3.3.7-dist/js/ie10-viewport-bug-workaround.js"></script> </body> </html>时，您的x.css也会被修改。您可以使用Object.assign分配y.css。

＆＃13;

y.css

＆＃13;

更新对象的属性值的行为类似于对另一个对象的属性值的引用

2 个答案: