JavaScript function binding usage analysis

This article mainly introduces the usage of JavaScript function binding, and analyzes the principles, implementation methods and related operating techniques of JavaScript function binding in the form of examples. Friends in need can refer to it. I hope it can help everyone.

Perface

If you are asked to implement this page and some operations, such as clicking 1, 2 , 3, etc. are displayed in the input text, and there is also a delete function. We don’t care about it first, it is just a simulation. If I just started doing it, I would do this:

1. Use css and HTML to layout the interface

2. Use javascript event delegation to listen to the click event of the parent node of the button

But what if I want to use object-oriented thinking? I did it in Ext, so I would say it helped me encapsulate a lot. Maybe some people who have never used Ext don't quite understand the code I posted below, but I will try my best to explain it clearly!

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);
    }
  }
});

Note: In fact, we can know from the above that ContactTelPanel inherits Ext.Panel, and then There are many keys in this panel, and each key listens for click events. I really feel that I am not doing a very good job here. I should use event delegation to implement it, because each of your buttons listens to the click event, which affects the efficiency too much. Using event delegation, we can just listen to the click event of its parent node, and then determine the target object and operate based on the event flow. The focus of this article is still in the code of

handler: this.press in the listening event. The problem I encountered is what if I need to use some attributes of this ContactTelPanel class in the press function?

Idea

I am thinking that I want to use the attributes of this class in the press function. I use this object directly in press. Just get it, but I was wrong. For example, if you use

console.dir(this) in the press function, see what appears on the chrome console? Unfortunately, what appears is a Button object, and its The this pointer has changed. It was indeed a bit troublesome, and then I thought of three methods, as follows:

Solution

1 Pass in each function that listens to the event Parameter

Code: handler: this.press(this), then write alert(arguments[0]) in the press function body

What happens: It is true that the pop-up window is ContactTelPanel when this page is loaded, but it does not appear when you click those buttons

The reason : this.press(this), the javascript parser written in this way will be regarded as calling the press function, and then executed when you load the page

2 In this ContactTelPanel class Set global variables

Code: For example, set me = this on the fifth line, and then write alert(me)

# in the press function body ##Occurrence

: It is indeed possible to pop up a window when clicking the button. Successfully

Disadvantages

: Contaminate global variables and are easily tampered with by others unintentionally. For example, when I introduce the js of this page and then reference other js, I set var me = "monkindy" in the subsequent js. Then when you click the button of that page, it will pop up 123, which is not a ContactTelPanel object3 Simple use of closure

Code

:handler: function(){me.press(me)} Note: me is the ContactTelPanel object, Because the this pointer in the function is already a button object, the this object should be saved with me (or other variable name) outside the function, that is, var me = this

What happens

: This is of course a success4 Use call to implement function binding

Code

:handler: function(){ me.press.call(this,me );}Related recommendations:

Detailed explanation of the function binding and class event binding functions of JavaScript in ES6

Difficulties in JavaScript: Detailed explanation of prototype and constructor binding examples

JavaScript function binding

The above is the detailed content of JavaScript function binding usage analysis. For more information, please follow other related articles on the PHP Chinese website!