javascript的高級特性實例用法

本篇內容主要講解“javascript的高級特性實例用法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“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);

級聯函數

級聯就是一個對象將其所有有關的東西連接到了一起。如：以下的對象。

// 人：手、腿、嘴
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);

我們知道造人是一個整體（不可能先造手、再造腿、最后造嘴），我們現在的需求是一旦實例化人這個對象，該有的都有了。

簡單修改以上代碼：

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方法

字符串替換，注意：該方法生成一個新的臨時字符串副本。如圖所示：

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"]

在實際的開發中我們可以借助在線正則調試工具來調試我們的正則，其實里面內置了大量常用的正則。如果我們在開發中分析不出別人的正則的含義可以借助正則分析網站，將會以有限自動機圖解的方式顯示。

正則中的元字符

正則中的元字符必須進行轉義處理:

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

需要注意的是正則有2種創建形式:字符串字面量和new RegExp()的方式.由于RegExp的構造函數是字符串,所以某些情況下需要進行雙重轉義.

__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)

到此，相信大家對“javascript的高級特性實例用法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！