Viewing: ar.javascript.info

          let user = {
  name: "John",
  age: 30
};
        

: .

JavaScript (method ).

user :

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

Here weve just used a Function Expression to create a function and assign it to the property user.sayHi of the object.

Then we can call it as user.sayHi(). The user can now speak!

A function that is a property of an object is called its method.

So, here weve got a method sayHi of the object user.

let user = {
  // ...
};

//    
function sayHi() {
  alert("Hello!");
};

//     
user.sayHi = sayHi;

user.sayHi(); // Hello!

                    / ([object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming)   "OOP").
OOP        .                          Design Patterns: Elements of Reusable Object-Oriented Software  E.Gamma  R.Helm  R.Johnson  J.Vissides   Object-Oriented Analysis and Design with Applications  G.Booch .
        

          //     

user = {
  sayHi: function() {
    alert("Hello");
  }
};

//       
user = {
  sayHi() { // same as "sayHi: function()"
    alert("Hello");
  }
};
        

"function" sayHi() . ( ) . .

this

. user.sayHi() user.

this

this .

let user = {
  name: "John",
  age: 30,

  sayHi() {
    // "this"   "
    alert(this.name);
  }

};

user.sayHi(); // John

user.sayHi() this user this :

          let user = {
  name: "John",
  age: 30,

  sayHi() {
    alert(user.name); // "user"   "this"
  }

};
        

. user : admin = user user :

let user = {
  name: "John",
  age: 30,

  sayHi() {
    alert( user.name ); //   
  }

};


let admin = user;
user = null; //    

admin.sayHi(); // TypeError: Cannot read property 'name' of null

this.name user.name alert .

In JavaScript, keyword this behaves unlike most other programming languages. It can be used in any function, even if its not a method of an object.

this JavaScript . .

          function sayHi() {
  alert( this.name );
}
        

this . this :

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

//      
user.f = sayHi;
admin.f = sayHi;

// t    
// "this"         
user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

admin['f'](); // Admin (               )

: obj.f() this obj f user admin .

function sayHi() {
  alert(this);
}

sayHi(); //

this undefined . this.name .

this ( window ). "use strict".

. this .

this this .

this JavaScript .

this . . .

"this

(Arrow function) : this . this this .

arrow() this user.sayHi():

let user = {
  firstName: "Ilya",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // Ilya

this . .

(methods).
object.doSomething().
( ) this.
this .
this .
.
object.method() this object.

this . this .

`this`

makeUser . ref

What is the result of accessing its ref? Why?

          function makeUser() {
  return {
    name: "John",
    ref: this
  };
}

let user = makeUser();

alert( user.ref.name ); //  
        

A: .

function makeUser() {
  return {
    name: "John",
    ref: this
  };
}

let user = makeUser();

alert( user.ref.name ); //     'name' :

this . . this makeUser() undefined .

this . ref: this this

          function makeUser(){
  return this; // this time there's no object literal
}

alert( makeUser().name ); // Error: Cannot read property 'name' of undefined
        

alert( makeUser().name ) alert( user.ref.name ) :

function makeUser() {
  return {
    name: "John",
    ref() {
      return this;
    }
  };
}

let user = makeUser();

alert( user.ref().name ); // John

user.ref() this '.'

calculator :

read() .
sum() .
mul() .

          let calculator = {
  // ... your code ...
};

calculator.read();
alert( calculator.sum() );
alert( calculator.mul() );
        

sandbox .

let calculator = {
  sum() {
    return this.a + this.b;
  },

  mul() {
    return this.a * this.b;
  },

  read() {
    this.a = +prompt('a?', 0);
    this.b = +prompt('b?', 0);
  }
};

calculator.read();
alert( calculator.sum() );
alert( calculator.mul() );

sandbox.

ladder () :

          let ladder = {
  step: 0,
  up() {
    this.step++;
  },
  down() {
    this.step--;
  },
  showStep: function() { // shows the current step
    alert( this.step );
  }
};
        

          ladder.up();
ladder.up();
ladder.down();
ladder.showStep(); // 1
        

up down showStep :

ladder.up().up().down().showStep(); // 1

JavaScript

sandbox .

let ladder = {
  step: 0,
  up() {
    this.step++;
    return this;
  },
  down() {
    this.step--;
    return this;
  },
  showStep() {
    alert( this.step );
    return this;
  }
};

ladder.up().up().down().up().down().showStep(); // 1

          ladder
  .up()
  .up()
  .down()
  .up()
  .down()
  .showStep(); // 1
        

sandbox.