cố gắng tìm ra 'này' trong một số mã js

Question

<input type="button" value="Button 1" id="btn1" /> 
<input type="button" value="Button 2" id="btn2" /> 
<input type="button" value="Button 3" id="btn3" onclick="buttonClicked();"/> 


<script type="text/javascript"> 

    function buttonClicked(){   
    var text = (this === window) ? 'window' : this.id;  
    console.log(text);   
    } 

    var button1 = document.getElementById('btn1'); 
    var button2 = document.getElementById('btn2'); 


    button1.onclick = buttonClicked; 

    button2.onclick = function(){ 
    buttonClicked(); 
    }; 

</script> 

Câu hỏi:

khi nhấp chuột button1, cho thấy: btn1, bấm button2 và button3, cho thấy: window, tại sao không btn2, btn3?

Answer 1

button1.onclick = buttonClicked; 

Nó cho thấy btn1 vì onclick (một tài sản của button1) bây giờ chỉ vào buttonClicked, vì vậy bối cảnh của cuộc gọi này là button1

button2.onclick = function(){ 
    buttonClicked(); 
    }; 

Nó cho thấy window vì onclick (một tài sản của button2) bây giờ trỏ đến một chức năng ẩn danh và bên trong chức năng đó mà bạn gọi là buttonClicked(); (tương tự như window.buttonClicked();), ngữ cảnh của cuộc gọi này là window

trường hợp của bạn với button3:

<input type="button" value="Button 3" id="btn3" onclick="buttonClicked();"/> 

tương đương với:

btn3.onclick = function(){ 
    buttonClicked(); 
} 

Bởi vì khi bạn khai báo xử lý sự kiện của bạn inline, trình duyệt sẽ tự động kết thúc tốt đẹp mã của bạn bên trong một chức năng ẩn danh.

Answer 2

Khái niệm cơ bản

Khi một handler nhấp chuột được định nghĩa như thế này:

button.onclick = some_function; 

Khi nút được nhấn vào, JavaScript sẽ thực sự chạy này:

some_function.call(button, ...); 

Nói cách khác, tham chiếu đến phần tử nút bị ràng buộc là this bên trong trình xử lý.

Anonymous chức năng

Hãy nhìn vào định nghĩa cho handler click button2:

button2.onclick = function() { 
    buttonClicked(); 
} 

Các chức năng ẩn danh được ràng buộc với nút, nhưng cuộc gọi đến buttonClicked() không bị ràng buộc gì cả (do đó, nó hoàn toàn bị ràng buộc với phạm vi của window). Để đạt được kết quả mong đợi bạn cần phải làm điều này:

button2.onclick = function() { 
    buttonClicked.apply(this, arguments); 
} 

Inline

Dù bạn viết bên trong thuộc tính onclick được sử dụng như cơ thể của trình xử lý nhấp chuột.Vì vậy, mã của bạn:

<input ... onclick="some_function();" /> 

Tương đương với:

button3.onclick = function() { 
    some_function(); 
}; 

Như bạn thấy, nó sẽ hoạt động giống như button2.

Bonus

Đối với những niềm vui của nó, bạn có thể viết handler nhấp chuột nội tuyến của bạn như thế này:

<input ... onclick="buttonClicked.call(this);" /> 

Results

Btw, quản lí sự kiện inline không phải là một rất tốt thực hành và bạn nên xem xét việc đăng ký chúng bằng cách sử dụng addEventListener() hoặc attachEvent() (IE) nhưng lưu ý rằng chúng hoạt động khác nhau.