如何在此代码中访问名称

Question

var hello = {
    name: "Vishal",
    speak: function(to){ 
        return function (){ 
            console.log(this.name+" says hello "+to);
        }();
    }
}

I call this function as -

hello.speak("Vinay");

Actual Output is

says hello to Vinay

Expected output is

Vishal says hello to Vinay

I know hello.name will resolve this but how to resolve it using this so that using call method or apply or bind method this could be resolved.

Answer 1

hello is accessible inside itself.

 var hello = { name: "Vishal", speak: function(to){ console.log(hello.name + " says hello " + to); } } hello.speak("Vinay"); 

Answer 2

What is happening in your code:

You have binded a function with an object hello which in turn returns another function that outputs something. The outer function speak acts as a closure to the inner function. Here javascript behaves a little differently because of the way it compiles the code. The inner function will not recognise the this variable and rather pick the global this.name .

To resolve the issue you will have to do this:

var hello = {
    name: "Vishal",
    speak: function(to){ 

   //we tell this closure that this is to be taken from function scope and no the global scope
       var self = this; 
        return function (){ 
            console.log(self.name+" says hello "+to);
        }();
    }
}

hello.speak("Vinay");

Understanding use case bind

Bind:

Creates copy of the function with which bind is called. You can then pass on the object or the scope which you want to be associated with the this keyword.

Example:

var hello = {
    name: "Vishal",
    speak: function(to){
        return function (){ 
            console.log(this.name+" says hello "+to);
        };
    }
}

var speakTo = hello.speak("Vinay");


var speakToCall = speakTo.bind(hello); //will give you the desired output.

speakToCall();

Now, this is not the real use case of bind, call or apply. It was just to show you how your functionality can be achieved using bind.

Real use case can be something like this:

Use Case:

When you have multiple objects like:

var a = {
    firstname: "rahul",
    lastname: "arora",
    getFullName: function(){
        return this.firstname + ' ' +  this.lastname;
    }
}

//Another object with same properties but without the function
var b = {
    firstname: "Micheal",
    lastname: "Angelo",
}

//Rather than defining that function again in the object 'b' you can use bind, call or apply to get the desired output.

console.log(a.getFullName.call(b)); // will output Micheal Angelo which is associated to b

I hope it helps.

Answer 3

When you do hello.speak , the this will be become the hello object. Hence this.name is already Vishal .

var hello = {
    name: "Vishal",
    speak: function(to){console.log(this.name + " says hello " + to)}
    }
}


hello.speak("Vinay");

If you really want to do it the way you asked in the question you can do this:

var hello = {
    name: "Vishal",
    speak: function(to){ 
        var self = this;
        return function(self){
            console.log(self.name + " says hello to " + to);
        }(self);
    }   
}

You can also skip passing self because lexical scoping allows you access to that.

But picture what you are doing. You have an Object hello which has a name and a speak method. speak already has access to hello when you invoke it as hello.speak via the this magic variable. So whatever you want to do can be done there.

You are again creating a function whose duty is to just access hello.name and the variable supplied as argument which can already be done by speak but it is simply an overhead.

To me its a bit like:

a = function(){(function(){console.log("Hi")})()}

when

a=function(){console.log("Hi")}

would suffice.

Wherever possible make the code simple, precise and to the point. Complicated codes are not better, but its actually the opposite. Again I am not sure what you are doing, however this is a general principle.

Answer 4

Since in this case the variable 'name' is constant i think you can use a direct approach and do:

var hello = {
name: "Vishal",
speak: function(to){ 
    return function (){ 
        console.log(hello.name+" says hello "+to);
        }();
    }
}

Or you can ditch the return function and do it directly using 'this'

var hello = {
name: "Vishal",
speak: function(to){ 
       console.log(this.name+" says hello "+to); 
    }
}

Hope it satisfies as your answer