Hướng dẫn JS

JS TRANG CHỦ Giới thiệu JS JS Đến đâu Đầu ra JS Tuyên bố JS Cú pháp JS Bình luận JS Biến JS JS Hãy JS Const Toán tử JS Số học JS Chuyển nhượng JS Các loại dữ liệu JS Các hàm JS Đối tượng JS Sự kiện JS Chuỗi JS Phương thức chuỗi JS Tìm kiếm chuỗi JS Mẫu chuỗi JS Số JS Phương thức số JS Mảng JS Phương thức mảng JS Sắp xếp mảng JS Lặp lại mảng JS JS Array Const JS ngày Định dạng ngày JS Ngày lấy phương thức JS Phương pháp đặt ngày JS Toán JS JS ngẫu nhiên JS Booleans So sánh JS Điều kiện JS Chuyển đổi JS JS Loop cho JS Loop For In JS Loop For Of JS lặp trong khi JS Break JS lặp lại Bộ JS Bản đồ JS JS Typeof Chuyển đổi loại JS JS Bitwise JS RegExp Lỗi JS Phạm vi JS JS Hoists Chế độ nghiêm ngặt JS JS từ khóa này Hàm mũi tên JS Lớp JS JS JSON Gỡ lỗi JS Hướng dẫn kiểu JS Các phương pháp hay nhất về JS JS sai lầm Hiệu suất JS JS dành riêng từ

Phiên bản JS

Phiên bản JS JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Lịch sử JS

Đối tượng JS

Định nghĩa đối tượng Thuộc tính đối tượng Phương thức đối tượng Hiển thị đối tượng Người truy cập đối tượng Trình tạo đối tượng Nguyên mẫu đối tượng Đối tượng lặp lại Bộ đối tượng Bản đồ đối tượng Tham chiếu đối tượng

Các hàm JS

Định nghĩa hàm Tham số chức năng Lời mời hàm Gọi hàm Áp dụng chức năng Chức năng đóng cửa

Lớp JS

Giới thiệu Lớp học Kế thừa giai cấp Lớp tĩnh

JS Async

Gọi lại JS JS không đồng bộ JS hứa JS Async / Await

JS HTML DOM

Giới thiệu DOM Phương thức DOM Tài liệu DOM Phần tử DOM DOM HTML Các biểu mẫu DOM DOM CSS Hoạt ảnh DOM Sự kiện DOM Trình xử lý sự kiện DOM Điều hướng DOM Nút DOM Bộ sưu tập DOM Danh sách nút DOM

BOM trình duyệt JS

Cửa sổ JS Màn hình JS Vị trí JS Lịch sử JS JS Navigator JS Popup Alert Thời gian JS JS Cookies

API web JS

Giới thiệu API Web API biểu mẫu web API lịch sử web API lưu trữ web API công nhân web API tìm nạp web API vị trí địa lý web

JS AJAX

Giới thiệu về AJAX AJAX XMLHttp Yêu cầu AJAX Phản hồi AJAX Tệp XML AJAX AJAX PHP AJAX ASP Cơ sở dữ liệu AJAX Ứng dụng AJAX Ví dụ về AJAX

JS JSON

Giới thiệu JSON Cú pháp JSON JSON so với XML Các loại dữ liệu JSON Phân tích cú pháp JSON JSON Stringify Đối tượng JSON Mảng JSON Máy chủ JSON JSON PHP HTML JSON JSON JSONP

JS so với jQuery

Bộ chọn jQuery jQuery HTML jQuery CSS jQuery DOM

Đồ họa JS

Đồ họa JS JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

Ví dụ về JS

Ví dụ về JS JS HTML DOM Đầu vào HTML JS Đối tượng HTML JS Sự kiện HTML JS Trình duyệt JS Trình chỉnh sửa JS Bài tập JS JS Quiz Chứng chỉ JS

Tham khảo JS

Đối tượng JavaScript Đối tượng DOM HTML


JavaScript Từ khoá này


Thí dụ

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

Cái gì thế này ?

Từ khóa JavaScript thisđề cập đến đối tượng mà nó thuộc về.

Nó có các giá trị khác nhau tùy thuộc vào nơi nó được sử dụng:

  • Trong một phương thức, thistham chiếu đến đối tượng chủ sở hữu .
  • Một mình, thisđề cập đến đối tượng toàn cục .
  • Trong một hàm, thistham chiếu đến đối tượng toàn cục .
  • Trong một chức năng, trong chế độ nghiêm ngặt, thisundefined.
  • Trong một sự kiện, thisđề cập đến phần tử đã nhận sự kiện.
  • Các phương thức như call(), và apply()có thể tham chiếu thisđến bất kỳ đối tượng nào .

điều này trong một phương pháp

Trong một phương thức đối tượng, thistham chiếu đến " chủ sở hữu " của phương thức.

Trong ví dụ trên đầu trang này, thisđề cập đến đối tượng người .

Đối tượng person là chủ sở hữu của phương thức fullName .

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

một mình này

Khi được sử dụng một mình, chủ sở hữu là đối tượng Toàn cục, do đó, thisđề cập đến đối tượng Toàn cục.

Trong cửa sổ trình duyệt, đối tượng Global là [object Window]:

Thí dụ

let x = this;

 Trong chế độ nghiêm ngặt , khi được sử dụng một mình, thiscũng đề cập đến đối tượng Toàn cục [object Window]:

Thí dụ

"use strict";
let x = this;

điều này trong một chức năng (Mặc định)

Trong một hàm JavaScript, chủ sở hữu của hàm là liên kết mặc định cho this.

Vì vậy, trong một hàm, hãy thistham chiếu đến đối tượng Toàn cục [object Window].

Thí dụ

function myFunction() {
  return this;
}

điều này trong một Chức năng (Nghiêm ngặt)

Chế độ nghiêm ngặt JavaScript không cho phép ràng buộc mặc định.

Vì vậy, khi được sử dụng trong một hàm, ở chế độ nghiêm ngặt, thisundefined.

Thí dụ

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

cái này trong Trình xử lý sự kiện

Trong trình xử lý sự kiện HTML, thisđề cập đến phần tử HTML đã nhận sự kiện:

Thí dụ

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


Phương pháp đối tượng Ràng buộc

Trong các ví dụ này, thislà đối tượng person (Đối tượng person là "chủ sở hữu" của hàm):

Thí dụ

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

Thí dụ

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

Nói cách khác: this.firstName có nghĩa là thuộc tính firstName của đối tượng này (người).


Ràng buộc chức năng rõ ràng

Các call()apply()phương thức là các phương thức JavaScript được xác định trước.

Cả hai đều có thể được sử dụng để gọi một phương thức đối tượng với một đối tượng khác làm đối số.

Bạn có thể đọc thêm về call()apply()ở phần sau của hướng dẫn này.

Trong ví dụ dưới đây, khi gọi person1.fullName với person2 làm đối số, thissẽ tham chiếu đến person2, ngay cả khi đó là một phương thức của person1:

Thí dụ

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