IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

Khai báo biến & hàm mặc định trong Javascript

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

Mệnh đề điều kiện

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

Vòng lặp for, while, do..while

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

Xử lý sự kiện & thao tác thẻ HTML

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

Examination & Ôn Tập Tổng Quát

1000 Bài tập JavaScript - Lập Trình JavaScript




Trang Chủ Học JS The JavaScript this Keyword - Từ khóa this trong JavaScript

The JavaScript this Keyword - Từ khóa this trong JavaScript

by GokiSoft.Com - 09:22 19/05/2020 2,159 Lượt Xem

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>


Bình luận



Chia sẻ từ lớp học

Phân Loại Bài Viết

Tài Liệu Tham Khảo

Đã sao chép!!!