Bạn có thể đặt một chức năng trong một đối tượng javascript không?

Ở đây chúng ta vừa sử dụng một Biểu thức Hàm để tạo một hàm và gán nó cho thuộc tính

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

2 của đối tượng

Sau đó, chúng ta có thể gọi nó là

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

3. Người dùng bây giờ có thể nói

Một chức năng là một thuộc tính của một đối tượng được gọi là phương thức của nó

Vì vậy, ở đây chúng ta có một phương thức

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

4 của đối tượng

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

1

Tất nhiên, chúng ta có thể sử dụng một hàm được khai báo trước như một phương thức, như thế này

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

Lập trình hướng đối tượng

Khi chúng ta viết mã bằng cách sử dụng các đối tượng để biểu diễn các thực thể, điều đó được gọi ngắn gọn là lập trình hướng đối tượng. “Ồ”

OOP là một điều lớn lao, một ngành khoa học thú vị của riêng nó. Làm thế nào để chọn đúng thực thể? . Các yếu tố của phần mềm hướng đối tượng có thể tái sử dụng” của E. Gamma, R. Mũ bảo hiểm, R. Johnson, J. Vissides hoặc “Phân tích và thiết kế hướng đối tượng với các ứng dụng” của G. Boochvà hơn thế nữa

phương pháp tốc ký

Tồn tại một cú pháp ngắn hơn cho các phương thức trong một đối tượng bằng chữ

// these objects do the same

user = {
  sayHi: function() {
    alert("Hello");
  }
};

// method shorthand looks better, right?
user = {
  sayHi() { // same as "sayHi: function(){...}"
    alert("Hello");
  }
};

Như đã minh họa, chúng ta có thể bỏ qua

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

6 và chỉ cần viết

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

7

Nói thật, các ký hiệu không hoàn toàn giống nhau. Có những khác biệt tinh tế liên quan đến kế thừa đối tượng (sẽ được đề cập sau), nhưng hiện tại chúng không quan trọng. Trong hầu hết các trường hợp, cú pháp ngắn hơn được ưu tiên

“cái này” trong các phương thức

Thông thường, một phương thức đối tượng cần truy cập thông tin được lưu trữ trong đối tượng để thực hiện công việc của nó

Chẳng hạn, mã bên trong

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

3 có thể cần tên của

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

1

Để truy cập đối tượng, một phương thức có thể sử dụng từ khóa

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

0

Giá trị của

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

0 là đối tượng “trước dấu chấm”, đối tượng được sử dụng để gọi phương thức

Ví dụ

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

2

Ở đây trong quá trình thực thi của

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

3, giá trị của

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

0 sẽ là

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

1

Về mặt kỹ thuật, cũng có thể truy cập đối tượng mà không cần

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

0, bằng cách tham chiếu nó thông qua biến bên ngoài

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

7

…Nhưng mã như vậy là không đáng tin cậy. Nếu chúng tôi quyết định sao chép

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

1 sang một biến khác, e. g.

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

7 và ghi đè lên

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

1 bằng thứ khác, sau đó nó sẽ truy cập sai đối tượng

Điều đó được chứng minh dưới đây

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

1

Nếu chúng tôi sử dụng

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

9 thay vì

// these objects do the same

user = {
  sayHi: function() {
    alert("Hello");
  }
};

// method shorthand looks better, right?
user = {
  sayHi() { // same as "sayHi: function(){...}"
    alert("Hello");
  }
};

0 bên trong

// these objects do the same

user = {
  sayHi: function() {
    alert("Hello");
  }
};

// method shorthand looks better, right?
user = {
  sayHi() { // same as "sayHi: function(){...}"
    alert("Hello");
  }
};

1, thì mã sẽ hoạt động

"cái này" không bị ràng buộc

Trong JavaScript, từ khóa

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

0 hoạt động không giống như hầu hết các ngôn ngữ lập trình khác. Nó có thể được sử dụng trong bất kỳ chức năng nào, ngay cả khi nó không phải là phương thức của đối tượng

Không có lỗi cú pháp trong ví dụ sau

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

6

Giá trị của

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

0 được đánh giá trong thời gian chạy, tùy thuộc vào ngữ cảnh

Chẳng hạn, ở đây, cùng một chức năng được gán cho hai đối tượng khác nhau và có “cái này” khác nhau trong các lời gọi

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

8

Quy tắc rất đơn giản. nếu

// these objects do the same

user = {
  sayHi: function() {
    alert("Hello");
  }
};

// method shorthand looks better, right?
user = {
  sayHi() { // same as "sayHi: function(){...}"
    alert("Hello");
  }
};

4 được gọi, thì

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

0 là

// these objects do the same

user = {
  sayHi: function() {
    alert("Hello");
  }
};

// method shorthand looks better, right?
user = {
  sayHi() { // same as "sayHi: function(){...}"
    alert("Hello");
  }
};

6 trong cuộc gọi của

// these objects do the same

user = {
  sayHi: function() {
    alert("Hello");
  }
};

// method shorthand looks better, right?
user = {
  sayHi() { // same as "sayHi: function(){...}"
    alert("Hello");
  }
};

7. Vì vậy, nó là

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

1 hoặc

// these objects do the same

user = {
  sayHi: function() {
    alert("Hello");
  }
};

// method shorthand looks better, right?
user = {
  sayHi() { // same as "sayHi: function(){...}"
    alert("Hello");
  }
};

9 trong ví dụ trên

Gọi không có đối tượng.

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

20

Chúng ta thậm chí có thể gọi hàm mà không cần đối tượng nào cả

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

6

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

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

0 là

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

22 ở chế độ nghiêm ngặt. Nếu chúng tôi cố gắng truy cập vào

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

9, sẽ có lỗi

Ở chế độ không nghiêm ngặt, giá trị của

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

0 trong trường hợp đó sẽ là đối tượng toàn cầu (

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

25 trong trình duyệt, chúng ta sẽ nói về nó sau trong chương Đối tượng toàn cầu). Đây là một hành vi lịch sử mà

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

26 sửa chữa

Thông thường cuộc gọi như vậy là một lỗi lập trình. Nếu có

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

0 bên trong một hàm, nó sẽ được gọi trong ngữ cảnh đối tượng

Hậu quả của việc không gắn kết

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

0

Nếu bạn đến từ một ngôn ngữ lập trình khác, thì có lẽ bạn đã quen với ý tưởng về "_______40 bị ràng buộc", trong đó các phương thức được định nghĩa trong một đối tượng luôn có _____40 tham chiếu tới đối tượng đó

Trong JavaScript,

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

0 là "miễn phí", giá trị của nó được đánh giá tại thời điểm gọi và không phụ thuộc vào nơi phương thức được khai báo, mà phụ thuộc vào đối tượng nào "trước dấu chấm"

Khái niệm về thời gian chạy được đánh giá

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

0 có cả ưu điểm và nhược điểm. Một mặt, một chức năng có thể được sử dụng lại cho các đối tượng khác nhau. Mặt khác, tính linh hoạt cao hơn tạo ra nhiều khả năng mắc sai lầm hơn.

Ở đây, vị trí của chúng tôi không phải là đánh giá liệu quyết định thiết kế ngôn ngữ này là tốt hay xấu. Chúng tôi sẽ hiểu cách làm việc với nó, cách nhận được lợi ích và tránh các vấn đề

Các chức năng mũi tên không có "cái này"

Chức năng mũi tên là đặc biệt. họ không có

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

0 “của riêng mình”. Nếu chúng ta tham chiếu

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

0 từ một hàm như vậy, thì nó được lấy từ hàm “bình thường” bên ngoài

Chẳng hạn, ở đây

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

75 sử dụng

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

0 từ phương thức

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

3 bên ngoài

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("Hello!");
};

user.sayHi(); // Hello!

0

Đó là một tính năng đặc biệt của arrow functions, nó rất hữu ích khi chúng ta thực sự không muốn có một

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

0 riêng mà muốn lấy nó từ ngữ cảnh bên ngoài. Ở phần sau của chương Các hàm mũi tên được xem xét lại, chúng ta sẽ tìm hiểu sâu hơn về các hàm mũi tên

Bản tóm tắt

• Các chức năng được lưu trữ trong các thuộc tính đối tượng được gọi là "phương thức"
• Các phương thức cho phép các đối tượng “hành động” như

  let user = {
    name: "John",
    age: 30
  };
  
  user.sayHi = function() {
    alert("Hello!");
  };
  
  user.sayHi(); // Hello!

  79
• Các phương thức có thể tham chiếu đối tượng là

  let user = {
    // ...
  };
  
  // first, declare
  function sayHi() {
    alert("Hello!");
  }
  
  // then add as a method
  user.sayHi = sayHi;
  
  user.sayHi(); // Hello!

  0

Giá trị của

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

0 được xác định trong thời gian chạy

• Khi một hàm được khai báo, nó có thể sử dụng

  let user = {
    // ...
  };
  
  // first, declare
  function sayHi() {
    alert("Hello!");
  }
  
  // then add as a method
  user.sayHi = sayHi;
  
  user.sayHi(); // Hello!

  0, nhưng

  let user = {
    // ...
  };
  
  // first, declare
  function sayHi() {
    alert("Hello!");
  }
  
  // then add as a method
  user.sayHi = sayHi;
  
  user.sayHi(); // Hello!

  0 đó không có giá trị cho đến khi hàm được gọi
• Một chức năng có thể được sao chép giữa các đối tượng
• Khi một hàm được gọi theo cú pháp “phương thức”.

  let user = {
    name: "John",
    age: 30
  };
  
  user.sayHi = function() {
    alert("Hello!");
  };
  
  user.sayHi(); // Hello!

  14, giá trị của

  let user = {
    // ...
  };
  
  // first, declare
  function sayHi() {
    alert("Hello!");
  }
  
  // then add as a method
  user.sayHi = sayHi;
  
  user.sayHi(); // Hello!

  0 trong cuộc gọi là

  let user = {
    name: "John",
    age: 30
  };
  
  user.sayHi = function() {
    alert("Hello!");
  };
  
  user.sayHi(); // Hello!

  16

Xin lưu ý rằng các chức năng mũi tên là đặc biệt. họ không có

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

0. Khi

let user = {
  // ...
};

// first, declare
function sayHi() {
  alert("Hello!");
}

// then add as a method
user.sayHi = sayHi;

user.sayHi(); // Hello!

0 được truy cập bên trong hàm mũi tên, nó được lấy từ bên ngoài

Bạn có thể thêm chức năng vào đối tượng không?

Bạn có thể đặt một hàm trong một lớp JavaScript không?

Là một chức năng chứa trong một đối tượng?