Метод вызова функции JavaScript()

Оглавление

    Показать оглавление

Повторное использование метода

С помощью метода call() вы можете написать метод, который можно будет использовать на разных объекты.

Все функции являются методами

В JavaScript все функции являются объектными методами.

Если функция не является методом объекта JavaScript, это функция глобальный объект (см. предыдущую главу).

В приведенном ниже примере создается объект с 3 свойства, имя, фамилия, полное имя.

Пример

const person = {
  firstName:"John",
  lastName: "Doe",
    fullName: function () {
    return this.firstName + " " + this.lastName;
    }
}

// This will return "John Doe":
person.fullName();  

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>This example creates an object with 3 properties (firstName, lastName, fullName).</p>
<p>The fullName property is a method:</p> 

<p id="demo"></p>

<script>
const myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
document.getElementById("demo").innerHTML = myObject.fullName();
</script>

</body>
</html>

В приведенном выше примере this относится к объекту person.

this.firstName означает свойство firstName объекта this.

Такой же как:

this.firstName означает свойство firstName объекта person.

Что это это?

В JavaScript ключевое слово this относится к объекту.

Какой объект зависит от того, как этот вызывается (используется или вызывается).

Ключевое слово this относится к разным объектам в зависимости от того, как оно используется:

  • В объектном методе this относится к объекту.

  • Само по себе это относится к глобальному объекту.

  • В функции this относится к глобальному объекту.

  • В функции в строгом режиме это имеет значение не определено.

  • В событии this относится к элементу, получившему событие.

  • Такие методы, как call(), apply() и bind() может ссылаться на this на любой объект.

Примечание

это не является переменной. Это ключевое слово. Вы не можете изменить значение this.

Смотрите также:

это руководство по JavaScript

Метод JavaScript call()

Метод call() является предопределенным. Метод JavaScript.

Его можно использовать для вызова (вызова) метода с объектом-владельцем в качестве аргумента (параметра).

С помощью call() объект может использовать метод, принадлежащий другому объекту.

В этом примере вызывается метод fullName человека, который используется человек1:

Пример

const person = {
    fullName: function() {
    return this.firstName + " " + this.lastName;
    }
}
const person1 = {
  firstName:"John",
    lastName: "Doe"
  }
const person2 = {
  firstName:"Mary",
    lastName: "Doe"
}

// This will return "John Doe":
  
  person.fullName.call(person1);

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>This example calls the fullName method of person, using it on person1:
</p>

<p id="demo"></p>

<script>
const person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
const person1 = {
  firstName:"John",
  lastName: "Doe"
}
const person2 = {
  firstName:"Mary",
  lastName: "Doe"
}
document.getElementById("demo").innerHTML = person.fullName.call(person1); 
</script>

</body>
</html>

В этом примере вызывается метод fullName человека, который используется человек2:

Пример

const person = {
    fullName: function() {
      return this.firstName + " " + this.lastName;
    }
}
const person1 = {
  firstName:"John",
    lastName: "Doe"
  }
const person2 = {
    firstName:"Mary",
    lastName: "Doe"
}

// This will return "Mary Doe"
  person.fullName.call(person2);

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>This example calls the fullName method of person, using it on person2:</p>

<p id="demo"></p>

<script>
const person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
const person1 = {
  firstName:"John",
  lastName: "Doe"
}
const person2 = {
  firstName:"Mary",
  lastName: "Doe"
}
document.getElementById("demo").innerHTML = person.fullName.call(person2); 
</script>

</body>
</html>

Метод call() с аргументами

Метод call() может принимать аргументы:

Пример

const person = {
    fullName: function(city, country) {
    return this.firstName + " " + this.lastName 
  + "," + city + "," + country;
    }
}

const person1 = {
  firstName:"John",
  lastName: "Doe"
}

person.fullName.call(person1, "Oslo", "Norway");

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>This example calls the fullName method of person, using it on person1:
</p>

<p id="demo"></p>

<script>
const person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}

const person1 = {
  firstName:"John",
  lastName: "Doe"
}

const person2 = {
  firstName:"Mary",
  lastName: "Doe"
}

document.getElementById("demo").innerHTML = person.fullName.call(person1, "Oslo", "Norway"); 
</script>

</body>
</html>