ngữ cảnh để sử dụng cuộc gọi và áp dụng trong Javascript?

Question

Mọi người có thể giải thích ngữ cảnh để sử dụng các phương thức call và apply trong Javascript không?

Tại sao sử dụng call và apply thay vì gọi trực tiếp một chức năng?

Answer 1

Chỉ khi bạn sử dụng call hoặc apply bạn có thể sửa đổi ngữ cảnh this bên trong hàm.

Không giống như các ngôn ngữ khác - trong JavaScript this không đề cập đến đối tượng hiện tại - thay vì ngữ cảnh thực thi và có thể được đặt bởi người gọi.

Nếu bạn gọi một chức năng bằng cách sử dụng từ khóa newthis một cách chính xác sẽ giới thiệu đến các đối tượng mới (bên trong hàm constructor) ..

Nhưng trong mọi trường hợp khác - this sẽ đề cập đến đối tượng toàn cầu trừ khi thiết lập một cách rõ ràng thông qua hãy gọi

Answer 2

Bạn sử dụng call hoặc apply khi bạn muốn chuyển giá trị this khác nhau cho hàm. Về bản chất, điều này có nghĩa là bạn muốn thực hiện một hàm như thể nó là một phương thức của một đối tượng cụ thể. Sự khác biệt duy nhất giữa hai là call hy vọng các tham số được phân tách bằng dấu phẩy, trong khi apply mong đợi các tham số trong một mảng.

Một ví dụ từ Mozilla's apply page, nơi nhà xây dựng đang bị xiềng xích:

function Product(name, price) { 
    this.name = name; 
    this.price = price; 

    if (price < 0) 
     throw RangeError('Cannot create product "' + name + '" with a negative price'); 
    return this; 
} 

function Food(name, price) { 
    Product.apply(this, arguments); 
    this.category = 'food'; 
} 
Food.prototype = new Product(); 

function Toy(name, price) { 
    Product.apply(this, arguments); 
    this.category = 'toy'; 
} 
Toy.prototype = new Product(); 

var cheese = new Food('feta', 5); 
var fun = new Toy('robot', 40); 

gì Product.apply(this, arguments) làm như sau: Các nhà xây dựng Product được áp dụng như một chức năng trong mỗi Food và Toy nhà thầu, và mỗi một trong các đối tượng các phiên bản đang được chuyển thành this. Do đó, mỗi Food và Toy hiện có các thuộc tính this.name và this.category.

Answer 3

Nếu bạn có kinh nghiệm với jQuery, bạn sẽ biết rằng hầu hết các chức năng đều sử dụng đối tượng this. Ví dụ: collection.each(function() { ... }); Bên trong hàm này, "this" đề cập đến đối tượng trình lặp. Đây là một cách sử dụng có thể.

Cá nhân tôi đã sử dụng .apply() để triển khai hàng đợi yêu cầu - tôi đẩy một loạt đối số vào hàng đợi và khi đến lúc thực thi nó, tôi lấy một phần tử và chuyển nó làm đối số cho hàm xử lý sử dụng .apply(), do đó làm cho mã sạch hơn sau đó nếu phải vượt qua một mảng đối số như một đối số đầu tiên. Đó là một ví dụ khác.

Nói chung, xin lưu ý rằng những cách gọi hàm này tồn tại và bạn có thể thấy một ngày nào đó thuận tiện để sử dụng để triển khai chương trình của mình.

Answer 4

Bạn sử dụng .call() khi bạn muốn làm cho hàm thực thi với giá trị this khác. Nó đặt giá trị this như được chỉ định, đặt các đối số như được chỉ định và sau đó gọi hàm. Sự khác biệt giữa .call() và chỉ thực thi hàm là giá trị của con trỏ this khi hàm thực thi.Khi bạn thực thi hàm bình thường, javascript sẽ quyết định con trỏ this sẽ là gì (thường là ngữ cảnh chung window trừ khi hàm được gọi là phương thức trên đối tượng). Khi bạn sử dụng .call(), bạn chỉ định chính xác những gì bạn muốn this được đặt thành.

Bạn sử dụng .apply() khi đối số bạn muốn chuyển đến hàm nằm trong một mảng. .apply() cũng có thể khiến chức năng thực thi với giá trị this cụ thể. .apply() thường được sử dụng nhất khi bạn có số đối số không xác định đến từ một số nguồn khác. Nó thường được sử dụng quá vượt qua các đối số từ một cuộc gọi chức năng khác bằng cách sử dụng biến cục bộ đặc biệt arguments, trong đó có một mảng đối số được chuyển đến hàm hiện tại của bạn.

Tôi tìm thấy trang tham chiếu MDN cho .call() và .apply() hữu ích.

Answer 5

Tôi không thể nghĩ ra bất kỳ tình huống bình thường nào khi đặt thisArg thành thứ gì đó khác nhau là mục đích sử dụng.

Mục đích của việc áp dụng là chuyển một mảng giá trị cho một hàm muốn các giá trị đó làm đối số.

Nó đã được thay thế trong tất cả việc sử dụng hàng ngày thông thường của nhà điều hành dàn trải.

ví dụ:

// Finding the largest number in an array 
`Math.max.apply(null, arr)` becomes `Math.max(...arr)` 

// Inserting the values of one array at the start of another 
Array.prototype.unshift.apply(arr1, arr2); 
// which becomes 
arr1 = [...arr2, ...arr1] 

Answer 6

Nếu bạn có kinh nghiệm với Object Oriented Programming sau đó gọi và áp dụng sẽ có ý nghĩa nếu bạn so sánh nó với thừa kế và ghi đè các thuộc tính hay phương thức/chức năng của lớp cha mẹ từ lớp trẻ. Điều này tương tự với lệnh gọi javascript như sau:

function foo() { 
    this.helloworld = "hello from foo" 
} 
foo.prototype.print = function() { 
    console.log(this.helloworld) 
} 

foo.prototype.main = function() { 
    this.print() 
} 


function bar() { 
    this.helloworld = 'hello from bar' 
} 
// declaring print function to override the previous print 
bar.prototype.print = function() { 
    console.log(this.helloworld) 
} 

var iamfoo = new foo() 

iamfoo.main() // prints: hello from foo 

iamfoo.main.call(new bar()) // override print and prints: hello from bar