JS의 이러한 포인팅 문제를 이해할 수 있습니까? 이 기사를보세요

JavaScript의 이 포인팅 문제를 이해할 수 있나요? 다음 기사에서는 이 짜증나는 포인팅 문제에 대해 설명하겠습니다. 도움이 되기를 바랍니다.

This의 포인팅

여러 서문에서 this의 포인팅 방법을 결정하는 방법을 살펴보았는데, "이것은 궁극적으로 그것을 호출하는 객체를 가리킨다" 이 문장이 핵심으로 간주됩니다 , 하지만 다양한 상황에 직면하면 혼란스러워지는 경향이 있습니다. 다양한 상황에 대한 나의 이해를 바탕으로 문장을 내놓았습니다"화살표, 타이밍, 구조, 특별한 상황을 보고, 보통 콜은 포인트 번호를 보고, 다음 포인트는 앞을 보지 말고 판단하세요. 가장 가까운 원리를 바탕으로, 마지막으로 남은 것은 창”. [관련 추천 : 자바스크립트 학습 튜토리얼]

화살표 함수

화살표 함수 자체에는 이것이 없으므로 이 변화는 없습니다.

var name = "windowsName";
var a = {
    name: "Cherry",
    fn() {
      setTimeout(()=>{
        console.log(this.name); 
      },0)
    }
}

a.fn() //Cherry

를 사용하여 외부 this를 캡처합니다. 분석: 첫째, 객체. a가 fn 함수를 호출하므로 fn 함수의 this는 객체 a를 가리키고 화살표는 외부 this를 캡처합니다. 그러면 setTimeout의 this가 아니라 fn 함수의 this이므로 마지막으로 객체 a

에서 이름을 얻습니다.

timer

지연 함수 내부의 콜백 함수의 경우 이는 전역 객체 창을 가리킵니다

var name = "windowsName";
var a = {
    name: "Cherry",
    fn() {
      setTimeout(function (){
        console.log(this.name); 
      },0)
    }
}

a.fn() //windowsName

분석: 먼저 객체 a가 fn 함수를 호출한 다음 여기에서 setTimeout의 콜백 함수는 익명 함수입니다. , 이는 일반 함수이고 익명 함수에서는 이것이 창을 가리킵니다

var name = "windowsName";
var b={
  name: "setTimeoutName"
}
var a = {
    name: "Cherry",
    fn() {
      setTimeout((function (){
        console.log(this.name); 
      }).bind(b),0)
    }
}

a.fn() //setTimeoutName

분석: 먼저 객체 a가 fn 함수를 호출한 다음 여기서 setTimeout의 콜백 함수는 일반 함수인 익명 함수입니다. 익명 함수의 this는 창을 가리키지만 바인딩을 사용하여 익명 함수를 변경합니다. this는 객체 b를 가리키므로 객체 b

Constructor

this의 성은 생성된 인스턴스 객체를 가리킵니다. ,

참고: 생성자에서 개체가 반환되면 생성될 때 생성되지 않습니다. 새로운 인스턴스 개체가 있지만 이 반환된 개체

function fn(){
  this.age = 37;
}

var a = new fn();
console.log(a.age); // 37
a.age = 38;
console.log(fn); // { this.age = 37; }
console.log(a.age); // 38

분석: 여기서는 인스턴스 개체 a를 만듭니다. 생성자를 통해 생성자의 내용을 복사하는 것과 같습니다. 이때 객체 a를 가리킵니다. 객체 a의 내용을 수정해도 생성자에는 영향이 없습니다

점수 판단

이 점을 판단하려면 .를 사용하고 근접성의 원리를 따르세요.判断this指向，遵循就近原则

var a = {
  age:10,
  b: {
      age:12,
      fn(){
          console.log(this.age); 
      }
  }
}
a.b.fn(); //12

解析：对象a调用对象b的fn函数，fn函数前面有两个.，那么最近的是对象b，所以fn函数的this指向的就是对象b，最后拿到的就是对象b的age

var a = {
  age:10,
  b: {
      age:12,
      fn(){
          console.log(this.age); //undefined
      }
  }
}
var c = {
  age:20,
}

var d = {
  age:30,
}
a.b.fn.bind(c).bind(d)(); //20

解析：对象a调用对象b的fn函数然后使用bind改变this的指向，这时候fn前后前后都有.，不看前面的.，只用看后面的，然后最近的bind改变this指向为c，那么此时fn函数的this指向的就是对象c，拿到的就是对象c的age

练习

function outerFunc() {
   console.log(this) // { x: 1 }
   function func() {
    console.log(this) // Window 
   }
   func()
} 

outerFunc.bind({ x: 1 })()

obj = {
  func() {
    const arrowFunc = () => {
      console.log(this._name)
    }

    return arrowFunc
  },

  _name: "obj",
}

obj.func()() //obj

func = obj.func
func()()  //undefined

obj.func.bind({ _name: "newObj" })()() //newObj

obj.func.bind()()() //undefined

obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })() //bindObj

apply、call、bind

使用 apply、call、bind 函数可以改变this的指向，上面this的例子中使用到

区别

thisArg , [ argsArray] call(thisArg, arg1, arg2, ...)

apply和call函数区别在于this后面传入的参数，apply中传的是一个数组，而call中传入的是展开的参数

bind(thisArg[, arg1[, arg2[, ...]]])()

• 然后bind函数创建的是一个新的函数，需要手动去调用
• 这个新函数的 this 被指定为 bind()rrreee
분석: 객체 a는 객체 b의 fn 함수를 호출합니다. >.는 fn 함수 앞에 있으므로 가장 가까운 것은 객체 b이므로 fn 함수 중 이 함수는 객체 b를 가리키며 마지막으로 얻는 것은 객체 b의 나이입니다. 객체 a는 객체 b의 fn 함수를 호출한 후 바인드를 사용하여 이에 대한 방향을 변경합니다. 이때 이전 와 관계없이 fn 앞뒤에 <code>.가 있습니다. >. 뒷면만 보면 최신 바인드가 이 지점을 c로 변경하고, fn 함수의 이 지점이 객체 c를 가리키며, 결과는 객체 c

Exercise

rrreeerrreee입니다. apply, call,bin

이 포인터를 변경하려면 Apply, call,bind 함수를 사용하세요. 위의 예에서는 차이점

이 사용되었습니다

🎜🎜🎜thisArg, [ argsArray] call(thisArg, arg1, arg2, ...)🎜🎜적용 함수와 호출 함수의 차이점은 이 뒤에 전달되는 매개 변수에 있습니다. , 호출하는 동안 확장된 매개변수는 🎜 🎜bind(thisArg[, arg1[, arg2[, ...]]])🎜

• 그런 다음 바인드가 전달됩니다. 함수는 새 함수를 생성하며 수동으로 호출해야 합니다. 이 새 함수의 🎜
• 이는 bind()의 첫 번째 매개변수로 지정되고 나머지 매개변수는 호출 시 사용할 새 함수의 매개변수로 사용됩니다🎜 🎜🎜🎜오류가 있으면 수정해주세요! ! 읽어주신 모든 분들께 감사드립니다! 🎜🎜🎜🎜🎜References🎜🎜🎜https://juejin.cn/post/6946021671656488991#comment🎜🎜🎜【추천 관련 동영상 튜토리얼: 🎜웹 프론트엔드🎜】🎜

위 내용은 JS의 이러한 포인팅 문제를 이해할 수 있습니까? 이 기사를보세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!