2019-8-21 seo達人
今天給朋友們帶來更改this指向的三種方法，以及它們的區別：
一：call用法
window.color = 'red';
document.color = 'yellow';
var s1 = {color: 'blue'};
function changeColor () {
console.log(this.color);
}
changeColor.call() //不傳參數默認指向window
changeColor.call(window) //指向window
changeColor.call(document) //指向document
changeColor.call(this) //構造函數的this如果打括號調用默認指向window
changeColor.call(s1) //指向s1對象
//例二：
var Pet = {
words: '...',
speak: function (say) {
console.log(say + '' + this.words)
}
}
Pet.speak('123') //輸出123...
var Dog = {
words: 'WangWangWang'
}
Pet.speak.call(Dog,'123') //輸出123WangWangWang
二：apply用法：
window.number = 'one';
document.number = 'two';
var s1 = {number: 'three'};
function changeNum() {
console.log(this.number)
}
changeNum.apply(); //one
changeNum.apply(window); //one
changeNum.apply(document);//two
changeNum.apply(this);//one
changeNum.apply(s1);//three
//例二：
function Pet(words){
this.words = words;
this.speak = function(){
console.log(this.words)
}
}
function Dog(words){
Pet.call(this,words);//結果wang
// Pet.apply(this,arguments);//結果wang
}
var dog = new Dog('wang');
dog.speak(); //wang
apply與call的區別：
接收的參數不同
apply()方法接收倆個參數，一個是函數運行的作用域（this），另一個是參數數組。
call()方法第一個參數和apply()方法的一樣，但是傳遞給函數的參數必須一 一列舉出來。
語法：
apply([thisObj [,argArray]]);
調用一個對象的一個方法，另一個對象替換當前對象
call([thisObj [,arg1[,arg2[…,argn]]]])；
說明：
如果thisObj是null或者undefined的時候，默認指向window。
如果argArray不是一個有效數組或不是arguments對象，那么將導致一個TypeError，如果沒有提供argArray和thisObj任何一個參數，那么Global對象將用作thisObj。
call方法可以用來代替另一個對象的一個方法，call方法可以將一個函數的對象上下文從初始的上下文改變為thisObj指定的新對象，如果沒有提供thisObj參數，那么Global對象被用于thisObj。
三：bind的用法：
var obj = {
name: 'WuXiaoDi'
}
function printName() {
console.log(this.name)
}
var wuXiaoDi = printName.bind(obj)
console.log(wuXiaoDi) //function(){...}
wuXiaoDi() //WuXiaoDi
//例二：
function fn(a, b, c) {
console.log(a, b, c);
}
var fn1 = fn.bind(null, 'Dot');
fn('A', 'B', 'C'); //A B C
fn1('A', 'B', 'C'); // Dot A B
fn1('B', 'C'); // Dot B C
fn.call(null, 'Dot'); // Dot undefined undefined
//例三：實現函數珂里化
var add = function(x) {
return function(y) {
return x + y;
};
};
var increment = add(1);
var addTen = add(10);
increment(2) //3
addTen(2) //12
小總結：
Function.prototype.bind(thisArg) - - ES5
能夠返回一個新函數，該新函數的主體與原函數主體一致，但當新函數被調用執行時，函數體中的this指向的是thisArg所表示的對象。
Function.prototype.call(this.Arg,val1,val2, …)
調用函數執行，在函數執行時將函數體中的this指向修改為thisArg所表示的對象
val1, val2, … 表示傳遞給調用函數的實際參數列表
Function.prototype.apply(thisArg, array|arguments)
調用函數執行，在函數執行時將函數體中的this指向修改為thisArg所表示的對象，
array|arguments 表示調用函數的參數列表，使用數組或類數組的格式
區別：
bind與call和apply的區別：
返回值的區別：
bind的返回值是一個函數，而call和apply是立即調用。
參數使用的區別：
bind與call一樣是從第二個參數開始將想要傳遞的參數一 一寫入。但call是把第二個及以后的參數作為fn方法的實參傳進去，而fn1方法的實參實則是在bind中參數的基礎上再往后排。
藍藍設計( www.jjddy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。