Chức năng gọi trong đối tượng javascript

Bản tóm tắt. trong hướng dẫn này, bạn sẽ tìm hiểu về phương thức

function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

Code language: JavaScript (javascript)2 của JavaScript và cách sử dụng nó hiệu quả hơn

Giới thiệu về phương thức call() trong JavaScript

Trong JavaScript, một hàm là một thể hiện của loại

function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

Code language: JavaScript (javascript)3. Ví dụ

function add(x, y) { return x + y; } console.log(add instanceof Function); // true

Code language: JavaScript (javascript)

Loại

function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

Code language: JavaScript (javascript)4 có phương thức

function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

Code language: JavaScript (javascript)2 với cú pháp như sau

functionName.call(thisArg, arg1, arg2, ...);

Code language: JavaScript (javascript)

Trong cú pháp này, phương thức

function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

Code language: JavaScript (javascript)2 gọi một hàm

function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

Code language: JavaScript (javascript)7 với các đối số (

function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

Code language: JavaScript (javascript)8,

function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

Code language: JavaScript (javascript)9,…) và đối tượng

function add(x, y) { return x + y; } let result = add.call(this, 10, 20); console.log(result); // 30

Code language: JavaScript (javascript)0 được đặt thành

function add(x, y) { return x + y; } let result = add.call(this, 10, 20); console.log(result); // 30

Code language: JavaScript (javascript)1 bên trong hàm

• function add(x, y) { return x + y; } let result = add.call(this, 10, 20); console.log(result); // 30

  Code language: JavaScript (javascript)1 là đối tượng mà đối tượng

  function add(x, y) { return x + y; } let result = add.call(this, 10, 20); console.log(result); // 30

  Code language: JavaScript (javascript)0 tham chiếu bên trong hàm

  function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

  Code language: JavaScript (javascript)7

• function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

  Code language: JavaScript (javascript)8,

  function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

  Code language: JavaScript (javascript)9,. là các đối số hàm được truyền vào

  function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

  Code language: JavaScript (javascript)7

Phương thức

function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

Code language: JavaScript (javascript)2 trả về kết quả của việc gọi phương thức

function add(x, y) { return x + y; } let result = add.call(this, 10, 20); console.log(result); // 30

Code language: JavaScript (javascript)9

Ví dụ sau định nghĩa hàm

var greeting = 'Hi'; var messenger = { greeting: 'Hello' } function say(name) { console.log(this.greeting + ' ' + name); }

Code language: JavaScript (javascript)0 và gọi nó bình thường

function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

Code language: JavaScript (javascript)

Sau đây gọi hàm

var greeting = 'Hi'; var messenger = { greeting: 'Hello' } function say(name) { console.log(this.greeting + ' ' + name); }

Code language: JavaScript (javascript)0 nhưng thay vào đó hãy sử dụng phương thức

function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

Code language: JavaScript (javascript)2

function add(x, y) { return x + y; } let result = add.call(this, 10, 20); console.log(result); // 30

Code language: JavaScript (javascript)

Theo mặc định,

var greeting = 'Hi'; var messenger = { greeting: 'Hello' } function say(name) { console.log(this.greeting + ' ' + name); }

Code language: JavaScript (javascript)3 bên trong hàm được đặt thành đối tượng toàn cầu i. e. ,

var greeting = 'Hi'; var messenger = { greeting: 'Hello' } function say(name) { console.log(this.greeting + ' ' + name); }

Code language: JavaScript (javascript)4 trong trình duyệt web và

var greeting = 'Hi'; var messenger = { greeting: 'Hello' } function say(name) { console.log(this.greeting + ' ' + name); }

Code language: JavaScript (javascript)5 trong Node. js

Lưu ý rằng ở chế độ nghiêm ngặt,

function add(x, y) { return x + y; } let result = add.call(this, 10, 20); console.log(result); // 30

Code language: JavaScript (javascript)0 bên trong hàm được đặt thành

var greeting = 'Hi'; var messenger = { greeting: 'Hello' } function say(name) { console.log(this.greeting + ' ' + name); }

Code language: JavaScript (javascript)7 thay vì đối tượng chung

Xem xét ví dụ sau

var greeting = 'Hi'; var messenger = { greeting: 'Hello' } function say(name) { console.log(this.greeting + ' ' + name); }

Code language: JavaScript (javascript)

Bên trong hàm

var greeting = 'Hi'; var messenger = { greeting: 'Hello' } function say(name) { console.log(this.greeting + ' ' + name); }

Code language: JavaScript (javascript)8, chúng ta tham chiếu tới giá trị

var greeting = 'Hi'; var messenger = { greeting: 'Hello' } function say(name) { console.log(this.greeting + ' ' + name); }

Code language: JavaScript (javascript)9 thông qua giá trị

function add(x, y) { return x + y; } let result = add.call(this, 10, 20); console.log(result); // 30

Code language: JavaScript (javascript)0. Nếu bạn chỉ gọi hàm

var greeting = 'Hi'; var messenger = { greeting: 'Hello' } function say(name) { console.log(this.greeting + ' ' + name); }

Code language: JavaScript (javascript)8 thông qua phương thức

function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

Code language: JavaScript (javascript)2 như sau

say.call(this,'John');

Code language: JavaScript (javascript)

Nó sẽ hiển thị đầu ra sau cho bảng điều khiển

"Hi John"

Code language: JavaScript (javascript)

Tuy nhiên, khi bạn gọi phương thức

function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

Code language: JavaScript (javascript)2 của đối tượng hàm

say.call(this,'John');

Code language: JavaScript (javascript)4 và truyền đối tượng

say.call(this,'John');

Code language: JavaScript (javascript)5 làm giá trị

function add(x, y) { return x + y; } let result = add.call(this, 10, 20); console.log(result); // 30

Code language: JavaScript (javascript)0

say.call(messenger,'John');

Code language: JavaScript (javascript)

đầu ra sẽ là

"Hello John"

Code language: JavaScript (javascript)

Trong trường hợp này, giá trị

function add(x, y) { return x + y; } let result = add.call(this, 10, 20); console.log(result); // 30

Code language: JavaScript (javascript)0 bên trong hàm

var greeting = 'Hi'; var messenger = { greeting: 'Hello' } function say(name) { console.log(this.greeting + ' ' + name); }

Code language: JavaScript (javascript)8 tham chiếu đối tượng

say.call(this,'John');

Code language: JavaScript (javascript)5, không phải đối tượng toàn cục

Sử dụng phương thức call() của JavaScript để xâu chuỗi các hàm tạo cho một đối tượng

Bạn có thể sử dụng phương thức

function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

Code language: JavaScript (javascript)2 để xâu chuỗi các hàm tạo của một đối tượng. Xem xét ví dụ sau

function Box(height, width) { this.height = height; this.width = width; } function Widget(height, width, color) { Box.call(this, height, width); this.color = color; } let widget = new Widget('red', 100, 200); console.log(widget);

Code language: JavaScript (javascript)

đầu ra

functionName.call(thisArg, arg1, arg2, ...);

Code language: JavaScript (javascript)0

trong ví dụ này

• Đầu tiên, khởi tạo đối tượng

  "Hi John"

  Code language: JavaScript (javascript)1 với hai thuộc tính.

  "Hi John"

  Code language: JavaScript (javascript)2 và

  "Hi John"

  Code language: JavaScript (javascript)3
• Thứ hai, gọi phương thức

  function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

  Code language: JavaScript (javascript)2 của đối tượng

  "Hi John"

  Code language: JavaScript (javascript)1 bên trong đối tượng

  "Hi John"

  Code language: JavaScript (javascript)6, đặt giá trị

  function add(x, y) { return x + y; } let result = add.call(this, 10, 20); console.log(result); // 30

  Code language: JavaScript (javascript)0 cho đối tượng

  "Hi John"

  Code language: JavaScript (javascript)6

Sử dụng phương thức call() của JavaScript để mượn hàm

Ví dụ sau minh họa cách sử dụng phương thức call() để mượn các hàm

functionName.call(thisArg, arg1, arg2, ...);

Code language: JavaScript (javascript)1

đầu ra

functionName.call(thisArg, arg1, arg2, ...);

Code language: JavaScript (javascript)2

Làm thế nào nó hoạt động

Đầu tiên, định nghĩa một đối tượng xe ô tô với một tên thuộc tính và ba phương thức

"Hi John"

Code language: JavaScript (javascript)9,

say.call(messenger,'John');

Code language: JavaScript (javascript)0 và

say.call(messenger,'John');

Code language: JavaScript (javascript)1

functionName.call(thisArg, arg1, arg2, ...);

Code language: JavaScript (javascript)3

Thứ hai, xác định đối tượng máy bay bằng một tên thuộc tính và một phương thức

functionName.call(thisArg, arg1, arg2, ...);

Code language: JavaScript (javascript)4

Thứ ba, gọi phương thức

say.call(messenger,'John');

Code language: JavaScript (javascript)2 và

say.call(messenger,'John');

Code language: JavaScript (javascript)3 của đối tượng

say.call(messenger,'John');

Code language: JavaScript (javascript)4 và phương thức

say.call(messenger,'John');

Code language: JavaScript (javascript)5 của đối tượng

say.call(messenger,'John');

Code language: JavaScript (javascript)6. Tuy nhiên, chuyển

say.call(messenger,'John');

Code language: JavaScript (javascript)6 làm đối số đầu tiên vào các phương thức

say.call(messenger,'John');

Code language: JavaScript (javascript)2 và

say.call(messenger,'John');

Code language: JavaScript (javascript)3

functionName.call(thisArg, arg1, arg2, ...);

Code language: JavaScript (javascript)5

Bên trong các phương thức

say.call(messenger,'John');

Code language: JavaScript (javascript)2 và

say.call(messenger,'John');

Code language: JavaScript (javascript)3,

function add(x, y) { return x + y; } let result = add.call(this, 10, 20); console.log(result); // 30

Code language: JavaScript (javascript)0 tham chiếu đối tượng

say.call(messenger,'John');

Code language: JavaScript (javascript)6, không phải đối tượng

say.call(messenger,'John');

Code language: JavaScript (javascript)4. Do đó,

"Hello John"

Code language: JavaScript (javascript)5 trả về chuỗi

"Hello John"

Code language: JavaScript (javascript)6. Do đó, các phương thức xuất thông báo sau

functionName.call(thisArg, arg1, arg2, ...);

Code language: JavaScript (javascript)6

Về mặt kỹ thuật, đối tượng

say.call(messenger,'John');

Code language: JavaScript (javascript)6 mượn phương thức của đối tượng

say.call(messenger,'John');

Code language: JavaScript (javascript)2 và

say.call(messenger,'John');

Code language: JavaScript (javascript)3 của đối tượng

say.call(messenger,'John');

Code language: JavaScript (javascript)4. Và chức năng mượn đề cập đến một đối tượng sử dụng một phương thức của một đối tượng khác

Ví dụ sau minh họa cách đối tượng

function Box(height, width) { this.height = height; this.width = width; } function Widget(height, width, color) { Box.call(this, height, width); this.color = color; } let widget = new Widget('red', 100, 200); console.log(widget);

Code language: JavaScript (javascript)1 mượn phương thức

function Box(height, width) { this.height = height; this.width = width; } function Widget(height, width, color) { Box.call(this, height, width); this.color = color; } let widget = new Widget('red', 100, 200); console.log(widget);

Code language: JavaScript (javascript)2 của

function Box(height, width) { this.height = height; this.width = width; } function Widget(height, width, color) { Box.call(this, height, width); this.color = color; } let widget = new Widget('red', 100, 200); console.log(widget);

Code language: JavaScript (javascript)3 thông qua hàm

function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

Code language: JavaScript (javascript)2

functionName.call(thisArg, arg1, arg2, ...);

Code language: JavaScript (javascript)7

đầu ra

functionName.call(thisArg, arg1, arg2, ...);

Code language: JavaScript (javascript)8

Làm thế nào nó hoạt động

Đầu tiên, xác định hàm

function Box(height, width) { this.height = height; this.width = width; } function Widget(height, width, color) { Box.call(this, height, width); this.color = color; } let widget = new Widget('red', 100, 200); console.log(widget);

Code language: JavaScript (javascript)5 trả về giá trị true nếu số đó là số lẻ

functionName.call(thisArg, arg1, arg2, ...);

Code language: JavaScript (javascript)9

Thứ hai, xác định hàm

function Box(height, width) { this.height = height; this.width = width; } function Widget(height, width, color) { Box.call(this, height, width); this.color = color; } let widget = new Widget('red', 100, 200); console.log(widget);

Code language: JavaScript (javascript)6 chấp nhận bất kỳ số lượng đối số nào và trả về một mảng chỉ chứa các số lẻ

function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

Code language: JavaScript (javascript)0

Trong ví dụ này, đối tượng

function Box(height, width) { this.height = height; this.width = width; } function Widget(height, width, color) { Box.call(this, height, width); this.color = color; } let widget = new Widget('red', 100, 200); console.log(widget);

Code language: JavaScript (javascript)1 mượn phương thức filter() của đối tượng

function Box(height, width) { this.height = height; this.width = width; } function Widget(height, width, color) { Box.call(this, height, width); this.color = color; } let widget = new Widget('red', 100, 200); console.log(widget);

Code language: JavaScript (javascript)3

Thứ ba, gọi hàm

function Box(height, width) { this.height = height; this.width = width; } function Widget(height, width, color) { Box.call(this, height, width); this.color = color; } let widget = new Widget('red', 100, 200); console.log(widget);

Code language: JavaScript (javascript)6

function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

Code language: JavaScript (javascript)1

Trong phần hướng dẫn này, bạn đã học về phương thức

function add(x, y) { return x + y; } let result = add(10, 20); console.log(result); // 30

Code language: JavaScript (javascript)2 của JavaScript và cách sử dụng nó hiệu quả hơn

Làm cách nào để gọi hàm bên trong đối tượng trong JavaScript?

Bạn có thể đặt một hàm trong một đối tượng JavaScript không?

Làm cách nào để khai báo hàm trong đối tượng trong JavaScript?