JavaScript 함수 내부 속성 소개(예제 포함)

이 글은 JavaScript 함수의 내부 속성을 소개합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

함수에는 this와 인수라는 두 가지 특수 개체가 있습니다. Arguments는 함수에 전달되는 모든 매개 변수를 포함하는 배열과 유사한 개체입니다. 주로 함수 매개 변수를 저장하는 데 사용됩니다. 인수 개체에는 인수 개체를 소유한 함수에 대한 포인터인 호출 수신자 특성도 있습니다.

callee

function fact(num){
        if(num<=1){
        return 1;
        }else{
        return num*fact(num-1);
        }
    }

재귀적 방법을 사용하여 계승을 구현하는 함수입니다. 이 방법의 한 가지 문제점은 팩트의 이름이 변경될 때 함수 내부의 함수 이름이 시간 내에 변경되지 않으면 함수가 무효하다. 이때 callee 속성은 현재 함수를 num 매개변수 객체로 대체하는데 사용되는데, 이는 사실입니다.

callee를 이용한 구현은 다음과 같습니다

function fact(num){
            if(num<=1){
            return 1;
            }else{
            return num*arguments.callee(num-1);
            }
        }

this

이것은 함수 실행 시 환경 객체를 의미합니다. 함수가 객체의 메소드로 호출되는 경우, 이때의 this 객체는 현재 호출하는 함수의 객체를 참조합니다.

다른 환경에는 this가 가리키는 다른 값이 있습니다. 다음은 다양한 실행 환경에서 this가 가리키는 여러 값입니다.

메소드 호출

함수가 객체 메서드로 사용되면 함수 내 this가 바인딩됩니다. (메서드 호출이라고도 함)

예:

var myNum = {
      value:1,
      increment:function(arg){
          this.value +=arg;

      }
  };
   myNum.increment(3);
  console.log('example1:'+myNum.value);//example1:4

위의 증분은 객체 메소드이고 객체 메소드 내부의 이것은 현재 객체를 가리킵니다

함수 호출

함수가 호출될 때 는 비객체 메소드이고, this 전역 객체 창에 바인딩되어 있습니다. 이때 내부 함수를 호출하려면 that = this를 사용하면 됩니다.

// 一般的函数
function add(a){
    return a+2 ;
}

var value = 2;
myNum.count = function (){
    let value = 1;
    let help = function(){
        this.value = add(this.value);
    }
    help();
    console.log(this.value);//4
}
myNum.count();


that = this方式

var value = 2;
myNum.count = function (){
    let value = 1;
    let that = this;
    let help = function(){
        that.value = add(that.value);
    }
    help();
    console.log(that.value);//3
}
myNum.count();

Constructor

new 연산자를 사용하여 생성자를 호출하면 먼저 생성자와 연결된 프로토타입(프로토타입 개체)이 생성된 다음 이를 개체에 바인딩합니다.

function Person(name){
    this.name = name;
}

Person.prototype.sayName = function(){
    return this.name;
}
var person1 = new Person('TOM');

console.log(person1.sayName());

applycallbind

이를 지정된 환경 개체에 바인딩합니다.

 
 var people = {
    name:"LILY"
}
console.log(Person.prototype.sayName.apply(people));
console.log(Person.prototype.sayName.bind(people)());
console.log(Person.prototype.sayName.call(people));

call: 메소드는 주어진 값과 제공된 인수 목록을 사용하여 함수를 호출합니다.
apply: 메서드는 주어진 이 값과 제공된 인수(배열 또는 배열과 유사한 객체)를 사용하여 함수를 호출합니다.
bind: 이 메서드는 새 함수를 생성하고 호출 시 제공된 "값"으로 this 키워드를 설정합니다.

ES6 화살표 함수

es6 화살표 함수에서 이것은 실행 환경 객체가 아닌 자신이 정의된 객체를 가리킵니다. 즉, 화살표 함수에서 사용될 때 변하지 않는 값이라는 뜻입니다

function foo(){
    setTimeout(()=>{
        console.log('name:',this.name);
    },1000)
}
var name = "kiki";
foo.call({name:"didi"});//name:didi

화살표 함수 es5에서 화살표 함수를 구현하는 방법은 this의 바인딩을 구현하기 위해 that = this의 메커니즘을 사용하는 것입니다.

위 내용은 JavaScript 함수 내부 속성 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!