有人可以解释一下Object.defineProperty如何在javascript的构造函数中工作

Can someone explain how Object.defineProperty work in constructor function in javascript

本文关键字:defineProperty javascript 工作 构造函数 Object 一下 解释      更新时间:2023-09-26

我创建了一个非常简单的对象 Person 并使用 name 参数调用构造函数,因为我没有在 Person 构造函数中创建任何局部变量,那么name属性是如何设置的。

function Person(name) {
    Object.defineProperty(this, "name", {
        get: function() {
            return name;
        },
        set: function(newName) {
            debugger;
            name = newName;
        },
        enumerable: true,
        configurable: true
    });
    this.sayName = function() {
        console.log(this.name);
    };
}
var p1 = new Person("mike");

如何设置name属性?

我没有在构造函数中创建任何局部变量Person

name 是一个局部变量,由函数的 name 参数声明。此变量用于 .name 属性的 setter 和 getter。

在 JavaScript 中长期保存变量引用有两种主要方式:作为对象属性(myObj = {x: 3},x 是 myObj 的简单属性),以及通过称为"闭包"的 JavaScript 内部系统,该系统接受局部变量并维护它们的引用,只要函数仍然可以访问它们(如您的属性访问器)。

局部变量的示例如下:

function myFunction(localVariable1) {
  var localVariable2 = ...
  ...
}

如果myFunction运行一次并结束,则垃圾回收器在函数完成时会删除localVariable1和localVariable2;它不需要它们。不过,JavaScript 中一个有用的技巧是,如果内部函数需要变量引用,编译器甚至可以在函数内保留变量引用。

function myFunction(localVariable1) {
  document.onload = function() {
    document.write(localVariable1;
  };
}

在这种情况下,它将保留对 localVariable1 的引用,直到文档加载(并且可能之后,因为函数仍然存在)。但是,在您的情况下,它将在对象的整个长度内保留它,以便那些 set 和 get 函数可以对其进行操作。

调用二传手使用 p1.name="test" ;

和吸气 p1.name;

请参阅此示例 示例:自定义设置器和设置器

function Archiver() {
  var temperature = null;
  var archive = [];
  Object.defineProperty(this, 'temperature', {
    get: function() {
      console.log('get!');
      return temperature;
    },
    set: function(value) {
      console.log("set:"+value);
      temperature = value;
      archive.push({ val: temperature });
    }
  });
  this.getArchive = function() { return archive; };
}
var arc = new Archiver();
arc.temperature; // 'get!'
arc.temperature = 11;
arc.temperature = 13;
arc.getArchive(); // [{ val: 11 }, { val: 13 }]

控制台结果

 get!
 set:11
 set:13