js中call、apply、bind方法的作用和區別
1. call方法
- 作用：專門用于修改方法內部的
this指向 - 格式：
xxx.call( 物件名, 引數1, 引數2 , ...);，即：將xxx方法的this指向為物件名 - 實體：
function test(a,b){
console.log(this);
console.log(a + b);
}
test(1,2); // window 3
var obj = {name:'zjy'};
window.test.call(obj,3,5); // {name:'zjy'} 8
決議：沒有使用 call 方法時，test方法的this指向全域物件window，而當使用了call方法后，將test的this指向從window變成了obj物件，而后面的引數則是對應方法的形參順序
2. apply方法
- 作用：和call方法一樣也是修改方法內部的
this指向的，它們的區別在于apply的第二個引數必須為一個陣列（部署了Iterator介面的類陣列物件也可以） - 格式：
xxx.apply( 物件名, [陣列]);，即：將xxx方法的this指向為物件名,陣列中的元素依次與方法的形參對應 - 實體：
function test(a,b){
console.log(this);
console.log(a + b);
}
test(1,2); // window 3
var obj = {name:'zjy'};
window.test.apply(obj,[3,5]); // {name:'zjy'} 8
決議：沒有使用 apply 方法時，test方法的this指向全域物件window，而當使用了apply方法后，將test的this指向從window變成了obj物件，而后面的陣列引數則是將陣列中元素依次對應到test方法形參的位置
3. bind方法
- 作用：也是改變this的指向問題
- 格式：
xxx.bind( 物件名 , 引數1, 引數2 , ...);，即：將xxx方法的this指向為物件名 - 實體：
var obj = {key:"value"}
var foo = function(){
console.log(this)
}
foo.bind(obj)() // obj
決議：在沒有使用bind方法時，foo()中的this指向的是全域物件window,而使用了bind方法之后則指向的是obj物件
4. 真陣列轉變為類陣列程序
- 寫法：
var arr = [1,3,5];
var obj = {};
[].push.apply(obj,arr); // { 0:1, 1:3 , 2:5 , length:3 }
5. 類陣列轉變為真陣列程序
- ES5寫法：
// 系統自帶類陣列物件
var divs = document.querySelectorAll('div');
// 自定義類陣列物件
var obj = {0:'zjy' , 1:18 , length:2};
var arr = []; // 真陣列
// 在高級的瀏覽器中使用如下的方法是可以實作類陣列物件轉換為真陣列，但是在 IE8 及其以下是不行的
// [].push.apply(arr,divs);
// [].push.apply(arr,obj);
// 為了兼容 IE8 及其以下的瀏覽器，需要使用陣列的 slice 方法
// 陣列的 slice 方法不傳遞引數的時候是將陣列中的元素依次遍歷然后放到一個 新的陣列 中原樣回傳
var arr2 = [].slice.call(obj);
- ES6寫法：
Array.from();方法用于將類陣列物件和可遍歷（Iterator）物件轉換為真陣列
var obj = {0:'zjy' , 1:18 , length:2};
var arr = Array.from(obj) // ['zjy',18]
擴展運算子（...）也可以將可遍歷（Iterator）物件轉換為真陣列
[..document.querySelectorAll('div')]
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/181608.html
標籤：JavaScript
下一篇：JavaScript基礎