Examples to explain the usage of JavaScript function binding

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 who need it 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 understand the code I posted below, but I will try 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); } } });

handler: this.pressin 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

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

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

Situation: 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

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

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

: Global variables are polluted and 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

: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

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

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

: This should be the most usefulAnother: The previous article explains JavaScript function binding in detail based on pure js Function binding technology, interested readers can compare the similarities and differences between the two.

Related recommendations:

##js uses function binding technology to change event handlers Scope_javascript skills

Detailed explanation of JavaScript function binding_Basic knowledge

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