자바스크립트에 대한 자세한 설명(그래픽 튜토리얼)

이 글은 자바스크립트 관련 정보를 위주로 자세하게 소개하고 있으니 필요하신 분들은 참고하시면 됩니다.

이 값은 런타임에 결정됩니다.

이것은 JS에서 정확히 무엇을 의미할까요? 프로그램이 실행되는 상황에 따라 다음과 같은 상황으로 나눌 수 있습니다.

1. 전역 범위에서 This

전역 범위에서 this는 창 개체를 가리킵니다.

console.log(this);//指向window对象

this.x = 5//在全局作用域内创建一个x
//与this.x = 5的等价情况：
//var x = 5;
//x = 5;

전역 범위에서 var x=5를 실행하면 실제로 창 개체에 대한 속성 x가 생성되어 5와 동일해집니다.

변수를 정의할 때 var를 추가하지 않으면 JS는 해당 변수를 전역 변수로 간주하여 창 개체의 속성으로 처리합니다.

2. 함수에

JS에는 두 가지 종류의 함수가 있습니다. 직접 호출되는 함수를 일반 함수라고 하고, new를 통해 객체를 생성하는 함수를 생성자라고 합니다.

2.1 생성자의 This

생성자의 This는 생성된 개체를 가리킵니다. 예:

function Person(name){
  this.name = name;//this指向该函数创建的对象person
}
var person = new Person("chaimm");

2.2 일반 함수의 This

일반 함수의 This는 창 개체를 가리킵니다.
위 예제에서 Perosn 함수를 직접 실행하면 이는 window 객체를 나타내므로 함수 실행 후 전역 이름이 생성됩니다.

function Person(name){
  this.name = name;//this指向window
}
Person("chai");//当作普通函数执行，this指向window对象

3. this in the object

this in the object는 현재 개체를 가리킵니다. 예:

var person = {
  name : "chaimm",
  getName : function(){
    return this.name;
  }
}

위 코드에서 this는 getName 함수가 속한 개체를 가리킵니다.

그러나 객체의 함수에 중첩된 함수가 있는 경우 이 함수의 this는 외부 객체가 아닌 창을 가리킵니다.

var person = {
  name : "chaimm",
  setName : function(name){
    (function(name){
      this.name = name; //此时this并不代表person对象，而是代表window对象
    })(name);
  }
}

위의 예에서는 person 객체에 getName 함수가 있고, getName 함수 내부에 함수가 있습니다. 이 함수 내부는 person 객체가 아닌 window 객체를 가리킵니다. 이것은 JS의 버그입니다. 일반적으로 이 버그를 피하기 위해 다음과 같은 처리를 합니다.

var person = {
  name : "chaimm",
  setName : function(name){
    var thar = this;//将this赋给that
    (function(name){
      that.name = name;//此时that指向person对象
    })(name);
  }
}

person 객체의 1차 함수에서는 이를 지역 변수 that에 할당한 후 2차 함수에서 사용합니다. 이는 사람의 속성에 대해 작동할 수 있는 사람 개체를 가리킵니다.

참고: 개체의 함수를 변수에 할당한 다음 변수를 통해 함수를 호출하면 아래와 같이 함수의 this가 개체가 아닌 창을 가리킵니다.

var person = {
  name : "chaimm",
  getName : function(){
    return this.name;
  }
}

//将getName函数赋给一个新的变量
var newGetName = person.getName;
//通过新的变量调用这个函数，这个函数中的this将指向window
newGetName();//若全局作用域中没有name，则将返回undefined

4 호출을 사용하세요. 그리고 이것을 속이는 함수를 적용합니다. 이 두 함수는 호출된 함수 내에서 this가 가리키는 객체를 수동으로 지정할 수 있습니다.

//定义一个构造函数
var Person = function(name){
  this.name = "";
  this.setName = function(name){
    this.name = name;
  }
}

//创建两个对象
var personA = new Person("A");
var personB = new Person("B");

//使用personA的setName函数去修改personB的name属性
personA.setName.apply(personB,["C"]);

apply Usage

객체 A.함수 이름.apply(객체 B, 매개변수 목록) apply의 첫 번째 매개변수로 객체 B가 전달되면 객체 A의 함수에서 이 객체를 가리킵니다. B는 이때 객체 A에 대한 이 함수의 작동이 객체 B에 적용되므로 객체 A를 사용하여 객체 B의 기능을 호출하는 것을 실현합니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Javascript 학습 요약 this

JavaScript의 6가지 장애물 This

Javascript가 가리키는 내용에 대한 자세한 소개? (사진 및 텍스트)

위 내용은 자바스크립트에 대한 자세한 설명(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!