Truy cập cháu của biến (parent.child.grandchild) không có dấu chấm và một cặp ngoặc vuông

Question

Tôi đang tạo lớp liên quan đến canvas với một loại bảng chuyển đổi. Bảng chuyển đổi có thể được người dùng chỉnh sửa. (Không phải là thực sự có liên quan, nhưng có lẽ bạn muốn biết tại sao):

cLayout = function(option) { 
    //obtaining the canvas (el) here 
    this.setup = function(option) { 
     t=this.table; 
     for (var p in t) 
     { 
      el[t[p][0]] = option[p]||t[p][1] 
     } 
    } 
    this.setup(option) 
} 

cLayout.prototype.table = { 
    width:[['style']['width'],"100%"], 
    height:['style'['height'],"100%"], 
    bg:[['style']['backgroundColor'],""], 
    position:[['style']['position'],"absolute"], 
    left:['style'['left'],"0px"], 
    top:['style'['left'],"0px"] 
} 

Ví dụ:

var b = new cLayout({left:'10%',width:'90%'}) 

---

Bất câu hỏi:

Thông thường, tôi muốn sử dụng el['style']['width'] để đặt el.style.width. Nhưng tôi muốn sử dụng el[something] mà không có cặp ngoặc vuông thứ hai: Tôi muốn tên thuộc tính hoàn toàn biến (tôi cũng muốn có thể đặt el['innerHTML']). Vì vậy, có cách nào để có được một đứa cháu bằng cách sử dụng a[b], mà không cần sử dụng a[b][c]?

P.S. Tất nhiên, tôi không muốn sử dụng eval.

Answer 1

Không thể thực hiện được. Nếu bạn có các đối tượng lồng nhau, bạn không thể bỏ qua một cấp độ.

Bạn có thể viết một hàm helper mặc dù, trong đó có một chuỗi như "child.grandchild" và thiết lập thuộc tính tương ứng: (. Bạn cũng nên kiểm tra xem một tài sản nhất định có sẵn)

function setProp(obj, prop, val) { 
    var parts = prop.split('.'); 
    while(parts.length > 1) { 
     obj = obj[parts.shift()]; 
    } 
    obj[parts.shift()] = val; 
} 

Sau đó bạn mã có thể trông giống như:

var cLayout = function(option) { 
    //obtaining the canvas (el) here 
    this.setup = function(option) { 
     for(var p in this.table) { 
      setProp(el, this.table[p][0], option[p]||t[p][1]); 
     } 
    } 
    this.setup(option) 
} 

cLayout.prototype.table = { 
    width:['style.width',"100%"], 
    height:['style.height',"100%"], 
    //... 
}