在嵌套的Prototype子对象中使用'this' [英] Using 'this' within nested Prototype sub-objects

问题描述

我有一个类，并为其原型提供了几个子对象以方便命名空间。这些子对象有方法。我无法弄清楚如何在这些方法中使用这个来访问使用构造函数设置的属性。

我有一种感觉 bind ，致电，申请是以某种方式参与，但我很难理解那些做什么，以及所有这些OOP-ness如何工作。有很多资源，但它们都是太低级别，或者高级别我不理解它们。谢谢！

  function Object（
 argument1，
 argument2 
）{
 this.property1 = argument1; 
 this.property2 = argument2; 
} 
 
 Object.prototype = {
 subObject1：{
 method1：function（）{
 return this.property1; 
} 
}，
 subObject2：{
 method1：function（）{
 return this.property2; 
} 
} 
} 
 
 var foo = new Object（11,22）; 
 var bar = new Object（33,44）; 
 
 console.log（foo.subObject1.method1（））; //我希望这返回11 
 console.log（foo.subObject2.method1（））; //我希望这返回22 
 
 console.log（bar.subObject1.method1（））; //我想要这个返回33 
 console.log（bar.subObject2.method1（））; //我希望这回复44 
  

解决方案

每当你在栏内打了 foo.bar（），这个形式的电话将引用 foo 。 除非您使用 .bind 将该函数绑定到特定值，或使用ES6中的新箭头函数。

因此，一种解决方案可能是将方法绑定到特定实例。但是，在调用构造函数之前，实例不存在。这意味着你必须在构造函数中创建 subObjectX ：

  function MyObject （argument1，argument2）{
 this.property1 = argument1; 
 this.property2 = argument2; 
 
 this.subObject1 = {
 method1：function（）{
 return this.property1; 
} .bind（this）
}; 
 
 this.subObject2 = {
 method1：function（）{
 return this.property2; 
} .bind（this）
}; 
} 
  

或使用新的ES6箭头功能;这些来自创建它们的上下文（与普通函数不同）：

  //仅限ES6！ 
函数MyObject（argument1，argument2）{
 this.property1 = argument1; 
 this.property2 = argument2; 
 
 this.subObject1 = {
 method1 :(）=> {
返回this.property1; 
} 
}; 
 
 this.subObject2 = {
 method1 :(）=> {
返回this.property2; 
} 
}; 
} 
  

这意味着每个实例都有自己的子对象副本。 / p>

如果你想在原型上定义方法，你总是必须通过 .call 传递接收器或者 .apply ：

  foo.subObject1.method1.call（foo） ; 
  

在这种情况下根本没有将它分配给原型的好处，你可以有一个接受对象的简单函数（ method1（foo））。

I have a class, and have given its prototype several sub-objects to facilitate namespacing. These sub-objects have methods. I can't figure out how to use this inside those methods to access the properties set with the constructor.

I have a feeling bind, call, and apply are involved somehow, but I'm having a good deal of trouble understanding what those do, and how all this OOP-ness works in general. There are plenty of resources, but they're all either too low-level, or so high-level I don't understand them. Thank you!

function Object(
    argument1,
    argument2
){
    this.property1  = argument1;
    this.property2  = argument2;
}

Object.prototype    = {
    subObject1  : {
        method1 : function(){
            return this.property1;
        }
    },
    subObject2  : {
        method1 : function(){
            return this.property2;
        }
    }
}

var foo = new Object(11, 22);
var bar = new Object(33, 44);

console.log(foo.subObject1.method1()); //I'd like this to return 11
console.log(foo.subObject2.method1()); //I'd like this to return 22

console.log(bar.subObject1.method1()); //I'd like this to return 33
console.log(bar.subObject2.method1()); //I'd like this to return 44

解决方案

Whenever you have a call of the form foo.bar(), this inside bar will refer to foo. Unless you bind the the function to a specific value with .bind, or use the new "arrow" functions in ES6.

So one solution could be to bind the methods to the specific instance. However, the instance doesn't exist until you call the constructor function. That means you have to create subObjectX inside the constructor:

function MyObject(argument1, argument2) {
    this.property1  = argument1;
    this.property2  = argument2;

    this.subObject1 = {
        method1: function(){
             return this.property1;
        }.bind(this)
    };

    this.subObject2 = {
        method1: function(){
            return this.property2;
        }.bind(this)
    };
}

Or using the new ES6 arrow functions; these take this from the context in which they're created (unlike normal functions):

// ES6 only!
function MyObject(argument1, argument2) {
    this.property1  = argument1;
    this.property2  = argument2;

    this.subObject1 = {
        method1: () => {
             return this.property1;
        }
    };

    this.subObject2 = {
        method1: () => {
            return this.property2;
        }
    };
}

That means that every instance has it's own copy of the sub-object.

If you want to define the methods on the prototype though, you always have to pass the receiver via .call or .apply:

foo.subObject1.method1.call(foo);

in which case there is not much benefit of assigning it to the prototype at all, and you could just have a simple function that accept the object (method1(foo)).

这篇关于在嵌套的Prototype子对象中使用'this'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！