2016-01-14 16 views
9

Trong một trong các câu hỏi của tôi, tôi nhận được mã sau đây là một trong các câu trả lời. Sự hiểu biết của tôi về ngôn ngữ đã đến bây giờ đã tốt hơn rất nhiều, chỉ có một câu hỏi nhỏ.Khái niệm xây dựng trong javascript

var person = function() { 
    this.firstName = ""; 
    this.lastName = ""; 
} 

person.prototype.showFullName = function() { 
    console.log(this.firstName + " " + this.lastName); 
} 

var perObj = new person(); 
perObj.firstName = "Penelope"; 
perObj.lastName = "Barrymore"; 
perObj.showFullName(); 

Xét đối tượng,

var person = function() { 
    this.firstName = ""; 
    this.lastName = ""; 
} 

và khi tôi gọi đối tượng này sử dụng,

var perObj = new person(); 

Đây có phải là tương tự như constructor loại điều?

Khoảnh khắc một mã

var perObj = new person(); 

được gọi sẽ hai dòng sau đây sẽ tự động được thực hiện?

this.firstName = ""; 
this.lastName = ""; 

Và cũng trong một trong những blog tôi đang học nếu tên tập tin là Samplescript.js và nếu một hàm được viết bằng cách sử dụng cùng tên bên này như var Samplescript=function(){}, chức năng này sẽ được coi là một nhà xây dựng? Hãy làm rõ tôi điều này.

Tôi không nhận được bất kỳ câu trả lời thỏa đáng nào liên quan đến người xây dựng mặc dù về mặt lý thuyết mọi thứ rõ ràng, trong ví dụ này, cách viết của nó tạo ra nhiều hiểu biết rõ ràng.

+0

http: // javascript .info/tutorial/constructor có thể giúp bạn –

+0

Bạn có ý nghĩa gì với "tương tự"? Có, 'person' * là * một hàm tạo. – Bergi

Trả lời

13

Trước hết, person là một hàm JavaScript thông thường. Khi bạn gọi nó, tất nhiên, các dòng:

this.firstName = ""; 
this.lastName = ""; 

được thực thi. Hàm xây dựng là một khái niệm hơn là một cái gì đó thực sự tồn tại trong ngôn ngữ JS. Bạn cần các nhà thầu để tạo các đối tượng tương tự mới bằng cách gọi new MyCtr(). Đồng thời, bạn cần các chức năng thông thường để gói gọn một phần logic và làm cho nó có thể tái sử dụng ở những nơi khác nhau mà không cần sao chép/dán mã.

Bạn có thể sử dụng tất cả các hàm trong JavaScript làm hàm tạo. Chỉ cần thêm new từ khóa trước biểu thức cuộc gọi chức năng. Điều này thay đổi ngữ cảnh thực hiện chức năng. Nếu không có new, hàm sẽ được thực thi đối với đối tượng toàn cầu (window trong trình duyệt). Và this biến bên trong hàm đề cập đến ngữ cảnh.

Không phải mọi chức năng đều sẵn sàng làm người xây dựng. Thông thường, chức năng hàm dựng đang làm điều gì đó với biến số this là tham chiếu đến đối tượng được tạo trong cuộc gọi new MyCtr(). Ngoài ra, chức năng hàm tạo không bao giờ trả về giá trị.

Cho phép xem xét vài ví dụ (bạn có thể thực hiện trực tiếp trong giao diện điều khiển của trình duyệt):

function foo() { 
    this.a = 1; 
} 

foo(); // using function as a regular function. Ctx is window. 
console.log(window.a); // prints "1" 
foo.call(window); // explicitly specify execution ctx. The same as just foo() call 

var instance = new foo(); // using foo as a constructor 
console.log(instance.a); // prints "1" 

// actually you can do it without new keyword 
var instance = {}; // manually create new object 
foo.call(instance); // manually call foo against this object 
console.log(instance.a); // prints "1" 

// However, the code above is not strictly equivalent to the code using new. 
// It omits the concept of prototype, but it's enough for our current task. 

Về chức năng và các tập tin. Không có điều như vậy trong ngôn ngữ như trong Java mà mỗi lớp phải được đặt trong tệp riêng biệt. Bạn có thể đặt tất cả các chức năng của bạn trong một tập tin và sau đó sử dụng nó như là các nhà xây dựng hay không.Tuy nhiên, cách tốt nhất là cư trú một hàm khởi tạo (đọc là lớp) cho mỗi một tệp (được gọi là mô-đun).

+3

"* Bạn có thể sử dụng tất cả các hàm trong JavaScript làm hàm tạo. *" - không đúng sự thật. Có các đối tượng có thể xây dựng và các đối tượng có thể gọi được, và không phải tất cả chúng đều là cả hai. (những cái được tạo ra bằng cách sử dụng từ khoá 'function' là, mặc dù) – Bergi

+0

@Bergi, bạn có nghĩa là http://stackoverflow.com/questions/32928810/function-prototype-is-a-function#32929083 này không? (xin hãy nhìn vào phần cuối của câu trả lời) –

+0

Có, mũi tên và phương pháp ES6 và các phương pháp khác. – Bergi

3

Dường như có một số lỗ hổng trong sự hiểu biết của bạn. Hy vọng rằng tôi có thể giúp đỡ.

Thứ nhất, cú pháp thông thường truyền thống cho một hàm constructor function CapitalisedFunctionName()

function Person() { 
    this.firstName = ""; 
    this.lastName = ""; 
} 

Lưu ý: đây không phải là một đối tượng. Từ câu hỏi của bạn, điều này không rõ ràng bạn hiểu điều đó.

Tại thời điểm này, bạn có thể thêm vào mẫu thử nghiệm mà từ đó tất cả các đối tượng mới được tạo từ hàm tạo đó sẽ kế thừa. Phương pháp được sửa đổi này từ ví dụ của bạn sẽ có sẵn cho tất cả các đối tượng mới.

Person.prototype.fullname = function() { 
    return this.firstName + " " + this.lastName; 
} 

Bây giờ, hàm constructor cho phép bạn tạo mới trường hợp đối tượng. Vì vậy, khi bạn viết:

var perObj = new person(); 

bạn gọi hàm constructor, tạo ra một trường hợp đối tượng mới, và gán dụ đó để biến perObj.

Khi bạn tạo ra một trường hợp đối tượng mới đối tượng chứa firstNamelastName thuộc tính mà có thể được truy cập như vậy:

perObj.firstName; 
perObj.lastName; 

Lưu ý vào lúc này những chỉ có chuỗi rỗng giao cho họ.

Và bạn có thể gọi đó là phương pháp quá:

perObj.fullname(); 

Nhưng, một lần nữa, vào thời điểm này, perObj.fullname(); sẽ không cung cấp cho bạn bất cứ điều gì vì firstNamelastName là chuỗi rỗng.

Bạn có thể định nghĩa chúng như bạn có trong ví dụ của bạn: `perObj.lastName = 'Jones', hoặc bạn thậm chí có thể thay đổi cách bạn tạo đối tượng ở nơi đầu tiên mà thường là phương pháp ưa thích:

Hãy xem xét điều này:

function Person(first, last) { 
    this.firstName = first; 
    this.lastName = last; 
} 

var perObj = new Person('Dave', 'Jones'); 

Bây giờ perObj sẽ có những tính chất điền sẵn:

perObj.firstName // Dave 
perObj.lastName // Jones 
perObj.fullname() // Dave Jones 
+1

Để chính xác, đối tượng 'Person' IS của chính nó. Tuy nhiên, tôi đồng ý, rằng điều này không quan trọng cho lời giải thích này. –

8

bất kỳ hàm nào trong JavaScript có thể hoạt động như một hàm tạo khi hàm được gọi với toán tử mới.

Bây giờ, nhà xây dựng làm gì? nó tạo/khởi tạo một đối tượng từ hàm khởi tạo. như được hiển thị trong hình bên dưới.

enter image description here

LINK, nó giải thích các nguyên tắc cơ bản rất rõ ràng.

this là gì?

khi hàm hàm dựng này được gọi với mới, this điểm đến đối tượng mới được tạo tại lời gọi đó. và trong đối tượng đó, chúng tôi đặt firtNamelastName (đó là khởi tạo đối tượng mới được tạo).

Bây giờ khi chúng ta thêm phương pháp để nguyên mẫu của các nhà xây dựng, đang được chia sẻ giữa tất cả các đối tượng được tạo bằng cách sử dụng chức năng xây dựng (hình ảnh giải thích nó thắp sáng chút)

và liên quan đến truy vấn cuối cùng của bạn " Và cũng trong một trong những blog tôi đã nghiên cứu nếu tên tệp là Samplescript.js và nếu một hàm được viết bằng cùng tên trong hàm này như var Samplescript = function() {}, hàm này có được coi là một hàm tạo không? tôi "

mọi chức năng trong JavaScript có thể hoạt động như một cấu trúc hoặc khi hàm được gọi với toán tử mới, và nó không phải là cách mà blog nói.

vì vậy hãy dừng đọc blog mà, liên kết tôi cung cấp là một điểm khởi đầu rất tốt

+0

Được thăng hạng. Cảm ơn các liên kết. Mặc dù tôi không có thời gian để đi qua nó bây giờ, nó có vẻ rất nhiều thông tin và có giá trị. – LiweiZ

1

Bất kỳ chức năng đó được gọi với new hành vi khai thác như một constructor, vì vậy this sẽ được giao cho các đối tượng mới và các điểm đến nó. Ngoài ra mã bên trong hàm khởi tạo sẽ được thực thi và đối tượng mới (perObj) sẽ nhận được các thuộc tính.

1

Có một vài cách để xác định các lớp Javascript và gọi chúng bằng một hàm tạo. Nhưng hãy nhớ rằng JavaScript thực sự là không có lớp.

  1. Sử dụng một hàm
  2. Việc sử dụng các chữ Object
  3. Một singleton sử dụng một hàm

Một bài viết tuyệt vời về nó có thể được tìm thấy ở đây: 3 ways to define a Javascript class