The JavaScript this Keyword - Từ khóa this trong JavaScript
ví dụ
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};<!DOCTYPE html>
<html>
<body>
<h2>The JavaScript <i>this</i> Keyword</h2>
<p>In this example, <b>this</b> represents the <b>person</b> object.</p>
<p>Because the person object "owns" the fullName method.</p>
<p id="demo"></p>
<script>
// Create an object:
var 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 là gì?
Từ khóa this tham chiếu đến các đối tượng mà nó thuộc về.
Nó có các giá trị khác nhau dựa trên nơi mà nó được dùng:
Trong một phương thức this tham chiếu đối tượng sở hữu.
Khi đứng riêng lẻ, this tham chiếu đối tượng toàn cục.
Trong một hàm, this tham chiếu đối tượng toàn cục.
Trong một hàm, ở chế độ nghiêm ngặt, this là undefined.
Trong một sự kiện, this dựa vào thành phần nhận được sự kiện.
this trong một phương thức
Trong một phương thức của đối tượng, this tham chiếu "chủ sở hữu" của phương thức.
Trong một ví dụ trên đầu của trang này, this tham chiếu đến đối tượng person.
Đối tượng person là một chủ sở hũu của phương thức fullName.
fullName : function() {
return this.firstName + " " + this.lastName;
}<!DOCTYPE html>
<html>
<body>
<h2>The JavaScript <i>this</i> Keyword</h2>
<p>In this example, <b>this</b> represents the <b>person</b> object.</p>
<p>Because the person object "owns" the fullName method.</p>
<p id="demo"></p>
<script>
// Create an object:
var 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 khi đứng một mình
Khi dùng một mình, chủ sở hũu là đối tượng toàn cục, nên this tham chiếu đối tượng toàn cục.
Trong một của sổ trình duyệt đối tượng toàn cục là [object Window]:
ví dụ
var x = this;<!DOCTYPE html>
<html>
<body>
<h2>The JavaScript <i>this</i> Keyword</h2>
<p>In this example, <b>this</b> refers to the window Object:</p>
<p id="demo"></p>
<script>
var x = this;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Trong chế độ nghiêm ngặt, khi dùng một mình, this cũng tham chiếu đối tượng toàn cục [object Window]:
ví dụ
"use strict";
var x = this;<!DOCTYPE html>
<html>
<body>
<h2>The JavaScript <i>this</i> Keyword</h2>
<p>In this example, <b>this</b> refers to the window Object:</p>
<p id="demo"></p>
<script>
"use strict";
var x = this;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
this trong một hàm (Mặc định)
Trong một hàm JavaScript, chủ sở hữu của hàm là rằng buộc mặc định của this.
Nên, trong một hàm, this tham chiếu đối tượng toàn cục [object Window].
ví dụ
function myFunction() {
return this;
}<!DOCTYPE html>
<html>
<body>
<h2>The JavaScript <i>this</i> Keyword</h2>
<p>In this example, <b>this</b> represents the object that "owns" myFunction:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
return this;
}
</script>
</body>
</html>
this trong một hàm (Strict)
Chế độ nghiêm ngặt trong JavaScript không cho phép rằng buộc mặc định.
Nên, khi được dùng trong một hàm, trong chế độ nghiêm ngặt, this là undefined.
ví dụ
"use strict";
function myFunction() {
return this;
}<!DOCTYPE html>
<html>
<body>
<h2>The JavaScript <i>this</i> Keyword</h2>
<p>In a function, by default, <b>this</b> refers to the Global object.</p>
<p>In strict mode, <b>this</b> is <b>undefined</b>, because strict mode does not allow default binding:</p>
<p id="demo"></p>
<script>
"use strict";
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
return this;
}
</script>
</body>
</html>this trong xử lý sự kiện(this in Event Handlers)
Trong trình xử lý sự kiện HTML , this tham chiếu đến thành phần HTML nhận được sự kiện:
ví dụ
<button onclick="this.style.display='none'">
Click to Remove Me!
</button><!DOCTYPE html>
<html>
<body>
<h2>The JavaScript <i>this</i> Keyword</h2>
<button onclick="this.style.display='none'">Click to Remove Me!</button>
</body>
</html>Liên kết phương thức của đối tượng(Object Method Binding)
Trong những ví dụ này, this là đối tượng person (Đối tượng person là chủ sở hữu của hàm):
ví dụ
var person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};<!DOCTYPE html>
<html>
<body>
<h2>The JavaScript <i>this</i> Keyword</h2>
<p>In this example, <b>this</b> represents the person object that "owns" the fullName method.</p>
<p id="demo"></p>
<script>
// Create an object:
var 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>
ví dụ
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};<!DOCTYPE html>
<html>
<body>
<h2>The JavaScript <i>this</i> Keyword</h2>
<p>In this example, <b>this</b> represents the <b>person</b> object.</p>
<p>Because the person object "owns" the fullName method.</p>
<p id="demo"></p>
<script>
// Create an object:
var 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>
Nói cách khác: this.firstName nghĩa là thuộc tính firstName của đối tượng this (person).
Chi tiết hàm liên kết(Explicit Function Binding)
Các phương thức call() và apply() được cài đặt sẵn trong các phương thức của JavaScript.
Chúng đều có thể được dùng để gọi một phương thức trong một đối tượng với một đối tượng khác là đối số.
Bạn có thể đọc nhiều hơn về call() vàapply() sau.
Trong ví dụ bên dưới, khi gọi person1.fullName với person2 như một đối số, this sẽ tham chiếu đến person2, ngay cả khi nó là một phương thức của person1:
ví dụ
var person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person2 = {
firstName:"John",
lastName: "Doe",
}
person1.fullName.call(person2); // Will return "John Doe"<!DOCTYPE html>
<html>
<body>
<h2>The JavaScript <i>this</i> Keyword</h2>
<p>In this example <strong>this</strong> refers to person2, even if it is a method of person1:</p>
<p id="demo"></p>
<script>
var person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person2 = {
firstName:"John",
lastName: "Doe",
}
var x = person1.fullName.call(person2);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
