I have been using the this keyword for quite a while now but it has raised my curiousness to know much about it. I did a research and I came across a lengthy lessons and examples on the W3school site (https://www.w3schools.com/js/js_this.asp). Methods like call(), apply(), and bind() can refers the this keyword to any object. I declared few objects and called the call() and apply() methods on them, and I got exactly the output I was expecting to see in the console. In the below exercise, I declared two different objects with the first object(studentOne) containing a function. Using the bind() method; I have tried to borrow a method from the first Object(studentOne), in order to use it in the second object(studentTwo) and get the student full Name printed out in the console, but I keeps getting [Function: bound fullName] and undefined(when JSON.stringify() is apply). Can some please explain this behavior properly for me?
const studentOne = {
givenName: 'Wolubah',
nickName: 'Gissi King',
familyName: 'Timibah',
sex: 'Male',
age: 45,
fullName: function() {
return this.givenName + ' ' + this.nickName + ' ' + this.familyName;
}
};
const studentTwo = {
givenName: 'Weddor',
nickName: 'Sugar',
familyName: 'Tamba',
sex: 'Female',
age: 34
};
const bindName = studentOne.fullName.bind(studentTwo);
console.log(bindName);//[Function: bound fullName]
console.log(JSON.stringify(bindName));//undefined
//call() method on object
const objOne = {
thisPerson: function() {
return this.givenName + ' ' + this.middleName + ' ' + this.familyName;
}
};
const objTwo = {
givenName: 'Hawalyn',
middleName: 'Kamaralyn',
familyName: 'Kamara',
sex: 'Female',
age: 7
};
const childName = JSON.stringify(objOne.thisPerson.call(objTwo));
console.log(childName);// "Hawalyn Kamaralyn Kamara"
When you bind() a function, you are creating a new function object that will call the bound function with this set as the object that was passed to bind().
This is useful because, passing around functions (as first-class objects) has a potentially confusing behaviour. Especially when compared to other programming languages that have first-class functions. Basically, this is set to context that the function was called from. Not the object it was defined on. ie.
name = 'global value';
const person = {
name: 'member value',
getName: function() {
return this.name;
}
};
console.log(person.getName()); // prints "member value"
// functions as first class objects
const getNameUnbound = person.getName;
console.log(getNameUnbound()); // prints "global value"
const getNameBound = person.getName.bind(person);
console.log(getNameBound()); // prints "member value"
In the above example, when I did const getNameUnbound = person.getName I moved the function into the global (window) scope, so now when I call getNameUnbound, this is set to the window/global object, and not the person object.
This works for any object as well.
const personTwo = {
name: 'person two',
};
personTwo.getName = person.getName;
console.log(personTwo.getName()); // prints "person two"