使用this關鍵字從物件嵌套函式訪問物件

我有這個物件：

popup_data = {
    club: {
        type: 'club',
        type_img: {
            header: 'CLUB HEADER',
            img: 'https://source.unsplash.com/random/800x600',
            sub_header: 'CLUB SUB HEADER',
            content: 'TEXT',
            hotspot_position: [5, -1.5, 2.5]
        },
        hotspots_array: [
            {   id: () => this.club.type   '-'   'type_img',
                position: () => this.club.type_img.hotspot_position,
            },
        ]   
    },

如何獲取type和type_img.hotspot_position從這些嵌套函式

uj5u.com熱心網友回復：

只需使用 var 名稱，popup_data

popup_data = {
    club: {
        type: 'club',
        type_img: {
            header: 'CLUB HEADER',
            img: 'https://source.unsplash.com/random/800x600',
            sub_header: 'CLUB SUB HEADER',
            content: 'TEXT',
            hotspot_position: [5, -1.5, 2.5]
        },
        hotspots_array: [
            {   id: () => popup_data.club.type   '-'   'type_img',
                position: () => popup_data.club.type_img.hotspot_position,
            },
        ]   
    },

讀這個和這個

這是什么？
在 JavaScript 中，this關鍵字指的是一個物件。

哪個物件取決于this呼叫（使用或呼叫）的方式。

this關鍵字根據其使用方式指代不同的物件：

在物件方法中，this指的是物件。
單獨，this指的是全域物件。
在函式中，this指的是全域物件。
在嚴格模式下的函式中，this是undefined。
在一個事件中，this指的是接收到該事件的元素。
像call()、、apply()和這樣的方法bind()可以參考任何物件。this

uj5u.com熱心網友回復：

您可以通過分配整個物件的變數名來訪問它。

popup_data = {
    club: {
        type: 'club',
        type_img: {
            header: 'CLUB HEADER',
            img: 'https://source.unsplash.com/random/800x600',
            sub_header: 'CLUB SUB HEADER',
            content: 'TEXT',
            hotspot_position: [5, -1.5, 2.5]
        },
        hotspots_array: [
            {   id: () => popup_data.club.type   '-'   'type_img',
                position: () => popup_data.club.type_img.hotspot_position,
            },
        ]   
    },

由于您使用的是 ES6 箭頭功能，this因此根本不起作用。如果你使用普通函式，this將是里面的物件hotspots_array，而不是整個物件。

uj5u.com熱心網友回復：

如果您有多個專案，并且希望所有這些專案都可以訪問根目錄，則可以系結該函式。您將需要在此處使用無箭頭函式，因為它們沒有this..

你甚至可以從物件中提取你的id和position函式，這樣你就不會創建完全相同的函式的多個實體。

例如..

function id() {
  return this.club.type   '-'   'type_img';
}

function position() {
  return this.club.type_img.hotspot_position;
}


const popup_data = {
  club: {
    type: 'club',
    type_img: {
       header: 'CLUB HEADER',
       img: 'https://source.unsplash.com/random/800x600',
       sub_header: 'CLUB SUB HEADER',
       content: 'TEXT',
       hotspot_position: [5, -1.5, 2.5]
    },
    hotspots_array: [
       {   
         name: 'test',
         id, position
       }, {
         name: 'test2',
         id, position
       }
    ]   
   }  
};

const popup_data_2 = {
  club: {
    type: 'this is club 2',
    type_img: {
       hotspot_position: [5, -1.5, 2.5]
    },
    hotspots_array: [
       {   
         id, position
       }
    ]   
   }  
};
 
function bindFunctions(r, a) {
  Object.entries(a).map(([k, v]) => {
    const tp = typeof v;
    if (tp === 'function') {
       a[k] = v.bind(r);
    } else if (tp === 'object') {
       bindFunctions(r, v);
    }
  });
}
 
 bindFunctions(popup_data, popup_data);
 bindFunctions(popup_data_2, popup_data_2);
 
 console.log(popup_data.club.hotspots_array[0].id());
 console.log(popup_data.club.hotspots_array[0].position());
 console.log(popup_data_2.club.hotspots_array[0].id());

另一種選擇，具有單個根專案可能會受到限制。如果您想要更花哨的東西，我會使用函式創建您的物件并使用閉包的力量。下面的示例我添加了另一個道具，然后可以訪問它的陣列。

function makeObject(data) {
    const root = data;
    for (const h of data.club.hotspots_array) {
       //now lets add our functions
       h.id = () => root.club.type   '-'   'type_img';
       h.position = () => root.club.type_img.hotspot_position;
       h.array = data.club.hotspots_array;
    }
    return root;
 }
 
 const o1 = makeObject({
 club: {
    type: 'club',
    type_img: {
       header: 'CLUB HEADER',
       img: 'https://source.unsplash.com/random/800x600',
       sub_header: 'CLUB SUB HEADER',
       content: 'TEXT',
       hotspot_position: [5, -1.5, 2.5]
    },
    hotspots_array: [
       {   
         name: 'test',
       }, {
         name: 'test2',
       }
    ]   
   }
 });
 
 console.log(o1.club.hotspots_array[0].id());
 console.log(o1.club.hotspots_array[0].position());
 console.log('array:'   o1.club.hotspots_array[0].array.length);

標籤：javascript 目的 这

上一篇：在React中更新物件狀態的特定欄位

下一篇：查找陣列內2個值之間的差異