如何使用 this 关键字从对象嵌套函数访问对象？

Question

我有这个对象：

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

Answer 1

只需使用变量名称，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,
            },
        ]   
    },

阅读This and This

What is this?
In JavaScript, the this keyword refers to an object.

Which object depends on how this is being invoked (used or called).

The this keyword refers to different objects depending on how it is used:

In an object method, this refers to the object.
Alone, this refers to the global object.
In a function, this refers to the global object.
In a function, in strict mode, this is undefined.
In an event, this refers to the element that received the event.
Methods like call(), apply(), and bind() can refer this to any object.

Answer 2

您可以通过将整个对象分配到其中的变量名来访问它。

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 中的对象，而不是整个对象。

Answer 3

如果您有多个项目，并且希望所有这些项目都可以访问根目录，您可以绑定该函数。您需要在此处使用 none 箭头函数，因为它们没有 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);

如何使用 this 关键字从对象嵌套函数访问对象？

How to access an object from an object nested function with this keyword?

javascript

object

this