ﺪﯿﻨﮐ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﺍﺭ ﻦﯾﺍ

فهرست مطالب

    نمایش فهرست مطالب

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>

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

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

ﻦﯾﺍ ؟ﺖﺴﯿﭼ

.ﺩﺭﺍﺩ ﻩﺭﺎﺷﺍ ﯽﺷ ﮏﯾ ﻪﺑ this ﯼﺪﯿﻠﮐ ﻪﻤﻠﮐ ،ﺖﭙﯾﺮﮑﺳﺍ

ﻡﺍﺪﮐ (ﯽﻧﺍﻮﺧﺍﺮﻓ ﺎﯾ ﻩﺩﺎﻔﺘﺳﺍ) ﯽﻧﺍﻮﺧﺍﺮﻓ ﻩﻮﺤﻧ ﻪﺑ ﯽﮕﺘﺴﺑ ﯽﺷ

:ﺩﺭﺍﺩ ﻩﺭﺎﺷﺍ ﯽﻔﻠﺘﺨﻣ ءﺎﯿﺷﺍ ﻪﺑ ﻥﺁ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﻩﻮﺤﻧ ﻪﺑ ﻪﺘﺴﺑ this

  • .ﺩﺭﺍﺩ ﻩﺭﺎﺷﺍ ﯽﺷ ﻪﺑ ﻦﯾﺍ<"code class="w3-codespan> ،ﯽﺷ ﺵﻭﺭ ﮏﯾ ﺭﺩ

  • .ﺩﺭﺍﺩ ﻩﺭﺎﺷﺍ ﯽﻧﺎﻬﺟ ءﯽﺷ ﻪﺑ ﻦﯾﺍ<"code class="w3-codespan> ،ﯽﯾﺎﻬﻨﺗ ﻪﺑ

  • .ﺩﺭﺍﺩ ﻩﺭﺎﺷﺍ ﯽﻧﺎﻬﺟ ءﯽﺷ ﻪﺑ ﻦﯾﺍ<"code class="w3-codespan> ،ﻊﺑﺎﺗ ﮏﯾ ﺭﺩ

  • .ﺖﺳﺍ ﻩﺪﺸﻧ ﻒﯾﺮﻌﺗ<"code> ﻦﯾﺍ<"code class="w3-codespan>

  • .ﺖﺳﺍ ﻩﺩﺮﮐ ﺖﻓﺎﯾﺭﺩ ﺍﺭ ﺩﺍﺪﯾﻭﺭ ﻪﮐ ﺩﺭﺍﺩ ﻩﺭﺎﺷﺍ ﯼﺮﺼﻨﻋ ﻪﺑ ﻦﯾﺍ<"code class="w3-c

  • .ﺪﻫﺩ ﻉﺎﺟﺭﺍ ﯽﺷ ﺮﻫ ﻪﺑ ﺍﺭ ﻦﯾﺍ<"code class="w3-codespan> ﺪﻧﺍﻮﺗ ﯽﻣ

ﺪﯿﺷﺎﺑ ﻪﺘﺷﺍﺩ ﻪﺟﻮﺗ

ﻦﯾﺍ ﺭﺍﺪﻘﻣ ﺪﯿﻧﺍﻮﺗ ﯽﻤﻧ ﺎﻤﺷ .ﺖﺳﺍ ﯼﺪﯿﻠﮐ ﻪﻤﻠﮐ ﮏﯾ .ﺖﺴﯿﻧ ﺮﯿ

ﻦﯾﺍ ﺵﻭﺭ ﮏﯾ ﺭﺩ

.ﺩﺭﺍﺩ ﻩﺭﺎﺷﺍ ﯽﺷ ﻪﺑ ﻦﯾﺍ<"code class="w3-codespan> ،ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ ءﯽﺷ ﺵﻭﺭ

.ﺩﺭﺍﺩ ﻩﺭﺎﺷﺍ person ﯽﺷ ﻪﺑ this ،ﻪﺤﻔﺻ ﻦﯾﺍ ﯼﻻﺎﺑ

.ﺖﺳﺍ person ﯽﺷ ﺯﺍ ﯼﺪﺘﻣ fullName ﺵﻭﺭ ﺍﺮﯾﺯ

fullName : function() {
    return this.firstName + " " + this.lastName;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>

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

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

ﻦﯾﺍ ﯽﯾﺎﻬﻨﺗ ﻪﺑ

.ﺩﺭﺍﺩ ﻩﺭﺎﺷﺍ ﯽﻧﺎﻬﺟ ءﯽﺷ ﻪﺑ ﻦﯾﺍ<"code class="w3-codespan> ،ﺩﻮﺷ ﯽﻣ ﻩﺩﺎﻔﺘﺳﺍ

.ﺖﺳﺍ ﺍﺮﺟﺍ ﻝﺎﺣ ﺭﺩ ﯽﻧﺎﻬﺟ ﻩﺩﻭﺪﺤﻣ ﺭﺩ ﻦﯾﺍ<"code class="w3-codespan> ﺍﺮﯾﺯ

:ﺖﺳﺍ [object Window] ﯼﺮﺳﺍﺮﺳ ﯽﺷ ،ﺮﮔﺭﻭﺮﻣ ﻩﺮﺠﻨﭘ ﺭﺩ

ﻝﺎﺜﻣ

let x = this;

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the window object:</p>

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

<script>
let x = this;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

:ﺩﺭﺍﺩ ﻩﺭﺎﺷﺍ ﺰﯿﻧ ﯽﻧﺎﻬﺟ ءﯽﺷ ﻪﺑ ﻦﯾﺍ<"code class="w3-codespan> ،ﺩﻮﺷﯽﻣ

ﻝﺎﺜﻣ

 "use strict";
let x = this;

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the window object:</p>
<p id="demo"></p>

<script>
"use strict";
let x = this;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

ﻦﯾﺍ ﻊﺑﺎﺗ ﮏﯾ ﺭﺩ (ﺶﯿﭘﺽﺮﻓ)

.ﺖﺳﺍ this ﯼﺍﺮﺑ ﺽﺮﻓﺶﯿﭘ ﻝﺎﺼﺗﺍ ﯽﻧﺎﻬﺟ ءﯽﺷ ،ﻊ

:ﺖﺳﺍ [object Window] ﯼﺮﺳﺍﺮﺳ ﯽﺷ ،ﺮﮔﺭﻭﺮﻣ ﻩﺮﺠﻨﭘ ﺭﺩ

ﻝﺎﺜﻣ

function myFunction() {
    return this;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the the window object:</p>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction();

function myFunction() {
  return this;
}
</script>

</body>
</html>

ﻦﯾﺍ (ﺖﺨﺳ) ﺩﺮﮑﻠﻤﻋ ﮏﯾ ﺭﺩ

.ﺪﻫﺩ ﯽﻤﻧ ﺍﺭ ﺽﺮﻓ ﺶﯿﭘ ﻝﺎﺼﺗﺍ ﻩﺯﺎﺟﺍ ﻪﻧﺍﺮﯿﮕﺘﺨﺳ ﺖﻟﺎﺣ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ

.ﺖﺳﺍ ﻩﺪﺸﻧ ﻒﯾﺮﻌﺗ<"code> ﻦﯾﺍ<"code class="w3-codespan>

ﻝﺎﺜﻣ

"use strict";
function myFunction() {
    return this;
}

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In a function, by default, <b>this</b> refers to the global object.</p>

<p>Strict mode does not allow default binding, so <b>this</b> is:</p>
<p id="demo"></p>

<script>
"use strict";
document.getElementById("demo").innerHTML = myFunction();

function myFunction() {
  return this;
}
</script>

</body>
</html>

ﻦﯾﺍ ﺭﺩ Event Handlers

ﻪﮐ ﺩﺭﺍﺩ ﻩﺭﺎﺷﺍ HTML ﺮﺼﻨﻋ ﻪﺑ ﻦﯾﺍ<"HTML،

ﻝﺎﺜﻣ

 <button onclick="this.style.display='none'">
  Click to 
  Remove Me!
</button>

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<button onclick="this.style.display='none'">Click to Remove Me!</button>

</body>
</html>

Object Method Binding

:ﺖﺳﺍ ﺺﺨﺷ ءﯽﺷ ﻦﯾﺍ<"code class="w3-codespan> ،ﺎﻫﻝﺎﺜﻣ ﻦﯾﺍ ﺭﺩ

ﻝﺎﺜﻣ

const person = {
    firstName  : "John",
    lastName   : "Doe",
    id         : 5566,
    myFunction : function() {
    return this;
  }
};

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the <b>person object</b>.</p>

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

<script>
// Create an object:
const person = {
  firstName  : "John",
  lastName   : "Doe",
  id     : 5566,
  myFunction : function() {
    return this;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.myFunction();
</script>

</body>
</html>

ﻝﺎﺜﻣ

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

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>

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

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

.ﺖﺳﺍ (ﺺﺨﺷ ءﯽﺷ) firstName this ﯽﮔﮋﯾﻭ this.firstName ﯽﻨﻌﯾ

ﺢﯾﺮﺻ ﻊﺑﺎﺗ ﯽﻓﺎﺤﺻ

.ﺪﻨﺘﺴﻫ ﻩﺪﺷ ﻒﯾﺮﻌﺗ ﺶﯿﭘ ﺯﺍ ﺖﭙﯾﺮﮑﺳﺍ ﺍﻭﺎﺟ ﯼﺎﻫﺪﺘﻣ apply()

.ﺪﻧﻮﺷ ﻩﺩﺎﻔﺘﺳﺍ ﻥﺎﻣﻮﮔﺭﺁ ﻥﺍﻮﻨﻋ ﻪﺑ ﺮﮕﯾﺩ ﯽﺷ ﮏﯾ ﺎﺑ ﯽﺷ ﺪﺘﻣ ﮏﯾ ﯽﻧﺍﻮﺧﺍﺮﻓ ﯼﺍﺮﺑ ﺪﻨﻧﺍﻮﺗ ﯽﻣ ﻭﺩ ﺮﻫ

:ﺪﯿﻨﯿﺒﺑ ﻦﯿﻨﭽﻤﻫ

() ﻊﺑﺎﺗ ﯽﻧﺍﻮﺧﺍﺮﻓ ﺵﻭﺭ

.()apply ﻊﺑﺎﺗ ﺪﺘﻣ

.()bind ﻊﺑﺎﺗ ﺪﺘﻣ

،ﺩﺭﺍﺩ ﻩﺭﺎﺷﺍ person2 ﻪﺑ this ،ﺪﻨﮐ ﯽﻣ ﯽﻧﺍﻮﺧﺍﺮﻓ ﻥﺎﻣﻮﮔﺭﺁ ﻥﺍﻮﻨﻋ ﻪﺑ person2 ﺎﺑ ﺍﺭ pe

ﻝﺎﺜﻣ

const person1 = {
    fullName: function() {
      return this.firstName + " " + this.lastName;
    }
}

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

// Return "John Doe":
person1.fullName.call(person2);

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example <strong>this</strong> refers to person2, even if it is a method of person1:</p>

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

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

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

let x = person1.fullName.call(person2); 
document.getElementById("demo").innerHTML = x; 
</script>

</body>
</html>

ﻦﺘﻓﺮﮔ ﺽﺮﻗ ﻊﺑﺎﺗ

.ﺩﺮﯿﮕﺑ ﺽﺮﻗ ﺮﮕﯾﺩ ﯽﺷ ﮏﯾ ﺯﺍ ﺍﺭ ﺪﺘﻣ ﮏﯾ ﺪﻧﺍﻮﺗ ﯽﻣ ﯽﺷ ﮏﯾ ،bind()

.ﺪﻨﮐ ﯽﻣ ﺩﺎﺠﯾﺍ (ﻮﻀﻋ ﻭ ﺺﺨﺷ) ﯽﺷ 2 ﻝﺎﺜﻣ ﻦﯾﺍ

:ﺩﺮﯿﮔ ﯽﻣ ﺽﺮﻗ person ﯽﺷ ﺯﺍ ﺍﺭ fullname ﺪﺘﻣ ﻮﻀﻋ ﯽﺷ

ﻝﺎﺜﻣ

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

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Function bind()</h1>

<p>This example creates 2 objects (person and member).</p>
<p>The member object borrows the fullname method from person:</p> 

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

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

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

document.getElementById("demo").innerHTML = fullName();
</script>

</body>
</html>

ﻦﯾﺍ ﺖﯾﻮﻟﻭﺍ

.ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺮﯾﺯ ﺐﯿﺗﺮﺗ ﺖﯾﻮﻟﻭﺍ ﺯﺍ .ﺩﺭﺍﺩ ﻩﺭﺎﺷﺍ ﯽﺷ ﻡﺍﺪﮐ ﻪﺑ ﻦﯾﺍ<"code class="w3-c

Precedence

ﯽﺷ - ﻑﺪﻫ

1

()ﻦﺘﺴﺑ

2

application() ﻭ call()

3

ﯽﺷ ﺵﻭﺭ

4

ﯽﻧﺎﻬﺟ ﻩﺮﺘﺴﮔ

؟ﺩﻮﺷ ﯽﻣ ﯽﻧﺍﻮﺧﺍﺮﻓ()bind ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﻊﺑﺎﺗ ﮏﯾ ﺭﺩ ﻦﯾﺍ<"code class="w3-codespan>

؟ﺩﻮﺷ ﯽﻣ ﯽﻧﺍﻮﺧﺍﺮﻓ()application ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﻊﺑﺎﺗ ﮏﯾ ﺭﺩ ﻦﯾﺍ<"code class="w3-co

؟ﺩﻮﺷ ﯽﻣ ﯽﻧﺍﻮﺧﺍﺮﻓ()call ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﻊﺑﺎﺗ ﮏﯾ ﺭﺩ ﻦﯾﺍ<"code class="w3-codespan>

؟ﺖﺳﺍ (ﺵﻭﺭ) ﯽﺷ ﻊﺑﺎﺗ ﮏﯾ ﺭﺩ ﻦﯾﺍ<"code class="w3-codespan> ﺎﯾﺁ

تمامی حقوق محفوظ است. © BasicIT.org • 2023-2024