轉(zhuǎn)載自?https://www.cnblogs.com/liu-di/p/10690335.html??
一 茄猫、bind
特點:
1.返回原函數(shù)的拷貝柠衍,我們稱這個拷貝的函數(shù)為綁定函數(shù)
2.將函數(shù)中的this固定為調(diào)用bind方法時的第一個參數(shù),所以稱之為綁定函數(shù)。注意是名詞而非動詞妻往。
3.以后無論由哪個對象調(diào)用綁定函數(shù),綁定函數(shù)中的this依然由當(dāng)時調(diào)用的bind方法的一個參數(shù)決定试和,不會改變讯泣。
4.如果綁定函數(shù)作為構(gòu)造函數(shù)來使用,那么已經(jīng)固定了的this將不會生效阅悍,此時構(gòu)造函數(shù)中的this依然為實例對象好渠。
5.調(diào)用bind方法時的第二個參數(shù)做為綁定函數(shù)的第一個參數(shù),稱之為預(yù)設(shè)參數(shù)节视,調(diào)用綁定函數(shù)時的第一個參數(shù)則排在預(yù)設(shè)參數(shù)后面
6.無論使用任何對象調(diào)用bind方法時如果不傳參數(shù)拳锚、第一個參數(shù)為undefined、第一個參數(shù)為null時寻行,綁定函數(shù)中的this指向window對象
作用:
1.拷貝一個目標函數(shù)
2.改變綁定函數(shù)運行時的this指針
1-1 證明是原函數(shù)的拷貝 (需要知道:函數(shù)也是對象霍掺,并且是引用類型,比較的是內(nèi)存地址)
```functionfn(){}varbindFn = fn.bind();//? fn(){ return this }? 供以后調(diào)用fn === bindFn//false
```
2-1 將函數(shù)中的this固定為調(diào)用bind方法時的第一個參數(shù)
```
functionfn(){returnthis}varbindFn = fn.bind({name:"綁定函數(shù)"})//? fn(){ return this }
```
3-1 以后無論由哪個對象調(diào)用綁定函數(shù)拌蜘,綁定函數(shù)中的this依然是{name:"綁定函數(shù)"}
```
functionfn(){console.log(this)? }varbindFn = fn.bind({name:"綁定函數(shù)"})bindFn()//等同于window對象調(diào)用 杆烁, this依然指向{name:"綁定函數(shù)"}varobj = {name:"obj"};obj.fn = bindFn;? ? obj.fn()//由普通對象調(diào)用 ,this依然指向{name:"綁定函數(shù)"}vararr = [bindFn];arr[0]()//由數(shù)組調(diào)用 拦坠, this依然指向{name:"綁定函數(shù)"}setTimeout(bindFn ,200);//作為回調(diào)函數(shù)? 连躏, this依然指向{name:"綁定函數(shù)"}clearTimeout(1);
```
4-1 如果綁定函數(shù)作為構(gòu)造函數(shù),已經(jīng)捆綁的this會被忽略掉贞滨,this依然指向?qū)嵗龑ο?/p>
```
functionPerson(name){this.name = name; }varbindPerson = Person.bind({name:"綁定函數(shù)"})newbindPerson("張三")// Person?{name: "張三"}
```
5-1 預(yù)設(shè)參數(shù)
```
functionfn(a,b,c,d){console.log(a,b,c,d)// 1 入热,2 ,3 晓铆,4}varbindFn = fn.bind({name:"綁定函數(shù)"} ,1,2);// 拷貝原函數(shù)時的第2個參數(shù)開始往后稱為預(yù)設(shè)參數(shù)bindFn(3,4);//調(diào)用綁定函數(shù)時的第一參數(shù)則排在預(yù)設(shè)參數(shù)的后面
```
6-1 當(dāng)沒有參數(shù)勺良、第一個參數(shù)為undefined、第一個參數(shù)為null時
```
varobj = {fnOne:function(){returnthis}.bind(),fnTwo:function(){returnthis}.bind(undefined),fnThree:function(){returnthis}.bind(null)}//注意:這三種情況是使this指向window對象骄噪,而不是不去改變this指向尚困,所以這里的this還是不會指向objobj.fnOne()// windowobj.fnTwo()//windowobj.fnThree()//window
```
二、call
特點:
1.返回值取決于目標函數(shù)的返回值
2.用call的第一個參數(shù)對象來代替調(diào)用目標函數(shù)的對象链蕊,以此來改變目標函數(shù)體內(nèi)的this指向
3.調(diào)用call方法時的第二個參數(shù)做為目標函數(shù)的第一個參數(shù)事甜,將第二個作為第三個以此類推
作用:
1.用于繼承谬泌,例如子構(gòu)造函數(shù)繼承父構(gòu)造函數(shù)
2.改變綁定函數(shù)運行時的this指針。
1-1 返回值取決于目標函數(shù)的返回值
```
functionfn(){return{name:"call"} }fn.call()// {name: "call"}
```
2-1 改變目標函數(shù)體內(nèi)的this指向 , 相當(dāng)于使用第一個參數(shù)對象調(diào)用
```
functionfn(){returnthis}fn.call( {name:"call"} )// {name: "call"}?
```
3-1 參數(shù)位置
```
functionfn(a, b, c){returnarguments}fn.call( {name:"call"} ,1,2,3)//Arguments?[1, 2, 3]
```
1-2 用于繼承
```
functionparent(name, age){this.name = name;this.age= age;}functionchild(name, age){? parent.call(this, name, age);this.class ='三年級二班';}varxiaoming =newchild("小明",18)
```
三逻谦、apply
特點:
1.與call方法一樣唯一不同的地方就是apply的第二個參數(shù)是一個數(shù)組掌实,數(shù)組的第一個元素對應(yīng)目標函數(shù)的第一個參數(shù),以此類推
作用:
1.與call方法一樣
1-1 參數(shù)
functionfn(a, b, c){returna+b+c }fn.apply({name:"apply"} ,[1,2,3])//6
總結(jié)
相同點
1. 3個方法都是改變綁定函數(shù)運行時的上下文
不同點
1.bind方法的返回值是原函數(shù)的拷貝邦马,供以后調(diào)用 贱鼻。參數(shù)既可以在拷貝時預(yù)設(shè)又可在調(diào)用時添加
2.call與apply一樣,返回值取決于目標函數(shù)的返回值 滋将, 則是立即調(diào)用
3.call與apply唯一的區(qū)別是call從第二個參數(shù)開始是若干個參數(shù)邻悬,而apply第二個參數(shù)是一個數(shù)組