Thay đổi nhiều phần tử và gọi một chuỗi các phương thức. Cửa sổ khoảng thuộc tính - Xâu chuỗi lệnh gọi .bind() trong JavaScript. Kêt quả bât ngơ
Lời nói đầu
Bài viết dành cho người dùng đã làm quen với lập trình hướng đối tượng.
Bây giờ tôi sẽ kể cho bạn nghe về một cái mới cơ hội hữu ích, được giới thiệu từ nhánh 5 dưới dạng phát triển OOP trong PHP (so với nhánh 4). Nó được gọi là Method Chaining và trông như thế này:
$object->method_a()->method_b()->method_c();
Chuyện gì đang thực sự xảy ra ở đây vậy? Hãy bắt đầu bằng cách nói rằng một trong (nhiều) thay đổi giữa PHP4 và PHP5 là các phương thức hiện có thể trả về các đối tượng. Thay đổi nhỏ này cho phép bạn sử dụng OOP theo một cách mới. Vì vậy, để sử dụng chuỗi lệnh gọi, bạn phải có khả năng trả về các đối tượng từ một phương thức. Hơn nữa, không quan trọng nó sẽ là loại đối tượng nào - lớp hiện tại hay một lớp hoàn toàn khác.
Cách sử dụng chung của lớp
Hãy bắt đầu với lớp bình thường nhất và cách sử dụng nó.
Lớp Person ( private $m_szName; private $m_iAge; public function setName($szName) ( $this->m_szName = $szName; ) public function setAge($iAge) ( $this->m_iAge = $iAge; ) giới thiệu hàm public () ( printf("Xin chào, tên tôi là %s và tôi %d tuổi.", $this->m_szName, $this->m_iAge); ) )
Bây giờ chúng ta có thể tạo một thể hiện của lớp Person và truyền tên và tuổi cho đối tượng. Sau đó, sử dụng phương thức giới thiệu, hiển thị thông tin về người đó:
$peter = Người mới(); $peter->setName("Peter"); $peter->setAge(23); $peter->giới thiệu();
Là kết quả của việc thực hiện ví dụ này, trên màn hình sẽ hiển thị dòng sau:
Xin chào, tên tôi là Peter và tôi 23 tuổi.
Sử dụng cuộc gọi theo chuỗi
Trên thực tế, sẽ có rất ít sự khác biệt trong mã. Chúng tôi sẽ chỉ thêm 2 dòng. Điều này sẽ hoạt động như thế nào? Rất đơn giản! Chúng ta cần trả về một đối tượng lớp Person từ mỗi phương thức. Lớp ban đầu của chúng ta sẽ trông như thế này:
Class Person ( private $m_szName; private $m_iAge; public function setName($szName) ( $this->m_szName = $szName; return $this; //Trả về đối tượng của lớp hiện tại ) public function setAge($iAge) ( $this- >m_iAge = $iAge; return $this; //Trả về đối tượng của lớp hiện tại) public function giới thiệu() ( printf("Xin chào, tên tôi là %s và tôi %d tuổi.", $this ->m_szName, $this ->m_iAge);
Ví dụ về việc sử dụng một lớp sửa đổi:
$peter = Người mới(); $peter->setName("Peter")->setAge(23)->introduce();
Màn hình sẽ hiển thị chính xác nội dung giống như trong ví dụ ban đầu.
Làm thế nào nó hoạt động
Đầu tiên chúng ta thực hiện $peter->setName('Peter'). Phương thức này sẽ điền tên và trả về $this, đối tượng hiện tại. Bây giờ chúng ta cần điền vào tuổi. Hành động tiếp theo->setAger(23). Vì chúng tôi đã xâu chuỗi cuộc gọi nên PHP diễn giải điều này là "chạy phương thức setAge thuộc về bất kỳ phương thức nào được trả về trước đó". TRONG trong trường hợp này Người ($peter).
Hoàn toàn điều tương tự cũng xảy ra khi gọi giới thiệu. PHP sẽ chạy phương thức này bằng cách truy cập vào đối tượng được trả về từ thao tác trước đó.
Bạn có thể viết các phương thức trong một chuỗi theo bất kỳ thứ tự nào và với bất kỳ sự lặp lại nào:
$peter->setAge(23) ->setName("Peter") ->setName("Winifred") ->setAge(72) ->introduce();
Trong trường hợp này, dòng sẽ được hiển thị trên màn hình
Xin chào, tên tôi là Winifred và tôi 72 tuổi.
Một trong những điều làm cho jQuery trở nên sắc nét và biểu cảm là việc gọi một phương thức trên đối tượng jQuery thường sẽ thay đổi tất cả các phần tử mà nó chứa. đối tượng này. Tôi nói "thường" vì một số phương thức thực hiện các thao tác không có ý nghĩa trên nhiều phần tử; bạn sẽ thấy điều này trong các chương sau. Nó cho thấy jQuery giúp cuộc sống trở nên dễ dàng hơn nhiều so với API DOM cơ bản.
Liệt kê 5-21: Làm việc với nhiều phần tử ... ; var labelElems = document.getElementsByTagName("nhãn"); với (var i = 0; i< labelElems.length; i++) { labelElems[i].style.color = "blue"; } }); ...Trong ví dụ này, tôi chọn tất cả các thành phần nhãn trong tài liệu và thay đổi giá trị của thuộc tính color thành blue . Trong jQuery, tôi thực hiện việc này bằng một biểu thức, nhưng với DOM API thì việc này tốn nhiều công sức hơn. Ngoài ra, tôi nghĩ ý nghĩa của biểu thức jQuery rất rõ ràng, nhưng đó là ý kiến cá nhân của tôi.
Một tính năng rất hay khác của đối tượng jQuery là nó thực hiện giao diện chất lỏng. Điều này có nghĩa là bất cứ khi nào bạn gọi một phương thức làm thay đổi nội dung của một đối tượng thì kết quả của phương thức đó sẽ là một đối tượng jQuery khác. Điều này có vẻ đơn giản nhưng nó cho phép thực hiện một chuỗi các phương thức như trong .
Liệt kê 5-22: Xâu chuỗi các phương thức trên một đối tượng jQuery ... $(document).ready(function () ( $("label").css("color", "blue").css("font-size" , ".75em"); var labelElems = document.getElementsByTagName("label");< labelElems.length; i++) { labelElems[i].style.color = "blue"; labelElems[i].style.fontSize = ".75em"; } }); ...Trong ví dụ này, tôi đã tạo một đối tượng jQuery bằng cách sử dụng hàm $, được gọi là phương thức css và đặt giá trị cho thuộc tính color, sau đó gọi lại phương thức css, lần này để đặt giá trị cho thuộc tính font-size. Tôi cũng đã trình diễn giải pháp tương đương bằng cách sử dụng API DOM. Bạn thấy rằng nó không mất nhiều thời gian làm việc nhiều hơnđể có được kết quả tương tự bởi vì có vòng lặp for, liệt kê các mục đã chọn.
Bạn sẽ thực sự được hưởng lợi khi sử dụng một chuỗi các phương thức tạo ra những thay đổi quan trọng hơn đối với tập hợp các phần tử có trong đối tượng jQuery. Một ví dụ được hiển thị.
Liệt kê 5-23: Thêm ví dụ phức tạp sử dụng một chuỗi các phương thức $(document).ready(function () ( $("label").css("color", "blue").add("input") .filter("").css(" cỡ chữ", ".75em"); var elems = document.getElementsByTagName("label"); for (var i = 0; i< elems.length; i++) { elems[i].style.color = "blue"; if (elems[i].getAttribute("for") != "snowdrop") { elems[i].style.fontSize = ".75em"; } } elems = document.getElementsByTagName("input"); for (var i = 0; i < elems.length; i++) { if (elems[i].getAttribute("name") != "rose") { elems[i].style.fontSize = ".75em"; } } });Ví dụ này thể hiện rõ tính linh hoạt của jQuery. Chúng ta hãy xem xét từng phương pháp riêng lẻ để hiểu cách thức hoạt động của nó. Hãy bắt đầu với điều này:
$("nhãn").css("màu", "xanh")
Đây là một khởi đầu tốt và đơn giản. Tôi đã chọn tất cả các thành phần nhãn trong tài liệu và cho tất cả chúng Thuộc tính CSS màu được đặt thành màu xanh. Bước tiếp theo:
$("nhãn").css("màu", "xanh").add("đầu vào")
Phương thức add thêm các phần tử khớp với bộ chọn đã chỉ định vào đối tượng jQuery. Trong trường hợp này tôi đã chọn tất cả các phần tử đầu vào, giá trị thuộc tính tên hoa hồng nào không. Các phần tử này được kết hợp với các phần tử đã chọn trước đó và tôi có một tổ hợp các phần tử nhãn và đầu vào. Phương thức add sẽ được thảo luận chi tiết hơn trong Chương 6. Đây là phép cộng sau:
$("nhãn").css("color", "blue").add("input").filter("")
Phương thức lọc sẽ loại bỏ tất cả các phần tử khỏi đối tượng jQuery không khớp với điều kiện đã chỉ định. Tôi sẽ nói về phương pháp này chi tiết hơn trong Chương 6, và trong khoảnh khắc này chỉ cần biết rằng điều này cho phép tôi xóa bất kỳ phần tử nào khỏi đối tượng jQuery có giá trị thuộc tính là snowdrop .
$("nhãn").css("color", "blue").add("input") .filter("").css("font-size", ".75em");
Và bước cuối cùng là thử thách phương pháp css một lần nữa, lần này là chỉ định giá trị .75em cho thuộc tính font-size. Và vì thế kết quả cuối cùng công việc này:
Việc đạt được kết quả tương tự khi sử dụng API DOM sẽ khó khăn hơn nhiều và tôi đã gặp một số khó khăn khi viết tập lệnh này. Ví dụ: tôi nghĩ rằng tôi có thể sử dụng phương thức document.querySelectorAll được mô tả trong Chương 2 để chọn các phần tử đầu vào bằng bộ chọn đầu vào, nhưng hóa ra loại bộ lọc thuộc tính này không hoạt động với phương thức này. Sau đó, tôi đã cố gắng tránh lặp lại lệnh gọi phương thức để chỉ định giá trị cho font-size bằng cách kết hợp kết quả của hai getElementsByTagName nhưng trải nghiệm này khá khó khăn. Tôi không muốn làm bạn nhàm chán với các chi tiết, đặc biệt nếu bạn rất quan tâm đến jQuery và đang đọc cuốn sách này. Nhưng điều tôi muốn nói là jQuery cung cấp mức độ linh hoạt và tính biểu cảm mà DOM API cơ bản không thể đạt được.
Câu trả lời tuyệt vời của torazaburo đã cho tôi một ý tưởng. Có thể một hàm như liên kết, thay vì nướng bộ thu (cái này) trong lệnh gọi bên trong bao đóng, hãy đặt nó làm thuộc tính trên đối tượng hàm và sau đó sử dụng nó khi gọi nó. Điều này sẽ cho phép thử lại cập nhật thuộc tính trước khi thực hiện lệnh gọi, mang lại kết quả mong đợi của lần thử lại một cách hiệu quả.
Ví dụ,
function original_fn() ( document.writeln(JSON.stringify(this)); ) Function.prototype.rebind = function(obj) ( var fn = this; varbound = function func() ( fn.call(func.receiver, đối số); ràng buộc.receiver = obj; ràng buộc.rebind = function(obj) ( this.receiver = obj; return this; ) returnbound_fn = original_fn.rebind((foo: "bar")) ; ràng buộc_fn(); var rebound_fn =bound_fn.rebind((fred: "barney")); hồi phục_fn();
Hoặc đầu ra từ node.js trông như thế này.
( foo: "bar" ) ( fred: "barney" )
Lưu ý rằng lệnh gọi rebind đầu tiên gọi lệnh đã được thêm vào Function.prototype như nó được gọi trong hàm original_fn thông thường, nhưng lệnh gọi thứ hai gọi rebind đã được thêm làm thuộc tính của hàm bị ràng buộc (và mọi lệnh gọi tiếp theo sẽ cũng gọi như vậy). Việc rebind này chỉ đơn giản là cập nhật bộ thu và trả về cùng một đối tượng hàm.
Có thể truy cập thuộc tính người nhận trong hàm bị ràng buộc bằng cách thực hiện nó biểu thức hàm được đặt tên .
2018-12-04T00:00Z
Thật hấp dẫn khi nghĩ tới ràng buộc như một loại sửa đổi sử dụng tính năng mới này. Theo cách giải thích (không chính xác) này, mọi người nghĩ đến liên kết bằng cách thêm một loại cờ ma thuật nào đó vào một hàm yêu cầu nó sử dụng cái gì đó khác vào lần tiếp theo nó được gọi. Nếu đúng như vậy thì có thể "ghi đè" và thay đổi lá cờ thần kỳ. Rồi hỏi, lý do gì mà tự ý hạn chế khả năng làm việc này?
Nhưng thực tế đó không phải là cách nó hoạt động. liên kết tạo và trả về mới một hàm mà khi được gọi sẽ gọi hàm đầu tiên với một giá trị cụ thể. Hành vi của hàm mới được tạo này để sử dụng hàm đã chỉ định để gọi hàm ban đầu sẽ được ghi lại khi hàm được tạo. Nó không thể được thay đổi nhiều hơn các phần bên trong của bất kỳ hàm nào khác được hàm trả về có thể được thay đổi sau khi thực tế.
Nó có thể hữu ích để nhìn vào thực tế thực hiện đơn giản trói buộc:
// KHÔNG phải là ràng buộc thực sự; chỉ là một ví dụ Function.prototype.bind = function(ctxt) ( var fn = this; return function bind_fn() ( return fn.apply(ctxt, đối số); ); ) my_bound_fn = original_fn.bind(obj);
Như bạn có thể thấy, không nơi nào trong bind_fn hàm được trả về từ bind tham chiếu đến this mà hàm liên kết được gọi. Nó bị bỏ qua, vì vậy
My_bound_fn.call(999, arg) // 999 bị bỏ qua
Obj = ( fn: function () ( console.log(this); ) ); obj.fn = obj.fn.bind(other_obj); obj.fn(); // xuất ra other_obj; obj bị bỏ qua
Vì vậy, tôi có thể liên kết hàm được trả về từ liên kết "một lần nữa", nhưng điều này không đẩy lùi hàm ban đầu; nó chỉ liên kết với một chức năng bên ngoài mà không ảnh hưởng đến chức năng nội tại, vì nó đã được cấu hình để gọi chức năng cơ bản với bối cảnh (giá trị này) được chuyển tới bind . Tôi có thể liên kết nhiều lần, nhưng tất cả những gì tôi làm là tạo thêm chức năng bên ngoài, có thể bị ràng buộc bởi thứ gì đó, nhưng cuối cùng lại gọi hàm trong cùng được trả về từ liên kết đầu tiên.
Do đó, hơi sai lầm khi nói rằng liên kết "không thể bị ghi đè".
Nếu tôi muốn "khôi phục" một hàm, thì tôi chỉ cần tạo một ràng buộc mới cho hàm ban đầu. Vì vậy, nếu tôi liên kết nó một lần:
Hàm orig() ( ) my_bound_fn = orig.bind(my_obj);
và sau đó tôi muốn của tôi chức năng ban đầuđược gọi cùng với một số người khác thì tôi không kiểm tra lại chức năng liên quan.
Lời hứa chỉ mang tính tương đối tính năng mới JavaScript, cho phép bạn thực hiện các hành động bị trì hoãn - điều mà trước đây đã được giải quyết bằng lệnh gọi lại. Có một phần giới thiệu hay về công nghệ này trên trang web HTML5Rocks, tôi sẽ không kể lại.
Promise có hai phương thức (hiện chúng tôi đang quan tâm) - .then() và .catch() , trong đó các hàm xử lý được truyền tương ứng cho trạng thái “đã hoàn thành” và “bị từ chối”. Các phương thức này có thể được xâu chuỗi:prom.then().then().catch().then().catch().catch().… . Câu hỏi: những trình xử lý này được gọi theo thứ tự nào, chúng nhận được gì và tất cả phụ thuộc vào điều gì?
Trước tiên, chúng ta hãy xem cấu trúc của vũ hội.then().then() (ở đây vũ hội là một loại Promise nào đó). Prom.then() ở đây là gì? Đó rõ ràng là một Promise vì nó có các phương thức .then() và .catch(). Nó như thế nào nghĩa Lời hứa này? Có vẻ “tự nhiên” khi cho rằng đó là cùng một buổi vũ hội được truyền dọc theo chuỗi, nhưng thực tế không phải như vậy (và thật tốt là không phải như vậy).
Mỗi trình xử lý .then() và .catch() trả về một giá trị nào đó. Ngay cả khi một hàm không trả về một giá trị rõ ràng thì kết quả của nó vẫn là nghĩa không xác định. Các quy tắc sau đây được áp dụng:
- Nếu hàm trả về một Promise thì hàm đó sẽ trở thành Promise mới trong chuỗi;
- Nếu hàm trả về bất kỳ giá trị nào khác thì hàm đó được gói trong Promise.resolve(...) và trở thành Promise ở trạng thái hoàn thành;
- Cuối cùng, nếu một ngoại lệ xảy ra trong một hàm, giá trị của ngoại lệ đó sẽ được gói trong Promise.reject(...) và trở thành Promise ở trạng thái bị từ chối.
Ứng dụng hữu ích nhất của các quy tắc này là khả năng xử lý dữ liệu trên chuỗi. Ví dụ như thế này:
Get("data.json") .then(function(response) ( // phản hồi là dữ liệu văn bản return JSON.parse(response); )).then(function(response) ( // và ở đây phản hồi là đối tượng nhận được trong trình xử lý trước đó console.log("Yey JSON!", reply ));
Nhưng hãy quay trở lại với chuỗi tùy ý. Chúng ta có một Promise, tùy thuộc vào trạng thái của nó, nó gọi .then() hoặc .catch() , gần nhất với nó trong chuỗi. Trình xử lý được gọi trả về một Promise mới, nó lại gọi .then() hoặc .catch() , tùy theo giá trị nào gần nhất trong chuỗi. Và như thế.
Hãy đưa ra một ví dụ (tôi sẽ viết nó theo cú pháp ES6, nó đơn giản hơn):
Promise.reject("A") .then(x => ( console.log("THEN1", x); )) .catch(x => ( console.log("CATCH1", x); )) .then (x => ( console.log("THEN2", x); )).catch(x => ( console.log("CATCH2", x); ));
Chúng ta sẽ nhận được gì trong bảng điều khiển? Đó là gì:
CATCH1 A THEN2 không xác định
Tại sao vậy? Chúng ta có một Promise ở trạng thái không thành công, có nghĩa là nó sẽ gọi trình xử lý .catch() gần nhất trong chuỗi, đó là CATCH1. Trình xử lý này không trả về bất cứ thứ gì (tức là nó trả về không xác định), có nghĩa là đầu ra từ nó là hoàn thành Lời hứa có giá trị không xác định. Lời hứa đã hoàn thành sẽ gọi .then() gần nhất, đó là THEN2.
Một vi dụ khac:
Promise.reject("A") .catch(x => ( console.log("CATCH1", x); return Promise.reject("B"); )) .then(x => ( console.log(" THEN1", x); )).catch(x => ( console.log("CATCH2", x); )).then(x => ( console.log("THEN2", x); ));
Kết quả (tự tìm hiểu tại sao lại như vậy):
CATCH1 A CATCH2 B THEN2 không xác định
Nhân tiện, ở đây có vài cái cào dưới nước. Giả sử rằng .catch() gặp lỗi trong buổi vũ hội. Nếu buổi lễ thành công thì .then() sẽ được gọi, nhưng nếu xảy ra lỗi hoặc ngoại lệ nào đó trong trình xử lý của nó thì nó sẽ trả về một Promise mới ở trạng thái không thành công, điều này sẽ khiến .catch() được thực thi, điều này sẽ rất có thể không hoạt động chính xác.k. mong đợi dữ liệu hoàn toàn khác.
Do đó, để đảm bảo rằng cả hai trình xử lý .then() và .catch() chỉ xử lý Promise đã cho, bạn không nên sử dụng một chuỗi lệnh gọi mà hãy gọi .then() với hai đối số. Như thế này: vũ hội.then(onResolve, onReject). Sau đó, bất kể điều gì xảy ra trong onResolve, onReject sẽ không được gọi.
Chuỗi phương thức là một mô hình phổ biến trong thế giới JavaScript. Hướng dẫn này sẽ cung cấp giải thích ngắn gọn về chuỗi phương thức là gì, đưa ra ví dụ thực tế về cách jQuery sử dụng chuỗi phương thức và hướng dẫn bạn cách thêm chuỗi phương thức vào các lớp của riêng bạn. Bắt đầu nào.
Chuỗi phương thức là gì?Chuỗi phương thức là một kỹ thuật có thể được sử dụng để đơn giản hóa mã trong các tình huống liên quan đến việc gọi liên tiếp nhiều hàm trên cùng một đối tượng. Đây là một ví dụ về bạn thế nào có thể sử dụng chuỗi phương thức khi sử dụng jQuery.
/** Ví dụ về chuỗi phương thức trong jQuery */ ///////////////////////// // KHÔNG CÓ CHUỖI PHƯƠNG PHÁP var $div = $ ("# my -div" ); // gán cho var $div . css ("nền", "xanh"); // đặt BG $div . chiều cao(100); // thiết lập chiều cao $div . fadeIn(200); // hiển thị phần tử /////////////////////// // VỚI PHƯƠNG PHÁP CHUỖI $ ("#my-div" ). css("nền", "màu xanh"). chiều cao(100). fadeIn(200); // thường được chia thành nhiều dòng: $ ("#my-div" ). css ("nền", "xanh"). chiều cao (100) . fadeIn(200);
Như bạn có thể thấy, việc sử dụng chuỗi phương thức có thể giúp mã gọn gàng hơn một chút, tuy nhiên một số nhà phát triển không thích phong cách trực quan của chuỗi phương thức và chọn không sử dụng nó.
Hiểu về chuỗi phương phápTrong ví dụ của chúng tôi, chúng tôi sẽ định nghĩa một lớp tùy chỉnh với một vài phương thức để gọi. Hãy tạo một lớp Kitten:
// định nghĩa lớp var Kitten = function () ( this . name = "Garfield" ; this . color = "nâu" ; this . giới tính = "nam" ; ); Mèo con. nguyên mẫu. setName = function (tên) ( this . name = name ; ); Mèo con. nguyên mẫu. setColor = function (màu) ( this . color = color ; ); Mèo con. nguyên mẫu. setGender = function (giới tính) ( this . GIỚI TÍNH = giới tính ; ); Mèo con. nguyên mẫu. save = function () ( console . log (" Saving " + this . name + ", the " + this . color + " " + this . giới tính + " mèo con..." ); // lưu vào cơ sở dữ liệu tại đây.. . );
Bây giờ, hãy khởi tạo một đối tượng mèo con từ lớp của chúng ta và gọi các phương thức của nó.
var bob = Mèo con mới(); bob. setName("Bob"); bob. setColor("đen"); bob. setGender("nam"); bob. cứu(); // ĐẦU RA: // >
Sẽ tốt hơn nếu chúng ta có thể loại bỏ một số sự lặp lại này? Chuỗi phương pháp sẽ là hoàn hảo cho việc này. Vấn đề duy nhất là hiện tại tính năng này không hoạt động. Đây là lý do tại sao:
var bob = Mèo con mới(); bob. setName("Bob"). setColor("đen"); // LỖI: // >
Để hiểu rõ hơn lý do tại sao điều này không hoạt động, chúng tôi sẽ sắp xếp lại mã ở trên một chút.
var bob = Mèo con mới(); var tmp = bob . setName("Bob"); tmp. setColor("đen"); // LỖI: // > Uncaught TypeError: Không thể gọi phương thức "setColor" của không xác định
Điều này trả về cùng một lỗi. Điều này là do hàm setName() không trả về giá trị, do đó tmp được gán giá trị unknown . Cách điển hình để kích hoạt chuỗi phương thức là trả về đối tượng hiện tại tại kết thúc của mọi chức năng.
Thực hiện chuỗi phương phápHãy viết lại lớp Kitten với khả năng xâu chuỗi các phương thức.
// định nghĩa lớp var Kitten = function () ( this . name = "Garfield" ; this . color = "nâu" ; this . giới tính = "nam" ; ); Mèo con. nguyên mẫu. setName = function (tên) ( this . name = name ; return this ; ); Mèo con. nguyên mẫu. setColor = function (color) ( this . color = color ; return this ; ); Mèo con. nguyên mẫu. setGender = function (giới tính) ( this . GIỚI TÍNH = giới tính ; trả lại cái này ; ); Mèo con. nguyên mẫu. save = function () ( console . log (" Saving " + this . name + ", the " + this . color + " " + this . giới tính + " mèo con..." ); // lưu vào cơ sở dữ liệu tại đây.. . trả lại cái này ;
Bây giờ, nếu chúng ta chạy lại đoạn mã trước đó, biến tmp sẽ tham chiếu cùng một đối tượng với biến bob , như sau:
var bob = Mèo con mới(); var tmp = bob . setName("Bob"); tmp. setColor("đen"); bảng điều khiển. log(tmp === bob); // ĐẦU RA: // > đúng
Để rút ngắn điều này hơn nữa, chúng ta thậm chí không cần tạo biến bob . Đây là hai ví dụ với và không có chuỗi phương thức trên lớp mới của chúng tôi:
/////////////////// // KHÔNG CÓ CHUỖI var bob = new Kitten (); bob. setName("Bob"); bob. setColor("đen"); bob. setGender("nam"); bob. cứu(); // OUTPUT: // > cứu Bob, chú mèo con đực màu đen... ////////////////// // VỚI CHUỖI New Kitten () . setName("Bob"). setColor ("đen") . setGender("nam"). cứu(); // OUTPUT:// > cứu Bob, chú mèo đực màu đen...
Bằng cách sử dụng chuỗi phương thức, chúng ta có được mã sạch hơn và dễ hiểu hơn nhiều.
Phần kết luậnĐó là nó! Chuỗi phương thức có thể là một kỹ thuật rất hữu ích nên có trong túi công cụ lập trình của bạn. Nếu bạn có bất kỳ câu hỏi nào, hãy cho tôi biết trong phần bình luận bên dưới.
