วิธีเริ่มต้นใช้งาน VUE3.0 อย่างรวดเร็ว: เรียนรู้
ในบทนำต่าง ๆ ที่เราได้เห็นเกี่ยวกับวิธีการกำหนดวิธีการชี้ตำแหน่งนี้ ประโยค "สิ่งนี้ชี้ไปที่วัตถุที่เรียกมันในท้ายที่สุด" ถือเป็น แต่การเผชิญหน้า เรามักจะสับสนกับสถานการณ์ต่างๆ จากความเข้าใจในสถานการณ์ต่างๆ ของผม ผมหยิบยกประโยคขึ้นมา ว่า "ลูกศร เวลา และโครงสร้าง ดูที่สถานการณ์พิเศษ ดูที่หมายเลขจุดสำหรับการโทรธรรมดา อย่ามองที่ด้านหน้าสำหรับจุดหลัง แล้วจึงตัดสิน" ตามหลักการที่ใกล้ที่สุดและสิ่งสุดท้ายที่เหลืออยู่คือหน้าต่าง" .
ฟังก์ชันลูกศร
ฟังก์ชันลูกศรเองไม่มีสิ่งนี้ ดังนั้นจึงไม่มีการเปลี่ยนแปลงนี้ โดยจะจับส่วนนอกนี้โดยใช้
var name = "windowsName";
วาร์ ก = {
ชื่อ: "เชอร์รี่",
เอฟเอ็น() {
setTimeout(()=>{
console.log(this.name);
},0)
-
-
a.fn() // การวิเคราะห์แบบเชอร์รี่: ขั้นแรก ให้ object a เรียกใช้ฟังก์ชัน fn ดังนั้นฟังก์ชัน fn นี้จึงชี้ไปที่ object a จากนั้นลูกศรจะจับส่วนด้านนอกของสิ่งนี้ จากนั้นจะไม่ใช่สิ่งนี้ใน setTimeout แต่เป็นของ ฟังก์ชั่น fn ดังนั้นในที่สุดรับชื่อในวัตถุ a
ตัวจับเวลาของฟังก์ชันโทรกลับภายในฟังก์ชันหน่วง
เวลา
ชี้ไปที่หน้าต่างวัตถุทั่วโลกvar name = "windowsName";
วาร์ ก = {
ชื่อ: "เชอร์รี่",
เอฟเอ็น() {
setTimeout (ฟังก์ชัน () {
console.log(this.name);
},0)
-
-
a.fn() //windowsName analysis: ขั้นแรก ให้ object a เรียกใช้ฟังก์ชัน fn จากนั้นฟังก์ชัน callback ใน setTimeout ที่นี่จะเป็นฟังก์ชันที่ไม่ระบุชื่อ ซึ่งเป็นฟังก์ชันธรรมดา จากนั้นฟังก์ชันในฟังก์ชันที่ไม่ระบุตัวตนจะชี้ไปที่หน้าต่าง
var name = "ชื่อหน้าต่าง";
วาร์ ข={
ชื่อ: "setTimeoutName"
-
วาร์ ก = {
ชื่อ: "เชอร์รี่",
เอฟเอ็น() {
setTimeout((ฟังก์ชัน (){
console.log(this.name);
}).ผูก(ข),0)
-
-
a.fn() //การวิเคราะห์ setTimeoutName : ขั้นแรก ให้ object a เรียกใช้ฟังก์ชัน fn จากนั้นฟังก์ชัน callback ใน setTimeout ที่นี่จะเป็นฟังก์ชันที่ไม่ระบุชื่อ ซึ่งเป็นฟังก์ชันธรรมดา จากนั้นฟังก์ชันนี้ในฟังก์ชันที่ไม่ระบุชื่อจะชี้ไปที่หน้าต่าง ใช้การผูกเพื่อเปลี่ยนฟังก์ชันที่ไม่ระบุชื่อ สิ่งนี้ชี้ไปที่วัตถุ b ดังนั้นชื่อ
คอนสตรัคเตอร์
ในออบเจ็กต์ b จึงชี้ไปที่อ็อบเจ็กต์อินสแตนซ์ที่สร้างขึ้นในคอนสตรัคเตอร์
หมายเหตุ: หากวัตถุถูกส่งคืนในตัวสร้าง จะไม่มีอินสแตนซ์ใหม่ วัตถุเมื่อสร้างขึ้น แต่สิ่งนี้ วัตถุที่ส่งคืนโดย
ฟังก์ชัน fn(){
อายุ = 37;
-
var a = fn ใหม่ ();
console.log(a.age); // 37
ก. อายุ = 38;
console.log(fn); // { this.age = 37; }
console.log(a.age); // 38 การวิเคราะห์: ที่นี่เราสร้างอ็อบเจ็กต์ a ผ่าน Constructor ซึ่งเทียบเท่ากับการเปิดตำแหน่งใหม่และคัดลอกเนื้อหาของ Constructor เวลานี้ชี้ไปที่วัตถุ a การแก้ไขเนื้อหาในวัตถุ a ไม่ส่งผลกระทบต่อการส่งผ่านของ
การตัดสิน
หมายเลขจุดคอนสตรัคเตอร์. ปฏิบัติตามหลักการความใกล้ชิด
var a = {
อายุ:10,
ข: {
อายุ:12,
เอฟเอ็น(){
console.log(this.age);
-
-
-
abfn(); //12 การวิเคราะห์: Object a เรียกใช้ฟังก์ชัน fn ของ object b มีสอง . ที่ด้านหน้าของฟังก์ชัน fn จากนั้นอันที่ใกล้ที่สุดคือ object b ดังนั้นฟังก์ชัน fn นี้จึงชี้ไปที่ object b และ สิ่งสุดท้ายที่ได้คืออายุของ b
var a = {
อายุ:10,
ข: {
อายุ:12,
เอฟเอ็น(){
console.log(this.age); //ไม่ได้กำหนด
-
-
-
วาร์ ค = {
อายุ:20,
-
วาร์ ง = {
อายุ:30,
-
abfn.bind(c).bind(d)(); //20 การวิเคราะห์: วัตถุ a เรียกใช้ฟังก์ชัน fn ของวัตถุ b จากนั้นใช้การผูกเพื่อเปลี่ยนทิศทางของสิ่งนี้ ในเวลานี้ fn มี . โดยไม่คำนึงถึงจุดก่อน . เพียงแค่ดูที่ด้านหลัง จากนั้นการผูกล่าสุดจะเปลี่ยนจุดนี้เป็น c จากนั้นจุดนี้ของฟังก์ชัน fn ก็คืออ็อบเจ็กต์ c และสิ่งที่คุณได้รับคือ
ฝึก
อายุexternalFunc() { ของ วัตถุค
console.log(นี่) // { x: 1 }
ฟังก์ชั่น func() {
console.log(นี่) // หน้าต่าง
-
สนุก()
-
ภายนอกFunc.bind({ x: 1 })() obj = {
ฟังก์ชั่น() {
const arrowFunc = () => {
console.log(this._name)
-
กลับลูกศรFunc
-
_ชื่อ: "obj",
-
obj.func()() //obj
func = obj.func
func()() //ไม่ได้กำหนด
obj.func.bind({ _name: "newObj" })()() //newObj
obj.func.bind()()() //ไม่ได้กำหนด
obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })() //bindObj ใช้ฟังก์ชัน Apply, Call และ Bind เพื่อเปลี่ยนทิศทางของ
สิ่งนี้ ข้างต้นนี้ ความแตกต่าง
ระหว่าง
thisArg , [ argsArray] call(thisArg, arg1, arg2, ...)
in Apply คืออาร์เรย์ และสิ่งที่ถูกส่งผ่านในการเรียก คือ
bind(thisArg[, arg1[, arg2[, ...]]])()
bind() this ถูกกำหนดให้เป็นพารามิเตอร์แรก และพารามิเตอร์ที่เหลือจะถูกใช้เป็นพารามิเตอร์ของฟังก์ชันใหม่เพื่อใช้เมื่อเรียกใช้หากมีข้อผิดพลาด โปรดแก้ไขให้ฉันด้วย! - ขอบคุณทุกคนที่อ่าน!
วัสดุอ้างอิง
https://juejin.cn/post/6946021671656488991#comment
[คำแนะนำวิดีโอสอนที่เกี่ยวข้อง: ส่วนหน้าของเว็บ]
ข้างต้นเป็นวิธีที่คุณสามารถเข้าใจปัญหาการชี้ของ JS นี้ได้อย่างไร ดูรายละเอียดของบทความนี้ สำหรับข้อมูลเพิ่มเติม โปรดอ่านบทความอื่น ๆ ที่เกี่ยวข้องบนเว็บไซต์ php Chinese!
