Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have a function in the following format:
var obj = {
doSomething: function(){
this.callSomething();
},
callSomething: function(){
this.doThis();
this.andDoThis();
},
doThis: function(){
if(!this.bln){
this.bln = true;
}
// some code here
},
andDoThis: function(){
if(this.bln){
// some code here
}
}
}
obj.doSomething();
As you can see in the above code, I am using this keyword many times to call a function or a obj scoped variables.
Instead of using this keyword, I want to use something of single letter like:
var s = this; // so that I can use "s" instead of "this" everywhere
How can I do this?
PS: Here obj object name is just for example purpose. In real scenario, the object name is longer than this keyword.
You can get rid of this entirely if you use the module or the revealing module patterns.
The following example uses the revealing module pattern:
var module = (function() {
var bln = false,
doSomething = function() { callSomething(); },
callSomething = function() { doThis(); andDoThis(); },
doThis = function() { if (!bln) { bln = true; } },
andDoThis = function() { if (bln) { /* do stuff */ } };
return {
doSomething: doSomething //Only public method, rest are private
};
})();
module.doSomething();
Try this. Variable name itself can be used as this inside that object.
var longName = s = {
doSomething: function(){
s.callSomething();
},
callSomething: function(){
s.doThis();
s.andDoThis();
},
doThis: function(){
if(!s.bln){
s.bln = true;
}
// some code here
}
...........................
}
Hi probably the above answers are correct, BUT its not a good way to do things.
It will be way harder to read your code if you go away from "this". Reading "this" you always know you are talking about the reference of your object instance.
The only reason i can think of where this could be usefull is to reduce memory by 3 byte for each "this" you replace by "s".
You would have to define s on a global scope to achieve what you actually want - which is VERY dangerous.
There is alot of blackboxing you do in javascript by implementing eg. frameworks that might ruin everything for you.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I have a simple code below that populates a <ul></ul> with <li> using fetch api. I am using functions to populate the <ul>
HTML:
<ul id="people"></ul>
JavaScript:
const ul = document.getElementById('authors'); // Get the list
const url = 'https://randomuser.me/api/?results=10'; // Get 10 random users
fetch(url)
.then((resp) => resp.json())
.then((data) => {
let people = data.results;
return people.map(person => {
let li = createNode('li'),
img = createNode('img'),
span = createNode('span');
img.src = person.picture.medium;
span.innerHTML = `${person.name.first} ${person.name.last}`;
append(li, img);
append(li, span);
append(ul, li);
});
})
.catch((error) => console.log(error));
function createNode(element) {
return document.createElement(element); // Create the type of element you pass in the parameters
}
function append(parent, el) {
return parent.appendChild(el); // Append the second parameter(element) to the first one
}
Problem: As my code grows, I will be adding functions. Should I place my functions on the bottom part of the code before invoking it?
Any idea is greatly appreciated. Thanks
If you read about javascript hoisting. Then you will know variable declaration and functions definition are hoisted at the top.
So as you run the JS file, your function will, figuratively speaking, move to top. Or you can say will be interpret them first.
Also variable declarations are hoisted before function definition.
But function expressions are not hoisted like function declaration. The variable declaration is hoisted and then the function is assigned to the variable later on in the code.
Basically JavaScript interpreter "looks ahead" to find all the variable declarations and "hoists" them to the top of the function.
There are multiple articles on this online. MDN docs to start with.
helloWorld();
function helloWold() { return "hello world"; }
This works because, losely speaking the interpreted version looks like
function helloWorld() { ... }
helloWorld()
But
helloWorld();
var helloWorld = function() {}
translates to
var helloWorld;
helloWorld(); // error, because helloWorld is undefined
helloWorld = function() {}
Hope that clears up.
Also the same rules of hoisting applies inside a function. Because of function scope.
So imagine something like
var foo = 10;
(function() {
console.log(foo);
var foo = 20;
})()
will translate to
var foo;
foo = 10;
(function() {
var foo;
console.log(foo); // logs undefined, foo is redefined inside the function
foo = 20;
})()
console.log(foo); // logs 10
If you declare it as a function declaration, you can called it in any part of the script, a function declaration is:
function myFunctionDeclaration() {}
How another users say, will be better if you use React to manipulate the DOM (if you are using this library)
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
Improve this question
I have a class in JavaScript (MyClass) which exposes two public functions (funA and funB) as shown:
var MyClass = function(){
this.funA = function(){
console.log("function A");
this.funB();
};
this.funB = function(){
console.log("function B");
};
};
var myObj = new MyClass();
Note how funA calls funB using 'this' keyword.
The following works:
myObj.funA();
But this does not:
var anonymousFun = function(fn){
fn();
}
anonymousFun(myObj.funA);
The reason is when funA calls funB using 'this', the 'this' is set to global context (instead of MyClass) and funB does not exist at global level.
The error is:
Uncaught TypeError: this.funB is not a function
The simplest solution that I tried to avoid the issue is to use a variable 'that' inside MyClass and initialize it to 'this'. Then, use that.funB instead of this.funB inside funA:
var MyClass = function(){
var that = this;
this.funA = function(){
console.log("function A");
that.funB();
};
this.funB = function(){
console.log("function B");
};
};
Is this a correct approach?
Are there any better solutions available?
If you're compiling your JS with Babel you can use class property initilizer syntax to create functions that are bound to this:
class MyClass {
funA = () => {
console.log('function A')
this.funB()
}
funB = () => {
console.log('function B')
}
}
You can use the Function.bind method to attach an object which is to be used as "this" when the function is called.
anonymousFun(myObj.funA.bind(myObj));
It's more like an opinion based question. Though, this might help you in your development. You can use bind or call. Here's an example with call:
var MyClass = function(){
this.funA = function(){
console.log("function A");
this.funB();
};
this.funB = function(){
console.log("function B");
};
};
var myObj = new MyClass();
var anonymousFun = function(fn){
fn.call(myObj)
}
anonymousFun(myObj.funA)
A little better:
var anonymousFun = function(context, fn){
fn.call(context)
}
anonymousFun(myObj, myObj.funA)
Define the functions using identifiers accessible within the scope of the constructor, then add them to the Object at the end. this may change depending on context, but a closure is a closure and references to variables accessible to the function will not change.
var MyClass = function(){
function funA(){ // no `this`
console.log("function A");
funB(); // no `this`
};
function funB(){ // no `this`
console.log("function B");
};
Object.assign(this, { funA, funB });
};
var instance = new MyClass();
instance.funA();
instance.funB();
var lonely = instance.funA;
lonely(); // no longer attached to an object, but can still access funB();
You can just use arrow functions instead. The reason that this becomes a window object is due to a different closure. If you use arrow functions when defining the functions, you with retain the same closure through out the class.
var MyClass = function(){
this.funA = ()=>{
console.log("function A");
this.funB();
};
this.funB =()=>{
console.log("function B");
};
};
This code works as expected
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Imagine a simple object:
function createObj(someValue) {
return {
someFunction: function () {
return someValue;
}
};
};
It basically does:
var obj = createObj("something");
var result = obj.someFunction(); // "something"
Now, someFunction refers to a function that returns a value.
What should be the correct naming convention used in javascript for the someFunction function?
Should it be named as what it does? Or its ok to name it with the name of the object that it returns?
I mean, should I name it value(), or should I name it getValue()? Why?
Thanks in advance.
There's no "correct" naming in JavaScript. However, there are three conventions that are mostly used:
Independent getter and setter:
In this approach, we create both a getter and a setter functions, like in Java:
var value;
this.getValue = function () {
return value;
}
this.setValue(val) {
value = val;
}
Combined getter/setter method
In this approach, you have a single method that does both. The magic here is that it checks whether you provides a new value for your property:
var _value;
this.value = function (val) {
if (arguments.length > 0) {
// Acts like a setter
_value = value;
return this;
}
return _value;
}
It's also common to define your setter to return the actual instance of your class, so you can do this:
myObj
.setProp1("foo")
.setProp2("bar");
Object.defineProperty
This one is less used, but it's also an option. It's similar to Objective-C #property statement:
var _value;
Object.defineProperty(this, "value", {
get: function() {
return _value;
},
set: function(val) {
_value = val;
}
});
Then you can access it like if it was a public property:
console.log(myObj.value); // Calls the getter method
myObj.value = newValue; // Calls the setter method
General naming conventions say getValue() would be the name of a function, where value would be the name of the variable.
So, if you were accessing the data directly, you would use obj.value, whereas if you were using a function to get some data, you would use obj.getValue().
There are quite a few naming conventions out there for Javascript in particular.
This question has a sister and hopefully this will help with your question: Clicky for more info
I am personally a fan of getValue and setValue but when reading other peoples codebase, i have seen
object.value = function(item){
if (!item) return this.value;
this.value = item;
}
jQuery uses this on the regular, which is why i don't want to necessarily bash on it.
This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 9 years ago.
Wondering what the difference between the two code below. In the first case I used this to refer to the object and in the second case I used the object name. Although both works I was wondering whether there is any real difference between the two.
(function() {
var app = {
init: function () {
app.addLun('Hello');
},
addLun: function(a) {
console.log(a);
}
};
});
})();
and
var app = {
init: function () {
this.addLun('Hello');
},
addLun: function(a) {
console.log(a);
}
};
});
})();
this refers to the context/scope of the function, so depending on how you call it, it could refer to app, window, or many other scopes...
app refers to the actual app object if it exists in that scope.
Using this and app are absolutely not the same. Take this (slightly contrived) example:
var app = {
init: {
foo: function () {
// Think 'this' is app?
this.addLun('Hello');
}
},
addLun: function(a) {
console.log(a);
}
};
var app2 = {
init: {
foo: function () {
app2.addLun('Hello');
}
},
addLun: function(a) {
console.log(a);
}
};
app2.init.foo(); // prints Hello
app.init.foo(); // error - no method called addLun
this is the current context, app is the object you have just created.
Yes, there is difference. If you want to have more, that one instance of app object (for example, you can clone it with jQuery.extend()), you need to use second variant for correct work.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Javascript: Object Literal reference in own key’s function instead of ‘this’
I have this simple code :
var myObj = {
init: function ()
{
this.Name = "Royi";
this.BindMe();
}
BindMe: function ()
{
$('myButton').on("click", this.Work);
},
Work: function ()
{
var self = this; <--------
}
}
Running :
myObj.init();
This is a simple Object literal.
The problem is on the Work Method. I want to make it know this ( myObj)
there are 2 ways of doing it :
option #1
In BindMe , When clicking , transfer the context via :
$('myButton').on("click",{self:this}, this.Work);
and in Work do :
var self = e.data.self... //need also to add e
option #2
write var self = myObj ;
Question
Is there any other way of doing it ?
which is the better/correct way ?
Don't add it as data to the event object. Instead, use .bind() or the jQuery-ish (crossbrowser) proxy to provide the correct thisArg to the function (see MDN's introduction to the this keyword):
$('myButton').on("click", $.proxy(this, "Work"));
You could pass the context to the handler function as part of a closure:
$('myButton').on("click", (function(context) {
return function() {
context.Work
};
})(this));
Needless to say, this is cross browser, since it relies on one of the core features of JS.