javascript - 我不明白该程序的工作原理

Question

我正在学习 JavaScript 中的对象，但当通过用户定义的函数定义对象时，我不理解作为属性分配给对象的方法。

这是来自教程 point.com/JavaScript 的代码片段

<script type = "text/javascript">
   function addPrice(amount) {
      with(this){
               price = amount;
          }
      }
   function book(title, author) {
      this.title = title;
      this.author = author;
      this.price = 0;
      this.addPrice = addPrice;  
     }
</script>   
 <script type = "text/javascript">
   var myBook = new book("Perl", "Mohtashim");
   myBook.addPrice(100);         
   document.write("Book title is : " + myBook.title + "<br>");
   document.write("Book author is : " + myBook.author + "<br>");
   document.write("Book price is : " + myBook.price + "<br>");
</script>     

我想知道 this.addPrice = addPrice 是如何工作的以及为什么如果我删除该行则不会显示任何输出？

Answer 1

JS 是非常灵活的语言。在 JS 中是这样的:

var obj = {
  name: "Raju Ritigya",
  sayHi: function() {
    console.log("hello, I'm " + this.name);
  }
};

与此相同:

var obj = {};
obj.name = "Raju Ritigya";
obj.sayHi = function() {
  console.log("hello, I'm " + this.name);
};

基本上，在 JS 中向对象添加属性和方法有两种方法。

话虽如此，您的类(class)正在教您如何在 JS 中编写“类”、构造函数和 this。 IMO 如果你刚刚开始使用 JS，这太复杂了，难以理解。 JS 本身并不支持类，它试图通过原型(prototype)继承来模仿它们。

但无论如何，这是我的 0.02 美元，了解那里发生的事情

在 JS 中，你有基本类型(字符串、数字、 bool 值、符号、null、未定义)，其他所有内容都是对象(是的，数组是对象，函数是对象，对象是一个对象)。

原始值通过值传递，并且它们是不可变的，但是对象通过引用(内存中的点)传递，并且它们是可变的

var foo = {};
var bar = {};
console.log(foo === bar) //false

尽管 foo 和 bar 看起来一样，但它们指向内存中的不同位置，因此对于 JS 来说它们并不相同!

var foo = {};
var bar = foo;
bar.name = "random name";
console.log(foo.name); // "random name"

现在 foo 和 bar 指向相同的引用，并对其中一个引用进行更改会反射(reflect)到另一个引用。

在 JS 中，每个函数都需要返回一些东西。如果您没有在函数中显式放置 return 语句，它将返回 undefined 并且如果您在函数调用前面使用 new 关键字，它将返回一个新对象，该对象将具有该函数作为构造函数。

所以，总而言之，你有一个构造函数(book)，它将返回一个具有 3 个属性(作者、标题、价格)的对象和一个方法(addPrice)。该方法是一个函数(正如我们已经说过的，函数是 JS 中的对象，可以轻松传递)。如果你像这样编写构造函数，结果将完全相同:

function book(title, author) {
  this.title = title;
  this.author = author;
  this.price = 0;
  this.addPrice = function(amount) {
    this.price = amount
  };
}

正如 @deceze 提到的，强烈建议不要使用 with。

通过删除 this.addPrice = addPrice 行，您不会向对象添加方法，但稍后您会尝试在此行上调用它 myBook.addPrice(100) ;

您的代码在该行中断，JS 将不会继续执行程序的其余部分(您可以在开发工具中打开console选项卡并查看那里的错误) .

希望对你有帮助干杯!