เหตุใดการเรียกใช้ฟังก์ชันบางอย่างจึงเรียกว่า "การเรียกใช้ที่ผิดกฎหมาย" ใน JavaScript

ตัวอย่างเช่นถ้าฉันทำสิ่งนี้:

var q = document.querySelectorAll;

q('body');

ฉันได้รับข้อผิดพลาด "การร้องขอที่ผิดกฎหมาย" ใน Chrome ฉันคิดไม่ออกว่าทำไมถึงจำเป็น ประการแรกไม่ใช่กรณีของฟังก์ชันโค้ดเนทีฟทั้งหมด อันที่จริงฉันสามารถทำได้:

var o = Object; // which is a native code function

var x = new o();

และทุกอย่างทำงานได้ดี โดยเฉพาะอย่างยิ่งฉันได้ค้นพบปัญหานี้เมื่อจัดการกับเอกสารและคอนโซล ความคิดใด ๆ ?

เป็นเพราะคุณสูญเสีย "บริบท" ของฟังก์ชันไป

เมื่อคุณโทร:

document.querySelectorAll()

บริบทของฟังก์ชันคือdocumentและจะสามารถเข้าถึงได้thisโดยการใช้วิธีการนั้น

เมื่อคุณเรียกqว่าไม่มีบริบทอีกต่อไป แต่จะเป็นwindowวัตถุ"global" แทน

การใช้งานquerySelectorAllพยายามใช้thisแต่ไม่ใช่องค์ประกอบ DOM อีกต่อไป แต่เป็นWindowวัตถุ การนำไปใช้งานพยายามเรียกวิธีการบางอย่างขององค์ประกอบ DOM ที่ไม่มีอยู่ในWindowอ็อบเจ็กต์และล่ามเรียกว่าไม่น่าแปลกใจ

ในการแก้ไขปัญหานี้ให้ใช้.bindJavascript เวอร์ชันใหม่กว่า:

var q = document.querySelectorAll.bind(document);

ซึ่งจะช่วยให้มั่นใจได้ว่าการเรียกใช้ในภายหลังทั้งหมดqมีบริบทที่ถูกต้อง หากคุณยังไม่มี.bindให้ใช้สิ่งนี้:

function q() {
    return document.querySelectorAll.apply(document, arguments);
}

ในกรณีของฉันการเรียกใช้ที่ผิดกฎหมายเกิดขึ้นเนื่องจากการส่งผ่านตัวแปรที่ไม่ได้ประกาศเพื่อทำหน้าที่เป็นอาร์กิวเมนต์ อย่าลืมประกาศตัวแปรก่อนส่งผ่านไปยังฟังก์ชัน

คุณสามารถใช้สิ่งนี้:

let qsa = document.querySelectorAll;
qsa.apply(document,['body']);

อีกวิธีหนึ่งที่กระชับ:

const q=s=>document.querySelectorAll(s);
q('body');