js+jquery常用知識點匯總

 本文主要介紹了jquery源碼中常見的知識點以及javascript中原型鏈常見的知識點，非常的全面，這裡推薦給小伙伴們。

   

一、jquery源碼中常見的知識點

　　1.string，number類型轉換的快捷方法

 

復制代碼 代碼如下:
// @param s為字符串，n為數字
function fn(obj){
//轉換為String類型
var s = obj +"";
//轉換為number類型
var n = +obj;
}

 

　　分享一個面試例子：

//加會將其後面自動轉換成字符串
"64"+4="644"
//減會將其自動轉換成數字
"64"-4=60

　　2.bool類型轉換

　　!!obj，將其強制轉換為bool類型

 

復制代碼 代碼如下:
alert(!!0) //結果為false
alert(!!"33dd") //結果為true

 

　　!obj，取相反的bool類型

 

復制代碼 代碼如下:
alert(!0) //結果為true
alert(!"222333") //結果為false

 

　　3.=== 與 ==區別

　　=== 是嚴格相等，不會進行類型轉換，而 == 是不嚴格相等，會進行類型轉換。有些js的書中，建議開發人員永遠不要用 == 或者 != 。

　　但是jquery源碼中，有用到“==”或者“!=”的情況 —— 判斷 undefined 和 null 的時候。

 

復制代碼 代碼如下:
//這裡的判斷，將obj是null，obj是undefined都排除在外了
if(obj != null){
}

 

　　4.檢測obj是否為window對象

 

復制代碼 代碼如下:
//null == window.null為true
function isWindow(obj){
return obj != null && obj == window.obj;
}

 

　　5.|| 與 && 用法技巧

 

復制代碼 代碼如下:
//例 var aa=5; name = aa || {} ; alert(name) 則name為55
this.name = name || {} //如果name值存在，則值為name，反之為{}
//例 var aa=5; name = aa && {} ; alert(name) 則name為{}，因為aa為5，不為0則為真
this.name = bool && [] //如果bool為true，則值為[],反之則為bool

 

　　經典實例:

 

復制代碼 代碼如下:
( window.foo || ( window.foo = "bar" ) );
alert(window.foo); //彈出 bar
// 為什麼最後的結果是bar呢，其實可以看成是 undefined || bar 出來的結果肯定是bar

 

　　6.setTimeout(fn,0)與setTimeout(fn)區別

　　setTimeout(fn,0)與setTimeout(fn)都是延遲執行，但是setTimeout(fn)比setTimeout(fn,0)延遲時間還要長，例

 

復制代碼 代碼如下:
function fn(){
var data = new Date();
for(var i=0;i<=1000;i++){
if(i==1000){
console.log("fn="+data.getTime());
}
}
}
function fn1(){
var data = new Date();
for(var i=0;i<=1000;i++){
if(i==1000){
console.log("fn1="+data.getTime());
}
}
}
setTimeout(fn,0),
setTimeout(fn1);

 

　　結果：

　　7.判斷是否為數值

 

復制代碼 代碼如下:
function isNumeric(obj){
return !isNaN(parseFloat(obj)) && isFinite(obj);
}

 

　　8.判斷是否為空對象

 

復制代碼 代碼如下:
function isEmptyObject(){
var name;
//遍歷不是空對象返回
for (name in obj) {
return false;
}
return true;
}

 

　　9.檢測對象類型

　　檢測obj對象類型，返回類型,通過Object.prototype.toString()來判斷類型，但是ie低版本兼容性有問題，因此采用{}.toString來監測，返回為[object Array],[object Object],[object Function]

 

復制代碼 代碼如下:
// 類型判斷
function isType(type){
return function(o){
return Object.prototype.toString.call(o) === '[object ' + type + ']';
}
}
var isString = isType(“String”);
var isObject = isType("Object");
var isArray = isType("Array");
isString("I'm Barret Lee.");
isArray([1,2,3])；
isObject({});

 

　　10.jquery裡的去除空格trim妙用

 

復制代碼 代碼如下:
//相當於if (String.prototype.trim && “uFEFFxA0″.trim() !== “”)高級的浏覽器已經支持原生的String的trim方法，但是pFan還為了避免它沒法解析全角空白，所以加多了一個判斷：”uFEFFxA0″.trim() !== “”
vart core_version = "1.0",core_trim = core_version.trim;
function trim(){
core_trim && !core_trim.call("uFEFFxA0") ?
function (text) {
return text == null ?
"" :
core_trim.call(text); //這裡按我的理解應該為" ".trim.call(text),有點不明白轉換為"1.1.0".trim.call(text)
} :

// 高級的浏覽器已經支持原生的String的trim方法，如果浏覽器不支持則采用
function (text) {
var whitespace = "[x20trnf]",
rtrim = new RegExp("^" + whitespace + "+|((?:^|[^])(?:.)*)" + whitespace + "+$", "g");
return text == null ?
"" :
(text + "").replace(rtrim, "");
},
//nodeName函數是獲取dom節點的節點名字或者判斷其名字跟傳入參數是否匹配
nodeName: function(elem,name){
//IE下，DOM節點的nodeName是大寫的，例如DIV
return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();
}
}

 

　　11.jquery中檢測數組或者類數組中是否含存在傳入的值

 

復制代碼 代碼如下:
/**
檢查數組中是否存在傳入的值，如果存在就返回值所在的位置，如果不存在就返回-1。
*elem 規定需檢索的值。
*arr 數組
*i 可選的整數參數。規定在數組中開始檢索的位置。它的合法取值是 0 到 arr.length - 1。如省略該參數，則將從數組首元素開始檢索。
*/
function inArray(elem, arr, i){
var len;
if (arr) {
//如果浏覽器支持Array擁有indexOf方法
if ([].indexOf) {
return [].indexOf.call(arr, elem, i);
}
len = arr.length;
//當i為負數的時候，從數組後邊len+i的位置開始索引
//理解這個分成兩個部分i = i ? (i < 0 ? Math.max(0, len + i) : i) : 0;，i=i為true，執行(i < 0 ? Math.max(0, len + i) : i)，反正執行i=0
i = i ? i < 0 ? Math.max(0, len + i) : i : 0;
for (; i < len; i++) {
// 雙重檢測防止類似這樣的數組 ar = [];ar[1]=1;ar[0] = undefined; 0 in ar =false;a[0]===undefined;
// 0 in arr => arr[0]是否存在 'nme' in arr => arr['nme']是否存在
if (i in arr && arr[i] === elem) {
return i;
}
}
}
return -1;
}

 

二、javascript中原型鏈常見的知識點

　　1.hasOwnProperty()方法

　　 使用hasOwnProperty()方法可以檢測一個屬性是存在與實例，還是存在於原型中。這個方法從Object繼承，只在給定屬性存在於對象實例中時，才會返回true。

 

復制代碼 代碼如下:
function Person(){
this.age=25;
this.job="web";
}
Person.prototype={
name:'pingfan',
sayName:function(){
alert(this.name);
}
}
var person1=new Person();
//來自構造函數，檢測屬性，也返回true
alert(person1.hasOwnProperty("age"));
//來自原型屬性，返回false
alert(person1.hasOwnProperty("name"));
person1.name='ping';
//來自實例屬性，返回true
alert(person1.hasOwnProperty("name"));

 

　　2.通過instanceOf保證只實例一次

 

復制代碼 代碼如下:
function shiCha(opt){
//只實例一次
if( !(this instanceof shiCha)){
return new shiCha(opt);