Javascript class 封装行为

Question

有人可以向我解释这种 javascript 行为吗？我创建了 2 个对象（x、y）并调用 x.m() 修改 x 上的私有变量 b。然后我在 x 和 y 上调用打印方法，它会产生以下输出。如果打印方法 p() 定义为 this 属性 (1) 或原型 (2)，则输出会有所不同。

this.p 定义如预期：2 个对象有两个私有变量，在 x 上修改 b 属性不会影响 y 的 b 属性。但是根据 A.prototype.p 定义，b 属性似乎是对象 x 和 y.

共有的静态变量

代码中描述的行为：

function A() {
  var b = "bbb";

  function f() {
    b = "ccc";
  }

  // 1)
  this.p = function() {
    console.log(b);
  };

  // 2)
  //A.prototype.p = function() {
  //  console.log(b);
  //};

  A.prototype.m = function() {
    f();
  };
}

var x = new A();
var y = new A();

x.m();
x.p();
y.p();

产生：

// 1)
bbbb
ccc

// 2)
//ccc
//ccc

Answer 1

在您的示例中，您在 A 的构造函数中覆盖原型方法 p（以及 m），这意味着每次创建实例时原型方法会改变。 A 的所有实例将使用相同的方法，这是最后创建的实例之一。

查看此示例，它应该显示您期望的代码行为：

function A() {
  this.b = "bbb";
}

A.prototype.p = function() {
  console.log(this.b);
};

A.prototype.m = function() {
  this.b = "ccc";
};


var x = new A(),
  y = new A();

x.m();
x.p();
y.p();

Javascript class 封装行为

Javascript class encapsulation behaviour

javascript

encapsulation