JavaScript 함수 바인딩 사용 분석

이 글은 주로 자바스크립트 함수 바인딩의 사용법을 소개하고, 자바스크립트 함수 바인딩의 원리, 구현 방법, 관련 운영 기술을 예제 형식으로 분석하여 도움이 필요한 친구들에게 도움이 되었으면 좋겠습니다.

Perface

이 페이지와 1, 2, 3 등을 클릭하는 등의 일부 작업을 구현하라는 메시지가 표시되면 입력 텍스트에 표시되며 기능 삭제는 그냥 시뮬레이션일 뿐이니 전화로 문의해 주세요. 방금 시작했다면 다음과 같이 할 것입니다.

1. CSS와 HTML을 사용하여 인터페이스 배치

2. 자바스크립트 이벤트 위임을 사용하여 버튼의 상위 노드 클릭 이벤트 모니터링

객체 지향 사고를 사용하고 싶습니까? 저는 Ext에서 이 작업을 수행했기 때문에 캡슐화에 많은 도움이 되었다고 말하고 싶습니다. Ext를 한번도 사용해본 적이 없는 분들은 제가 아래에 게시한 코드를 잘 이해하지 못할 수도 있지만, 최선을 다해 명확하게 설명하겠습니다!

Description

ContactTelPanel =Ext.extend(Ext.Panel, {
  //构造方法
  constructor : function(config) {
    Ext.apply(this, config);//直接把config对象的属性全复制到this对象中
    Parent = this.parent;
    var me = this;
    ContactTelPanel.superclass.constructor.call(this, {//用ContactTelPanel的父类也就是Ext.Panel的构造函数
      autoScroll : true,
      title : "拨打电话",//设置title，跟这篇文章的主体没关系，不要管他
      id : "contacttelpanel",
      bodyStyle : "padding: 30px 300px;",
      defaults : {//可以为该对象(ContactTelPanel)包含的组件(也就是在items配置选项)设置一些相同属性
        layout : "column",
        defaults : {
          xtype : "button",
          width : 50,
          height : 25,
          style : "margin:4px 15px",
          handler : this.press //为每个按钮都添加一个click的事件
        },
        bodyBorder : false
      },
      items : [ {//textfield组件
        height : 30,
        width : 250,
        xtype : "textfield",
        id : "tf",
        style : "margin-bottom:10px"
      }, {// 没有xtype就是默认为panel，下面也是，不然就不要纠结了，直接在这里想象成第一行按钮1、按钮2、按钮3
        items : [ {
          text : "1"
        }, {
          text : "2"
        }, {
          text : "3"
        } ]
      }, {// 这里是按钮4、按钮5、按钮6
        items : [ {
          text : "4"
        }, {
          text : "5"
        }, {
          text : "6"
        } ]
      }, {// 这里是按钮7、按钮8、按钮9 下同
        items : [ {
          text : "7"
        }, {
          text : "8"
        }, {
          text : "9"
        } ]
      }, {
        items : [ {
          text : "*"
        }, {
          text : "0"
        }, {
          text : "#"
        } ]
      }, {
        items : [ {
          text : "拨打",
        }, {
          text : "删除",
        } ]
      } ]
    });
  },
  press : function() {
    var text = this.text, textfield = Ext.getDom("tf");
    if (/[0-9*#]/.test(text)) {//在textfield中显示所点击按钮的数字
      textfield.value += text;
    } else if (this.text == "删除") {//删除功能
      textfield.value = textfield.value.slice(0, -1);
    } else if (this.text == "拨打") {//这个先不要管他
      Tel.telcall(textfield.value);
    }
  }
});

참고: 사실 위에서 보면 ContactTelPanel이 Ext.Panel을 상속하고 이 패널에 많은 키가 있고 각 키가 클릭 이벤트를 수신한다는 것을 알 수 있습니다. 각 버튼이 효율성에 너무 많은 영향을 미치는 클릭 이벤트를 수신하므로 이벤트 위임을 사용하여 구현해야 합니다. 이벤트 위임을 사용하면 상위 노드의 클릭 이벤트를 수신한 다음 대상 객체를 결정하고 이벤트 흐름에 따라 작동할 수 있습니다. 이 글의 초점은 여전히 ​​청취 이벤트의 handler: this.press 코드에 있습니다. 내가 직면한 문제는 프레스 기능에서 이 ContactTelPanel 클래스의 일부 속성을 사용해야 하는 경우 어떻게 됩니까? handler : this.press这段代码中 。我遇见的问题就是如果我在press函数要用到这个类ContactTelPanel的一些属性，怎么办？

Idea

我在想，我要在press函数中用到这个类的属性，我直接在press用this对象来获取不就行了，但是我错了，比如你在press函数中console.dir(this),看chrome控制台出现的是什么?不幸的是它出现的是Button对象，它的this指针改了。确实有点麻烦，然后我就想了三个方法，如下：

Solution

1 在每个监听事件的函数中传参

代码：handler : this.press(this),然后在press函数体中写alert(arguments[0])

出现的情况：确实在这个页面加载的时候就弹出窗口是ContactTelPanel，但是你点击那些按钮的时候它没出现了

原因：this.press(this),这样子写javascript解析器会当作调用press函数，然后在你加载页面就执行了

2 在这个ContactTelPanel类中设置全局变量

代码：比如在第五行设置me = this，然后在press函数体中写alert(me)

出现的情况：确实可以在点击按钮的时候弹出窗口，成功了

缺点：污染全局变量，容易被别人无意篡改。比如我在引入这个页面的js后面再引用其他js的时候，在后面的js中设置var me = "monkindey",那么你再点击那个页面的按钮的时候它会弹出123，为不是ContactTelPanel对象

3 简单运用了闭包

代码：handler : function(){me.press(me)} 注：me就是ContactTelPanel对象，因为在function中this指针已经是button对象了，所以应该在function外面用me(或者其他变量名)保存this对象，即var me = this

出现的情况：这个当然是成功

4 用call来实现函数绑定

代码：handler : function(){ me.press.call(this,me);}

Idea

프레스 기능에서 이 클래스의 속성을 사용하려면 이 개체를 사용하여 프레스에서 직접 가져올 수 있다고 생각했습니다. 하지만 예를 들어, 제가 틀렸습니다. console.dir(this) 누르기 기능을 사용합니다. Chrome 콘솔에 무엇이 나타나는지 확인하세요. 불행하게도 Button 객체가 나타나는데 this 포인터가 변경되었습니다. 사실 좀 번거로웠는데, 다음과 같은 세 가지 방법을 생각해냈습니다.

Solution

1 이벤트를 수신하는 각 함수에 매개변수를 전달합니다🎜🎜Code🎜 :handler: this.press(this), 그런 다음 alert(arguments[0])🎜🎜무슨 일이 일어났나요🎜: 이 페이지가 로딩될 때 팝업창이 ContactTelPanel인 것은 사실인데 해당 버튼을 클릭해도 나타나지 않습니다🎜🎜이유🎜 : this .press(this) 이렇게 작성하면 자바스크립트 파서는 이를 press 함수를 호출하는 것으로 처리한 다음 페이지를 로드할 때 실행합니다.🎜🎜2 이 ContactTelPanel 클래스에 전역 변수를 설정합니다. 🎜🎜Code🎜: 예를 들어 다섯 번째 줄에 me = this를 설정하고 alert(me)🎜🎜 상황🎜: 버튼을 눌렀을 때 창이 뜨는게 실제로 가능합니다. 성공 🎜🎜단점 🎜: 전역 변수가 오염되어 있고 다른 사람이 의도하지 않게 쉽게 조작할 수 있습니다. 예를 들어 이 페이지의 js를 소개하고 다른 js를 참조하면 다음 js에서 var me = "monkindey"를 설정한 다음 해당 페이지의 버튼을 클릭하면 123이 팝업됩니다. ContactTelPanel object🎜🎜 3 클로저의 간단한 사용🎜🎜Code🎜: handler: function(){me.press(me)} 참고: 저는 ContactTelPanel 개체, 왜냐하면 함수에서 이 포인터는 이미 버튼 개체이기 때문에 이 개체는 함수 외부에 me(또는 다른 변수 이름)와 함께 저장되어야 합니다. 즉, var me = this🎜🎜무슨 일이 일어나는지🎜 : 물론 성공입니다🎜🎜4 호출을 사용하여 함수 바인딩 구현🎜🎜Code🎜:handler: function(){ me .press.call(this,me) ;}🎜🎜관련 추천:🎜🎜🎜ES6의 JavaScript 함수 바인딩 및 클래스 이벤트 바인딩 기능에 대한 자세한 설명🎜🎜🎜🎜JavaScript의 어려움: 프로토타입 및 클래스 이벤트 바인딩에 대한 자세한 설명 생성자 바인딩 예제🎜🎜🎜🎜JavaScript 함수 바인딩🎜🎜

위 내용은 JavaScript 함수 바인딩 사용 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!