JavaScript var 및 this, {} 및 함수

이번에는 JavaScript var 및 this, {} 및 함수를 가져왔습니다. JavaScript var 및 this, {} 및 함수를 사용할 때 주의사항은 무엇입니까? 실제 사례는 다음과 같습니다. 살펴보겠습니다. 보세요.

JavaScript var는 변수를 정의하는 데 사용되며, 속성이나 메서드를 정의하거나 호출하는 데 자주 사용됩니다. 하지만 전역 범위에서는 this와 vardefining Variables이 동일합니다.

window

 console.log('window:', name); var name = 'stone'; this.name = 'niqiu';
 console.log('var:',name);
 console.log('this:',this.name);

window object에는 name 속성이 있고 초기값은 비어있지만 첫 번째 콘솔에서 값을 얻는 방법입니다. 이 창에는 마지막 값이 기록되어 있는 것으로 나타났습니다. 페이지를 다시 열고 console.log('window:', name); 을 실행하면 출력이 비어 있습니다.

  console.log('window:', name);  var name = 'stone';

Refresh두 번 후출력석 그래서 새로 고침 시 창 개체가 다시 생성되지 않습니다. 창은 {} 객체입니다. constructor가 없으며 새로울 수 없습니다.

함수 및 {}

함수 내에서 var는 지역 변수를 정의하고, 이는 속성을 정의합니다. 이 두 가지는 다루어지지 않습니다. 그러나 새로 생성된 객체는 지역 변수를 얻을 수 없습니다.

     var Fool = function () {            var name = 'stone';            var nikename = 'stoneniqiu';            this.name = 'niqiu';            this.getName = function () {
                console.log('var', name);
                console.log('this', this.name);
            };            this.getNickname = function() {                return nikename;
            };
        };

    console.log(f.name); //niqiu
    console.log(f.nikename);//undefined
    console.log(f.getNickname());//stoneniqiu

하지만 {}를 사용하여 객체를 정의하면 모든 내부 변수가 속성입니다.

  var block = {
            name: 'stone',
            nickname:'stoneniqiu',
            getName: function () {                // return this.name;//stone
                return name; //'windows name';            },
            getNickname:function() {                return this.nickname;
            },
            printAllName:function() {
                console.log(this.getNickname());
                console.log(this.getName());
            }
        };
       console.log(block.name);//stone
       console.log(block.getName()); //windows name

창 객체와 마찬가지로 {}로 생성된 객체는 생성자가 없기 때문에 새 객체일 수 없습니다.

객체를 재사용하고 상대적으로 큰 경우 함수 형식을 사용하여 전용 변수와 공용 속성 또는 메서드를 구분하는 것이 좋습니다. 함수의 내부 모듈은 {} 형식을 사용할 수 있습니다.

이를 통해 자신이 속한 컨텍스트를 얻을 수 있는 방법을 공용 방법이라고 합니다. 호출 시 객체에 대한 바인딩이 발생합니다. 이 "수퍼" 지연 바인딩을 통해 함수는 이를 재사용할 수 있습니다.

이러한 변경을 방지하기 위해 현재 실행 중인 개체를 나타냅니다. 이를 임시로 저장하기 위해 변수를 사용하는 경우가 많습니다.

var self=this

마법의 콜백

아래 예시를 살펴보겠습니다. 콜백 메소드는 객체의 매개변수에 정의되어 있지만 Fool 자체에 전달한 메소드가 실제로 실행되었습니다.

 var Fool = function (config) {           var parmas = {
               callback: function() {
                   console.log('raw callback');
               }
           };
           parmas = $.extend(parmas, config);           var name = 'stone';           var nikename = 'stoneniqiu';           this.name = 'niqiu';           this.getName = function () {
               console.log('var', name);
               console.log('this', this.name);
           };           this.getNickname = function () {               return nikename;
           };           this.doSomething = function () {
               parmas.callback();
           };
       };       var f = new Fool({callback:function() {
           $("#bt").click(function() {               f.getName()
           });
       }});
       f.doSomething();

는 오류 없이 실행됩니다. 버튼을 클릭하면 getName 메소드가 실행됩니다. 하지만 이렇게 직접 작성하면 오류가 발생한다는 것은 매우 상식적인 일입니다.

 var f = new Fool({callback:f.getName()});

다시 수정하고 익명함수로 감싸면 실행 가능합니다.

var f = new Fool({callback:function() {             (function() {
               f.getName();
            })();
       }});
       f.doSomething();

오늘 보니 함수 내부에서 실행되는 f.getName()은 함수가 생성되는 순간 f가 아닌 외부 f를 바인딩하는 것과 같습니다. 따라서 익명 함수에서 빌드는 f가 생성되는지 여부를 신경 쓰지 않습니다. 다음의 고전적인 질문과 동일합니다:

var addhandle=function(node){var ifor(i=0;i<node.length;i++){
 node[i].onclick=function(e){
 alert(i);
} 
}
}

위 메서드가 실행되면 루프가 끝난 후 바인딩은 i입니다. 그 순간 i를 반복하는 대신. 위 루프의 코드를 다음과 같이 수정하면.

nodes[i].onclick=function(i){ return function(e){
 alert(e)
 }
}(i)

는 함수를 만들 때 변수 i입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

JavaScript 이벤트 관리

jQuery, Angular, node

의 Promise에 대한 자세한 설명

위 내용은 JavaScript var 및 this, {} 및 함수의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!