javascript高等特征

2019年8月26日 191次阅读 来源: 雨碎江南

高等javascript函数

js中没有class的观点，我们能够运用function来模仿。

惰性载入函数

比方我们一般运用以下的js代码建立ajax：

function createXHR () {
    var xhr = null;
    try{
        xhr = new XMLHttpRequest(); // FF、Opera、Safari、IE7
    } catch(e) {
        handlerError(e);
        try{
            xhr = new ActiveXObject('Msxml2.XMLHTTP');
        } catch (e) {
            try{
                xhr = ActiveXObject('Microsoft.XMLHTTP');    
            } catch(e) {
                xhr = null;    
            }
        }
        
    }
    return xhr;
}

function handlerError (err) {
    var errXHR = err;
    // ...
}

在当代的网络手艺中ajax手艺早已经是烂大街了，一个网页一般包括许多的ajax——也就致使了频仍建立xhr从而致使内存泄漏。我们能够采纳惰性载入函数来动态天生xhr。

/* 惰性函数(第二次见效) */
function createXHR () {
    var xhr = null;
    if (typeof XMLHttpRequest != 'undefined') {
        xhr = new XMLHttpRequest();
        createXHR = function () {
            return new XMLHttpRequest();
        }
    } else {
        try{
            xhr = new ActiveXObject('Msxml2.XMLHTTP');
            createXHR = function () {
                return new ActiveXObject('Msxml2.XMLHTTP');
            }
        } catch (e){
            try{
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
                createXHR = function () {
                    return new ActiveXObject('Microsoft.XMLHTTP');
                }
            } catch (e){
                createXHR = function () {
                    return null;
                }
            }
        }
    }
    return xhr;
}

我们挪用以上的要领建立xhr，在运转第二次的时刻就不必每次都判断了，直接返回xhr。

函数柯里化

函数的柯里化（curry）把接收多个参数的函数变换成接收一个单一参数（最初函数的第一个参数）的函数，而且返回接收余下的参数而且返回效果的新函数的手艺。,简而言之就是两个函数的参数的兼并。比方：

function curry(fn) {
    var args = Array.prototype.slice.call(arguments,1);         // 取curry的参数并将其变成数组[100]
    console.log(args);                                            // [100]
    return function () {
        var innerArgs = Array.prototype.slice.call(arguments);  // 匿名函数的参数列表[1,2]
        console.log(innerArgs);                                 // [1,2]
        var finalArgs = args.concat(innerArgs);                 // 兼并数组(参数兼并)
        console.log(finalArgs);                                    // [100,1,2]        
        return fn.apply(null, finalArgs);
    }
}

function add(num1,num2,num3) {
    return num1 + num2 + num3;
}

var t = curry(add,100)(1,2);
console.info(t);

《javascript高等特征》

级联函数

级联就是一个对象将其一切有关的东西衔接到了一同。如：以下的对象。

// 人：手、腿、嘴
function classPerson(){
    this.hand = "";
    this.foot = "";
    this.leg = "";
}

classPerson.prototype = {
    setHand:function(){
        this.hand = '大手';
    },
    setLeg:function () {
        this.leg = '长腿欧巴';
    },
    setMouse:function () {
        this.mouse = '樱桃小嘴';
    }
}

var person = new classPerson();
person.setHand();
person.setMouse();
person.setLeg();
console.log(person);

《javascript高等特征》

我们晓得造人是一个团体（不可能先造手、再造腿、末了造嘴），我们如今的需求是一旦实例化人这个对象，该有的都有了。

简朴修正以上代码：

function classPerson(){
    this.hand = "";
    this.foot = "";
    this.leg = "";
}

classPerson.prototype = {
    setHand:function(){
        this.hand = '大手';
        return this;
    },
    setLeg:function () {
        this.leg = '长腿欧巴';
        return this;
    },
    setMouse:function () {
        this.mouse = '樱桃小嘴';
        return this;
    }
}

var person = new classPerson();
person.setHand().setMouse().setLeg(); // 挪用函数
console.log(person);

我们在每一个setter中添加了return this将原有对象返回（防止无返回值的函数实行完以后是undefined）。我们能够惊异的发明经常使用的JQuery的链式挪用就是一种级联挪用：
$(‘#id’).show().hide().show().hide().show().hide();

javascript中的正则表达式

一般来说//在js中示意的是单行解释，然则一旦我们向斜杠中心加入了内容，比方：/TEST/它就奇异地变成了正则。

情势串的声明

var patt1 = new RegExp('hello'); // 体式格局一
var patt2 = /word/;              // 体式格局二

test要领

我们得到了情势串（情势对象）后能够挪用该要领婚配字符串，返回指定值（true or false）。

var patt = /my/;
var str = 'this is my code...';
console.log(patt.test(str)); // true

exec要领

类似于字符串的match要领，然则当情势串指定为全局的时刻二者表现差别，没有婚配返回null。

/hello/.exec('oh hello world'); // ["hello"]

以上两个要领都是字符串对象自身的要领，下面的几个要领是字符串中的有关正则的要领。

match要领

情势婚配。函数原型是str.mattch(pattern)，将婚配的效果以数组返回。

console.log('test 123'.match(/test/g)); // [test]

replace要领

字符串替代，注重：该要领天生一个新的暂时字符串副本。如图所示：

《javascript高等特征》

split要领

将字符串拆分红根据情势拆分红数组。

console.log('Hello world,hello everyone'.split(/\s+/)); // ["Hello", "world,hello", "everyone"]
console.log('Hello world,hello everyone'.split(' '));   // 等效于上面的要领

正则的范例

/pattern/attributes

attributes是可选字符串，经常使用的属性是“g”（全局婚配）、“i”（大小写不敏感）和”m”(多行婚配)

console.log('Hello world,hello everyone'.match(/hEllO/gi)); // 全局查找hello并疏忽大小写 ["Hello", "hello"]

在现实的开辟中我们能够借助在线正则调试东西来调试我们的正则，实在内里内置了大批经常使用的正则。假如我们在开辟中剖析不出他人的正则的寄义能够借助正则剖析网站，将会以有限自动机图解的体式格局显现。

《javascript高等特征》

正则中的元字符

正则中的元字符必需举行转义处置惩罚:

( [ { ^ $ | ) ? * + .]}

须要注重的是正则有2种建立情势:字符串字面量和new RegExp()的体式格局.因为RegExp的组织函数是字符串,所以某些情况下须要举行两重转义.

《javascript高等特征》

__PROTO__

__proto__使得继续变得越发轻易：

function Super(){};
function Sub(){};
Sub.prototype.__proto__ = Super.prototype;

这是一个异常有效的特征，能够免除以下的事情：

  • 借助中心组织器

  • 无需引入第三方模块来举行基于原型继续的声明

接见器

能够挪用要领来定义属性，如其名有：__defineGetter__、__defineSetter__。比方为Date对象定义一个ago的属性，返回以自然语言形貌的日期距离（比方：某件事发生在3秒之前）。比方：

Date.prototype.__defineGetter__('ago',function(){
    var diff = ((Date.now() - this.getTime()) / 1000)
    day_diff = Math.floor(diff / 86400)

    return day_diff == 0 && (diff < 60 && 'just now' )
        || diff < 120 && '1 minute ago' 
        || diff < 3600 && Math.floor(diff / 60) + 'minutes ago'
        || diff < 7200 && '1 hour ago'
        || diff < 86400 && Math.floor(diff / 3600) + 'hours ago'
        || day_diff == 1 && 'Yesterday'
        || diff < 7 && day_diff + ' days ago'
        || Math.ceil(day_diff / 7) + ' weeks ago'
})

var d = new Date('12/12/1990')
console.log(d.ago)
    原文作者：雨碎江南
    原文地址: https://segmentfault.com/a/1190000003718289
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞