Why do you need to use this.property=property in objects? - javascript

Why do you need to use this.property = property in objects?
Is it used to define the property to the "outside world" of the object?
function Person(property) {
this.property = property;
}
var john = new Person(true);

If you didn't, john.property would be undefined.

The this keyword is used to refer to the owner of the function executed:
http://www.quirksmode.org/js/this.html
As said, you need it to define the john.property, because the property variable passed to the function will expire once the function is executed.

Related

Is this a naming convention or a function declaration

I am learning javascript and now started with objects and basic functions. I came across this type of code and was wondering what exactly is this
var stringFunction = function(){};
stringFunction.test1 = function(){
console.log("Test 1");
}
does test1 is a part of stringFunction or just a naming convention.Thanks in advance
Here test1() is a property (function type) of the stringFunction var.
So you defined a function in a function object.
You can use it by invoking stringFunction.test1(); as you can invoke the outer function : stringFunction();
var stringFunction = function(){console.log("Test stringFunction")};
stringFunction.test1 = function(){
console.log("Test 1");
}
stringFunction();
stringFunction.test1();
OUTPUT :
Test stringFunction
Test 1
function instances are sort of "weird" in Javascript as they are objects but their typeof is "function" and not "object".
They can however have properties added and accessed using either the syntax f.x or f["x"]. Your code simply adds a property to a function object (the value of the property is also a function, but that is irrelevant).
in JavaScript every function is a Function Object. see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function. In you sample the code create a property 'test1' on object stringFunction. The new property is itsealf a Function Object.

JavaScript function members differences

I'm still confused about this part of the closure although I read about it a lot (also here in the site).
Took the code from here:
http://www.crockford.com/javascript/private.html
So what is the different between this:
function Container(param) {
this.member = param;
}
...And this -
function Container(param) {
var member = param;
// and also in case it's without "var", I.e. global
}
Please explain what happens when you're creating the obj for each case -
var myContainer = new Container('abc');
Also -
What are the access differences for the parameter from the object? And can you give example for a function as a parameter and a returning function?
Thanks a lot!
Here is my opinion:
When you use the new to create an object through function,the variable initial by var is local variable:
function Test(){
var name = "John";
this.getName = function(){
return name;
}
}
var obj1 = new Test();
console.log(obj1.name); //undefined
console.log(obj1.getName()); //John
That means you can't read the variable directly outside the function.This is like private variable in Java or c++;
but when you use this.name = "John", this is a different situation:
function Test2(){
this.name = "John";
}
var obj2 = new Test2();
console.log(obj2.name) //"John"
you can read the variable directly, this is like "public" variable in java or c++.
Hope this can work for you. : )
In function Test, when we declare a variable obj1 with new Test. It have been created through the contructor function which is called "Test".
This process is like we call a function in a normal way. Of course that make a local variable "name". When we decleared a function expression which is called "this.getName", that just mean an expression to function "Test".
But when we call the "new Test".It return a object which have a key-value call "getName:function{}". When we call "obj1.getName", it return the variable "name". But it cannot find the getName's local variable "name", so it will search its parent's scope to find if there is a variable "name",it will not stop until we get it or just return "undefined". That make an "quote" to keep the variable "name" in memory, but we just can get it through the function "getName".
For all of this, we make a private variable in our function "Test". : ) Hope this can help.

compare Javascript scope

The following segment:
var obj = {
name:'Tom',
sayHello:function() {
console.log("hello," + this.name);
}
}
var name = 'Kevin';
var method = obj.sayHello;
method();
will get the output:
hello,undefined
but, if change var name = 'Kevin'; to name = 'Kevin'; The output will be hello,Kevin. Why they are different?
There are two halves to the answer:
When you use var method = obj.sayHello;, you are decoupling the function from obj. When you invoke the a method without giving it an explicit object, (ie, method() instead of obj.sayHello()), JavaScript sets this to the global object, window.
When you define a variable using var name = 'Kevin', you're creating a local variable with function scope. When you define a variable using name = 'Kevin', you're creating a global variable, attached to the global object, window. This is identical to writing window.name = 'Kevin'.
These two things combine to mean that, inside sayHello, this is window and this.name is Kevin.
To solve this, you need to use bind, which returns a copy of your method with its context fixed to the object provided as an argument to bind:
var method = obj.sayHello;
new_method = method.bind(obj);
new_method(); // hello, Tom
sayHello:function() {
console.log("hello," + this.name);
}
this in this function refers to the global object. When you change var name = 'Kevin'; to name = 'Kevin';, name variable is set in the global object. Since, name is set in global and this is global, this.name refers to Kevin and it prints hello,Kevin.
The this keyword can be tricky to get.
If you call obj.sayHello, the this keyword will refer to obj.
When you write method = obj.sayHello that the same thing that writing:
window.method = function() { console.log("hello," + this.name); }
The this keyword will now refer to window.
That's why when you reference a variable having name for its name, you write window.name which can be found by your function.
How you call a function determines the value of this in the method. In your way of calling:
var method = obj.sayHello;
method();
You are losing the obj reference to this inside of your invocation of sayHello() so this is set to the global object or undefined, not set to obj. Thus, the errors you are getting.
When you do this:
var method = obj.sayHello;
All, it does it put a reference to the sayHello function in the method variable. Nowhere is anything to do with obj stored in method. So, when you then call method(), there is no object reference at all so instead of obj.sayHello() which causes this to be set to obj, you're just calling sayHello() all by itself which does not set the value of this to obj.
There are multiple ways to fix it.
1) Helper Function.
var method = function() {obj.sayHello()};
method();
2) Use .bind()
Here .bind() will create a helper function for you.
var method = obj.sayHello.bind(obj);
method();
3) Change sayHello() method
You can change the sayHello() method so it doesn't use the this pointer (which works fine if it is a singleton object, but not if there are multiple instances):
sayHello:function() {
console.log("hello," + obj.name);
}

referring to prototype method within class variable

I'm having trouble with a JS prototype object I'm working on. What I'm trying to do is define a class-level variable as an object literal, then refer back to one of the class's prototype methods to set a property of the class-level variable, but I'm not getting anywhere. Here's what I am trying to do, in a simplified example:
var foo = function(args)
{
this.name = 'bar';
}
foo.stuff = { barbaz: this.foobarbaz(2) };
foo.prototype.foobarbaz(int)
{
return int;
}
alert(foo.stuff.barbaz); // should alert 2, but I'm missing something
I'm wondering if I'm just misunderstanding the scope of 'this' in this instance, or if this.foobarbaz() is undefined when I assign it to foo.stuff.barbaz.
Is it possible to refer to an object's prototype methods from within a class-level variable like this?
Here is what you need to know:
You should define your method on the prototype like foo.prototype.foobarbaz = function(int) {...}. Your current syntax is not valid.
You're trying to use the method before you define it. If you're expecting function hoisting to work here, that only applies to function declarations, not assignments. Move the assignment of foobarbaz above the first time you use it.
In this function you've provided, this is not foo. Each function has its own value of this (called the function's "context"), set each time the function is invoked. You can see the rules for how a function's context is set in several answers to Understanding Javascript scope with "var that = this".
Instead, here, you'll need to use foo.foobarbaz(2) instead of this.foobarbaz(2), because this is probably window (assuming you call this code not as the method of an object and not in JavaScript's strict mode).

Why do I have to use "this" to access in inner property of a function

What is the difference between
function person(first_name, last_name) {
this.first = first_name
this.last = last_name
}
and this:
function person(first_name, last_name) {
var first = first_name
var last = last_name
}
Why only the first one makes person.first & person.last accessible outside the function?
The this keyword within a function is called the invocation context.
1) If you define your function as a member of an object (a method):
myObject.someMethod = function() { this.x = 2; };
then the invocation context, this, is the object to which the method is being added, myObject. So after calling myObject.someMethod(); above, myObject.x is then 2. The member x is undefined until you call the method, unless you defined it before.
2) If you use your function as a constructor with the new keyword, then this refers to the new object that is being created:
function MyX() { this.x = 3; };
var myX = new MyX();
You'll then have property myX.x set to 3.
Note that I called my constructor MyX(), not myX(). You should call yours Person(), not person(). It's just a convention, but it is useful to indicate that a function is meant to be used as a constructor.
3) Finally, if you use this within a function that you call as neither a method nor a constructor, then this refers to the global object (document or, equivalently, window). Note however that if you are using javascript in strict mode (which you should do), this is undefined in such a situation, which means that you basically cannot use this in a function that is not a method or a constructor.
Your specific question refers to case 2), the constructor. this.x = 3 in the constructor just sets property x of the newly created object. After some object myX is created, you can then access and modify x externally as any other object property using myX.x.
when you write constructor function ( using new) - you add properties using this.XXX
then you do :
var p = new Person('s','d');
and then you have access to p.first etc.
in the second example :
youre not creating any properties..
youre only creating private variables.
so you cant access them...
By using this.something you're saying that THIS is an object and something is his property.
By using var, you're saying that it's just a variable and not a property.
More information about variable vs property:
http://javascriptweblog.wordpress.com/2010/08/09/variables-vs-properties-in-javascript/
Because of function scope.
A variable lifetime is between the curly braces of the function. The this keyword allows to access the function properties outside of it.
Definitely take a look at this link: https://developer.mozilla.org/en/JavaScript/Reference/Functions_and_function_scope
'var' keyword make a variable scoped. In the last example var first and var last create variable accessible only in the scope of the function. You can see this as a local variable in a constructor.
when in javascript you declare a variable as
var variable
it only exists inside the method where you declared it. If you want a variable to be accessible for everyone (that is, global) it has to be declared without the 'var' part
You do not necessarily have to use this. It'd also work fine if you've got a structure like this:
Person = function(first_name, last_name) {
var first, last;
create(first_name, last_name);
function create(first_name, last_name) {
first = first_name
last = last_name
}
return {
firstName: first,
lastName: last
}
}

Categories

Resources