JS中call,apply,bind方法的區別
call,apply,bind這三個方法其實都是繼承自Function.prototype中的,屬於實例方法。
console.log(Function.prototype.hasOwnProperty('call')) //true console.log(Function.prototype.hasOwnProperty('apply')) //true console.log(Function.prototype.hasOwnProperty('bind')) //true
1.Function.prototype.call()
函數實例的call方法,可以指定該函數內部this的指向(即函數執行時所在的作用域),然後在所指定的作用域中,調用該函數。並且會立即執行該函數。
看個例子來好好理解這段話。
var keith = { rascal: 123 }; var rascal = 456; function a() { console.log(this.rascal); } a(); //456 a.call(); //456 a.call(null); //456 a.call(undefined); //456 a.call(this); //456 a.call(keith); //123
上面代碼中,a函數中的this關鍵字,如果指向全局對象,返回結果爲456。可以看到,如果call方法沒有參數,或者參數爲null或undefined或者this,則等同於指向全局對象。如果使用call方法將this關鍵字指向keith對象,也就是將該函數執行時所在的作用域爲keith對象,返回結果爲123。
call()方法可以傳遞兩個參數。第一個參數是指定函數內部中this的指向(也就是函數執行時所在的作用域),第二個參數是函數調用時需要傳遞的參數。
function keith(a, b) { console.log(a + b); } keith.call(null, 1, 2); //3
第一個參數是必須的,可以是null,undefined,this,但是不能爲空。設置爲null,undefined,this表明函數keith此時處於全局作用域。第二個參數中必須一個個添加。而在apply中必須以數組的形式添加。
call方法的一個應用是調用對象的原生方法。也可以用於將類數組對象轉換爲數組。
var obj = {}; console.log(obj.hasOwnProperty('toString')); //false obj.hasOwnProperty = function() { return true; } console.log(obj.hasOwnProperty('toString')); //true console.log(Object.prototype.hasOwnProperty.call(obj, 'toString')); //false
上面代碼中,hasOwnProperty是obj對象繼承的方法,如果這個方法一旦被覆蓋,就不會得到正確結果。call方法可以解決這個方法,它將hasOwnProperty方法的原始定義放到obj對象上執行,這樣無論obj上有沒有同名方法,都不會影響結果。要注意的是,hasOwnProperty是Object.prototype原生對象的方法,而call是繼承自Function.prototype的方法。
2.Function.prototype.apply()
apply方法的作用與call方法類似,也是改變this指向(函數執行時所在的作用域),然後在指定的作用域中,調用該函數。同時也會立即執行該函數。唯一的區別就是,它接收一個數組作爲函數執行時的參數。
apply方法的第一個參數也是this所要指向的那個對象,如果設爲null或undefined或者this,則等同於指定全局對象。第二個參數則是一個數組,該數組的所有成員依次作爲參數,在調用時傳入原函數。原函數的參數,在call方法中必須一個個添加,但是在apply方法中,必須以數組形式添加。
看一下call,apply的細微差別。
function keith(a, b) { console.log(a + b); } keith.call(null, 2, 3); //5 keith.apply(null, [2, 3]); //5
上面代碼中,第一個參數爲null,指向全局作用域;第二個參數傳入的形式稍稍不同。
apply方法有以下應用。
2.1:找出數組中的最大數
var a = [2, 4, 5, 7, 8, 10]; console.log(Math.max.apply(null, a)); //10 console.log(Math.max.call(null,2, 4, 5, 7, 8, 10)); //10
Javascript中是沒有提供找出數組中最大值的方法的,結合使用繼承自Function.prototype的apply和Math.max方法,就可以返回數組的最大值。
2.2:將數組的空元素變爲undefined
通過apply方法,利用Array構造函數將數組的空元素變成undefined。
console.log(Array.apply(null, [1, , 3])); // [1, undefined, 3]
空元素與undefined的差別在於,數組的forEach方法會跳過空元素,但是不會跳過undefined和null。因此,遍歷內部元素的時候,會得到不同的結果。
var a = [1, , 3]; a.forEach(function(index) { console.log(index); //1,3 ,跳過了空元素。 }) Array.apply(null,a).forEach(function(index){ console.log(index); ////1,undefined,3 ,將空元素設置爲undefined })
2.3:轉換類似數組的對象
另外,利用數組對象的slice方法,可以將一個類似數組的對象(比如arguments對象)轉爲真正的數組。當然,slice方法的一個重要應用,就是將類似數組的對象轉爲真正的數組。call和apply都可以實現該應用。
console.log(Array.prototype.slice.apply({0:1,length:1})); //[1] console.log(Array.prototype.slice.call({0:1,length:1})); //[1] console.log(Array.prototype.slice.apply({0:1,length:2})); //[1,undefined] console.log(Array.prototype.slice.call({0:1,length:2})); //[1,undefined] function keith(a,b,c){ return arguments; } console.log(Array.prototype.slice.call(keith(2,3,4))); //[2,3,4]
上面代碼的call,apply方法的參數都是對象,但是返回結果都是數組,這就起到了將對象轉成數組的目的。從上面代碼可以看到,這個方法起作用的前提是,被處理的對象必須有length屬性,以及相對應的數字鍵。
3.Function.prototype.bind()
bind方法用於指定函數內部的this指向(執行時所在的作用域),然後返回一個新函數。bind方法並非立即執行一個函數。
var keith = { a: 1, count: function() { console.log(this.a++); } }; keith.count(); //1 keith.count(); //2 keith.count(); //3
上面代碼中,如果this.a指向keith對象內部的a屬性,如果這個方法賦值給另外一個變量,調用時就會出錯。
var keith = { a: 1, count: function() { console.log(this.a++); } }; var f = keith.count; f(); //NaN
上面代碼中,如果把count方法賦值給f變量,那麼this對象指向不再是keith對象了,而是window對象。而window.a默認爲undefined,進行遞增運算之後undefined++就等於NaN。
爲了解決這個問題,可以使用bind方法,將keith對象裏的this綁定到keith對象上,或者是直接調用。
var f = keith.count.bind(keith); f(); //1 f(); //2 f(); //3 keith.count.bind(keith)() //1 keith.count.bind(keith)() //2 keith.count.bind(keith)() //3
當然,this也可以綁定到其他對象上。
var obj = { a: 100 }; var f = keith.count.bind(obj); f(); //100 f(); //101 f(); //102
同樣,我們也可以給bind方法傳遞參數,第一個參數如果爲null或者undefined或者this,會將函數內部的this對象指向全局環境;第二個爲調用時需要的參數,並且傳遞參數的形式與call方法相同。
function keith(a, b) { return a + b; } console.log(keith.apply(null,[1,4])); //5 console.log(keith.call(null,1,4)); //5 console.log(keith.bind(null, 1, 4)); //keith() console.log(keith.bind(null, 1, 4)()); //5
上面代碼中,可以看出call,apply,bind三者的區別:call和apply方法都是在調用之後立即執行的。而bind調用之後是返回原函數,需要再調用一次才行,有點像閉包的味道,
REM響應式佈局
REM: 根據根元素html的font-size值來設置大小
EM: 根據body元素font-size值設置大小
REM響應式佈局只做移動端 使用方法:
1.如果html:font-size: 15px,那麼 1rem=15px;
2.如果設計稿寬爲640px,則html:font-size=屏幕寬度/640*15px,dom中20px等於20/15=1.3rem;
+function () {
var desW = 640,
broW = document.documentElement.clientWidth,
main = document.querySelector("#main");
if (broW > desW) {
main.style.width = desW + "px";
main.style.margin = "0 auto";
return;
}
var ratio = broW / desW;
document.documentElement.style.fontsize = ratio * 15 + "px";
}();