JavaScript事件bind方法的个人笔记

上期答疑

1.30CAC0040取出40,3SFASDF92取出92

var reg = /\d{2}$/g;

2.使字符串内空格统一，如:蓝 色 理 想——蓝 色 理 想

var reg = /\s+/g;
str.replace(reg,' ');

3.判断字符串是不是由数字组成

var reg = /^\d+$/g;

4.手机电话号码正则表达式

reg = /^1\d{10}$/;

5.只能输入数字和.

reg = /^[0-9\.]+$/g;

6.只能输入英文字母和. / \ :

reg = /^[A-Za-z\.\\\/:]+$/;//不可A-z，中间会有[\]^_`等字符

7.替换字符串.前为指定内容

reg = /^\w*/g;
str.replace(reg,'*');//*为指定内容

8.只匹配中文

reg = /[^\u4E00-\u9FA5\uf900-\ufa2d]*/g;

9.只取匹配IP地址前三段

reg = /\.\d{1,3}$/g;
str.replace(reg,'');//把末尾的替换成空即可

10.匹配<ul></ul>之间的内容

reg = /<ul>[\d\D]+<\/ul>/i;//[\d\D]即所有

11.正则表达式获得文件名

var reg = /[^\\\/]*[\\\/]+/g;//注意有的路径/\符号
str.replace(reg,'');//把最后的//前的路径替换成空

12.绝对路径变相对路径

reg = /(http|https):\/\/[^\/]+/g;
str.replace(reg,'');

13.用户名正则表达式，中文、英文、数字、下划线、4-16个字符

reg = /^[\u4E00-\u9FA5\uf900-\ufa2d\w]{4,16}$/g;

14.匹配英文地址,包含.,字母 数字，但开头只能是字母

reg = /^[A-Za-z][\.,\s0-9A-Za-z]*[A-Za-z]$/g;

15.匹配价格，开头数字若干，可能小数点以及后两位

reg = /^\d+(\.*\d{0,2})$/g;

16.份证号匹配，最后一位可能为X

reg = /^(\d{14}|\d{17})(\d|[xX])$/;

17.邮箱正则表达式khh_515gkg@qq.com

reg = /^([A-Za-z0-9_-])+@([A-Za-z0-9_-])+(\.[A-Za-z0-9_-]+)$/g;

18.正则验证日期格式yyyy-mm-dd格式

reg = /^\d{4}-\d{1,2}-\d(1,2)$/

注意这里答案的形式不固定，多举几个例子进行验证

一、引出

例一

var x = 10;
function show(a,b){
    console.log(this.x,a,b);
};
show('a','b');//10 "a" "b"
var obj = {
    x : 20
}
var newshow = show.bind(obj,'c','d');
newshow();//20 "a" "b"
var newshow1 = show.bind(obj,'e');
newshow1('f');//20 "e" "f"

例二

var list = {
    init : function (){
        this.name = 'jimo',
        this.btn = document.getElementsByTagName('button')[0],
        this.bindEven();
    },
    bindEven : function(){
        this.btn.onclick = this.show.bind(this,22,'man');
    },
    show : function (a,b){
        console.log(this.name,a,b);
    }
}
list.init();//点击后输出：jimo 22 man

分析：
以第一个例子来说，这里的bind方法会把它的第一个实参绑定给f函数体内的this，所以前面的this即指向{x:20}对象；
从第二个参数起，会依次传递给原始函数，这里的第二个参数2即是‘a’；
最后调用show1(‘f’)的时候，这里的’f’便是最后一个参数z了，所以执行结果为20 “a” “b”
分步处理参数的过程其实是一个典型的函数柯里化的过程（Curry）

var a = document.write;
a('hello'); // error
a.bind(document)('hello'); // hello
a.call(document,'hello'); // hello

分析：
直接调用a的话，this指向的是global或window对象，所以会报错；
通过bind或者call方式绑定this至document对象即可正常调用

二、原理

Function.prototype.newBind = function (target){
    var self = this;//保存调用者this
    var args = [].slice.call(arguments,1);//用数组方法截取当前arguments参数组的0:target后的参数
    var temp = function (){};
    var f = function (){
    	var _arg = [].slice.call(arguments,0);//截取新函数的实参
    	return self.apply(this instanceof temp ? this : (target || window),args.concat(_arg));//返回外界，然后拼接参数
    }
    temp.prororype = self.prototype;
    f.prototype = new temp();//圣杯模式，继承原型
    return f;
};

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！