Tự tham khảo trong các đối tượng bằng chữ / khởi tạo

Có cách nào để có được thứ gì đó như sau để hoạt động trong JavaScript không?

var foo = {
    a: 5,
    b: 6,
    c: this.a + this.b  // Doesn't work
};

Ở dạng hiện tại, mã này rõ ràng đưa ra lỗi tham chiếu do thiskhông tham chiếu foo. Nhưng là có cách nào để có giá trị trong thuộc tính một đối tượng theo nghĩa đen của phụ thuộc vào các tài sản khác đã tuyên bố trước đó?

Chà, điều duy nhất tôi có thể nói với bạn là getter :

var foo = {
  a: 5,
  b: 6,
  get c() {
    return this.a + this.b;
  }
}

console.log(foo.c) // 11

Đây là một phần mở rộng cú pháp được giới thiệu bởi Đặc tả phiên bản thứ 5 của ECMAScript, cú pháp được hỗ trợ bởi hầu hết các trình duyệt hiện đại (bao gồm IE9).

Bạn có thể làm một cái gì đó như:

var foo = {
   a: 5,
   b: 6,
   init: function() {
       this.c = this.a + this.b;
       return this;
   }
}.init();

Đây sẽ là một số loại khởi tạo một lần của đối tượng.

Lưu ý rằng bạn thực sự đang gán giá trị trả về init()cho foo, do đó bạn phải return this.

Câu trả lời rõ ràng, đơn giản là thiếu, vì vậy cho đầy đủ:

Nhưng là có cách nào để có giá trị trong thuộc tính một đối tượng theo nghĩa đen của phụ thuộc vào các tài sản khác đã tuyên bố trước đó?

Không. Tất cả các giải pháp ở đây trì hoãn nó cho đến khi đối tượng được tạo (theo nhiều cách khác nhau) và sau đó gán thuộc tính thứ ba. Cách đơn giản nhất là chỉ cần làm điều này:

var foo = {
    a: 5,
    b: 6
};
foo.c = foo.a + foo.b;

Tất cả những người khác chỉ là những cách gián tiếp hơn để làm điều tương tự. (Felix là đặc biệt thông minh, nhưng đòi hỏi phải tạo ra và phá hủy một chức năng tạm thời, thêm phức tạp, và một trong hai lá một tài sản thêm về đối tượng hoặc [nếu bạn deletesở hữu mà] tác động hiệu suất của tài sản sau đó truy cập vào đối tượng đó.)

Nếu bạn cần tất cả trong một biểu thức, bạn có thể làm điều đó mà không cần thuộc tính tạm thời:

var foo = function(o) {
    o.c = o.a + o.b;
    return o;
}({a: 5, b: 6});

Hoặc tất nhiên, nếu bạn cần làm điều này nhiều lần:

function buildFoo(a, b) {
    var o = {a: a, b: b};
    o.c = o.a + o.b;
    return o;
}

Sau đó, nơi bạn cần sử dụng nó:

var foo = buildFoo(5, 6);

Đơn giản chỉ cần khởi tạo một chức năng ẩn danh:

var foo = new function () {
    this.a = 5;
    this.b = 6;
    this.c = this.a + this.b;
};

Bây giờ trong ES6, bạn có thể tạo các thuộc tính lưu trữ lười biếng. Lần đầu tiên sử dụng thuộc tính đánh giá một lần để trở thành một thuộc tính tĩnh bình thường. Kết quả: Lần thứ hai chức năng toán học bị bỏ qua.

Phép thuật là trong getter.

const foo = {
    a: 5,
    b: 6,
    get c() {
        delete this.c;
        return this.c = this.a + this.b
    }
};

Trong mũi tên getter thischọn phạm vi từ vựng xung quanh .

foo     // {a: 5, b: 6}
foo.c   // 11
foo     // {a: 5, b: 6 , c: 11}  

Một số đóng cửa nên đối phó với điều này;

var foo = function() {
    var a = 5;
    var b = 6;
    var c = a + b;

    return {
        a: a,
        b: b,
        c: c
    }
}();

Tất cả các biến được khai báo bên trong foolà riêng tư foo, như bạn mong đợi với bất kỳ khai báo hàm nào và vì tất cả chúng đều nằm trong phạm vi, tất cả chúng đều có quyền truy cập lẫn nhau mà không cần tham chiếu this, giống như bạn mong đợi với hàm. Sự khác biệt là hàm này trả về một đối tượng phơi bày các biến riêng và gán đối tượng đó cho foo. Cuối cùng, bạn chỉ trả lại giao diện mà bạn muốn hiển thị dưới dạng một đối tượng với return {}câu lệnh.

Sau đó, hàm được thực thi ở cuối cùng, ()điều này làm cho toàn bộ đối tượng foo được ước tính, tất cả các biến trong khởi tạo và đối tượng trả về được thêm làm thuộc tính của foo().

Bạn có thể làm như thế này

var a, b
var foo = {
    a: a = 5,
    b: b = 6,
    c: a + b
}

Phương pháp đó đã được chứng minh là hữu ích với tôi khi tôi phải tham chiếu đến đối tượng mà một hàm ban đầu được khai báo. Sau đây là một ví dụ tối thiểu về cách tôi sử dụng nó:

function createMyObject() {
    var count = 0, self
    return {
        a: self = {
            log: function() {
                console.log(count++)
                return self
            }
        }
    }
}

Bằng cách xác định self là đối tượng chứa hàm in, bạn cho phép hàm tham chiếu đến đối tượng đó. Điều này có nghĩa là bạn sẽ không phải 'liên kết' chức năng in với một đối tượng nếu bạn cần chuyển nó sang một nơi khác.

Nếu bạn muốn, thay vào đó, sử dụng thisnhư minh họa dưới đây

function createMyObject() {
    var count = 0
    return {
        a: {
            log: function() {
                console.log(count++)
                return this
            }
        }
    }
}

Sau đó, đoạn mã sau sẽ đăng nhập 0, 1, 2 và sau đó báo lỗi

var o = createMyObject()
var log = o.a.log
o.a.log().log() // this refers to the o.a object so the chaining works
log().log() // this refers to the window object so the chaining fails!

Bằng cách sử dụng phương thức tự bạn đảm bảo rằng bản in sẽ luôn trả về cùng một đối tượng bất kể bối cảnh mà hàm được chạy. Đoạn mã trên sẽ chạy tốt và đăng nhập 0, 1, 2 và 3 khi sử dụng phiên bản tự của createMyObject().

Để hoàn thành, trong ES6, chúng tôi đã có các lớp (được hỗ trợ tại thời điểm viết bài này chỉ bởi các trình duyệt mới nhất, nhưng có sẵn trong Babel, TypeScript và các bộ chuyển đổi khác)

class Foo {
  constructor(){
    this.a = 5;
    this.b = 6;
    this.c = this.a + this.b;
  }  
}

const foo = new Foo();

Bạn có thể làm điều đó bằng cách sử dụng mô hình mô-đun. Giống như:

var foo = function() {
  var that = {};

  that.a = 7;
  that.b = 6;

  that.c = function() {
    return that.a + that.b;
  }

  return that;
};
var fooObject = foo();
fooObject.c(); //13

Với mẫu này, bạn có thể khởi tạo một số đối tượng foo theo nhu cầu của bạn.

http://jsfiddle.net/jPNxY/1/

Có một số cách để thực hiện điều này; đây là những gì tôi sẽ sử dụng:

function Obj() {
 this.a = 5;
 this.b = this.a + 1;
 // return this; // commented out because this happens automatically
}

var o = new Obj();
o.b; // === 6

chỉ vì mục đích tư duy - đặt các thuộc tính của đối tượng ra khỏi dòng thời gian:

var foo = {
    a: function(){return 5}(),
    b: function(){return 6}(),
    c: function(){return this.a + this.b}
}

console.log(foo.c())

có câu trả lời tốt hơn ở trên quá . Đây là cách tôi sửa đổi mã ví dụ mà bạn đã hỏi.

CẬP NHẬT:

var foo = {
    get a(){return 5},
    get b(){return 6},
    get c(){return this.a + this.b}
}
// console.log(foo.c);

Tạo chức năng mới trên đối tượng của bạn theo nghĩa đen và gọi một nhà xây dựng dường như là một sự khởi đầu triệt để khỏi vấn đề ban đầu, và nó không cần thiết.

Bạn không thể tham chiếu một thuộc tính anh chị em trong quá trình khởi tạo đối tượng theo nghĩa đen.

var x = { a: 1, b: 2, c: a + b } // not defined 
var y = { a: 1, b: 2, c: y.a + y.b } // not defined 

Giải pháp đơn giản nhất cho các thuộc tính được tính toán sau (không heap, không có hàm, không có hàm tạo):

var x = { a: 1, b: 2 };

x.c = x.a + x.b; // apply computed property

Các câu trả lời khác được đăng ở đây tốt hơn nhưng đây là một giải pháp thay thế:

• Đặt giá trị lúc khởi tạo (không phải là getter, hoặc dẫn xuất, v.v.)
• Không yêu cầu bất kỳ loại init()hoặc mã bên ngoài của đối tượng bằng chữ
• Là một đối tượng theo nghĩa đen và không phải là một chức năng nhà máy hoặc cơ chế tạo đối tượng khác.
• Không nên có bất kỳ tác động hiệu suất nào (ngoại trừ lúc khởi tạo)

Tự thực hiện các chức năng ẩn danh và lưu trữ cửa sổ

var foo = {
    bar:(function(){
        window.temp = "qwert";
        return window.temp;
    })(),
    baz: window.temp
};

Đơn hàng được đảm bảo ( bartrước baz).

Nó gây ô nhiễm windowtất nhiên, nhưng tôi không thể tưởng tượng ai đó đang viết một kịch bản đòi hỏi window.tempphải kiên trì. Có lẽ tempMyAppnếu bạn bị hoang tưởng.

Nó cũng xấu nhưng đôi khi hữu ích. Một ví dụ là khi bạn đang sử dụng API với các điều kiện khởi tạo cứng nhắc và không cảm thấy muốn tái cấu trúc nên phạm vi là chính xác.

Và nó khô, tất nhiên.

Chìa khóa cho tất cả điều này là PHẠM VI .

Bạn cần gói gọn "cha mẹ" (đối tượng cha) của thuộc tính bạn muốn xác định là đối tượng khởi tạo của chính nó và sau đó bạn có thể tạo tham chiếu đến các thuộc tính anh chị em bằng từ khóa this

Điều rất quan trọng cần nhớ là nếu bạn tham khảo thismà không thực hiện trước, thì thissẽ đề cập đến phạm vi bên ngoài ... đó sẽ là windowđối tượng.

var x = 9   //this is really window.x
var bar = {
  x: 1,
  y: 2,
  foo: new function(){
    this.a = 5, //assign value
    this.b = 6,
    this.c = this.a + this.b;  // 11
  },
  z: this.x   // 9 (not 1 as you might expect, b/c *this* refers `window` object)
};

nếu đối tượng của bạn được viết dưới dạng hàm trả về một đối tượng, VÀ bạn sử dụng 'phương thức' thuộc tính đối tượng ES6, thì có thể:

const module = (state) => ({
  a: 1,
  oneThing() {
    state.b = state.b + this.a
  },
  anotherThing() {
    this.oneThing();
    state.c = state.b + this.a
  },
});

const store = {b: 10};
const root = module(store);

root.oneThing();
console.log(store);

root.anotherThing();
console.log(store);

console.log(root, Object.keys(root), root.prototype);

Tôi sử dụng mã sau đây để thay thế, và nó hoạt động. Và biến có thể là mảng quá. (@ Fausto R.)

var foo = {
  a: 5,
  b: 6,
  c: function() {
    return this.a + this.b;
  },

  d: [10,20,30],
  e: function(x) {
    this.d.push(x);
    return this.d;
  }
};
foo.c(); // 11
foo.e(40); // foo.d = [10,20,30,40]

Đây là một cách ES6 gọn gàng:

var foo = (o => ({
    ...o,
    c: o.a + o.b
  }))({
    a: 5,
    b: 6
  });
  
console.log(foo);

Tôi sử dụng nó để làm một cái gì đó như thế này:

const constants = Object.freeze(
  (_ => ({
    ..._,
    flag_data: {
      [_.a_flag]: 'foo',
      [_.b_flag]: 'bar',
      [_.c_flag]: 'oof'
    }
  }))({
    a_flag: 5,
    b_flag: 6,
    c_flag: 7,
  })
);

console.log(constants.flag_data[constants.b_flag]);

Làm thế nào về giải pháp này, nó sẽ làm việc với các đối tượng lồng nhau với mảng

      Object.prototype.assignOwnProVal
     = function (to,from){ 
            function compose(obj,string){ 
                var parts = string.split('.'); 
                var newObj = obj[parts[0]]; 
                if(parts[1]){ 
                    parts.splice(0,1);
                    var newString = parts.join('.'); 
                    return compose(newObj,newString); 
                } 
                return newObj; 
            } 
            this[to] = compose(this,from);
     } 
     var obj = { name : 'Gaurav', temp : 
                  {id : [10,20], city:
                        {street:'Brunswick'}} } 
     obj.assignOwnProVal('street','temp.city.street'); 
     obj.assignOwnProVal('myid','temp.id.1');

Ném vào một tùy chọn vì tôi không thấy kịch bản chính xác này được bảo hiểm. Nếu bạn không muốn ccập nhật khi ahoặc bcập nhật, thì ES6 IIFE hoạt động tốt.

var foo = ((a,b) => ({
    a,
    b,
    c: a + b
}))(a,b);

Đối với nhu cầu của tôi, tôi có một đối tượng liên quan đến một mảng sẽ được sử dụng trong một vòng lặp, vì vậy tôi chỉ muốn tính toán một số thiết lập phổ biến một lần, vì vậy đây là những gì tôi có:

  let processingState = ((indexOfSelectedTier) => ({
      selectedTier,
      indexOfSelectedTier,
      hasUpperTierSelection: tiers.slice(0,indexOfSelectedTier)
                             .some(t => pendingSelectedFiltersState[t.name]),
  }))(tiers.indexOf(selectedTier));

Vì tôi cần đặt thuộc tính cho indexOfSelectedTiervà tôi cần sử dụng giá trị đó khi đặt thuộc hasUpperTierSelectiontính, tôi tính toán giá trị đó trước và chuyển nó thành thông số cho IIFE

Cách tiếp cận khác sẽ là khai báo đối tượng trước khi gán thuộc tính cho nó:

const foo = {};
foo.a = 5;
foo.b = 6;
foo.c = foo.a + foo.b;  // Does work
foo.getSum = () => foo.a + foo.b + foo.c;  // foo.getSum() === 22

Cùng với đó, bạn có thể sử dụng tên biến đối tượng để truy cập các giá trị đã gán.
Tốt nhất cho config.jstập tin.

var x = {
    a: (window.secreta = 5),
    b: (window.secretb = 6),
    c: window.secreta + window.secretb
};

Điều này gần giống với câu trả lời của @ sledtoad, nhưng không sử dụng chức năng.

Lưu ý: Giải pháp này sử dụng Bản in (bạn có thể sử dụng vanilla JS mà TS biên dịch nếu cần)

class asd {
    def = new class {
        ads= 'asd';
        qwe= this.ads + '123';
    };

    // this method is just to check/test this solution 
    check(){
        console.log(this.def.qwe);
    }
}

// these two lines are just to check
let instance = new asd();
instance.check();

Ở đây đã sử dụng các biểu thức lớp để có được giao diện nghĩa đen của đối tượng lồng nhau mà chúng ta muốn. Đây là điều tốt nhất tiếp theo IMHO để có thể tham chiếu các thuộc tính của một đối tượng trong quá trình tạo.

Điều chính cần lưu ý là trong khi sử dụng giải pháp này, bạn có giao diện chính xác giống như bạn đã có từ một đối tượng theo nghĩa đen. Và cú pháp khá gần với chính đối tượng (so với sử dụng hàm, v.v.).

So sánh như sau

Giải pháp tôi đã đề xuất

class asd {
    def = new class {
        ads= 'asd';
        qwe= this.ads + '123';
    };

Giải pháp nếu đối tượng bằng chữ sẽ có hiệu lực

var asd = {
    def : {
        ads:'asd',
        qwe: this.ads + '123';, //ILLEGAL CODE; just to show ideal scenario
    }
}

Một vi dụ khac

Ở đây trong lớp này, bạn có thể kết hợp nhiều đường dẫn tương đối với nhau, điều này là không thể với một đối tượng theo nghĩa đen.

class CONSTANT {
    static readonly PATH = new class {
        /** private visibility because these relative paths don't make sense for direct access, they're only useful to path class
         *
         */
        private readonly RELATIVE = new class {
            readonly AFTER_EFFECTS_TEMPLATE_BINARY_VERSION: fs.PathLike = '\\assets\\aep-template\\src\\video-template.aep';
            readonly AFTER_EFFECTS_TEMPLATE_XML_VERSION: fs.PathLike = '\\assets\\aep-template\\intermediates\\video-template.aepx';
            readonly RELATIVE_PATH_TO_AFTER_EFFECTS: fs.PathLike = '\\Adobe\\Adobe After Effects CC 2018\\Support Files\\AfterFX.exe';
            readonly OUTPUT_DIRECTORY_NAME: fs.PathLike = '\\output';
            readonly INPUT_DIRECTORY_NAME: fs.PathLike = '\\input';
            readonly ASSETS_DIRECTORY_NAME: fs.PathLike = '\\assets';
        };
    }
}

Nếu bạn muốn sử dụng JS gốc, các câu trả lời khác cung cấp các giải pháp tốt.

Nhưng nếu bạn sẵn sàng viết các đối tượng tự tham chiếu như:

{ 
  a: ...,
  b: "${this.a + this.a}",
}

Tôi đã viết một thư viện npm được gọi là đối tượng tự tham chiếu hỗ trợ cú pháp đó và trả về một đối tượng gốc.