0x00瘾蛋、從我對this的感想說起
JavaScript中的this機制是一個令人非称鏊福苦惱的機制篱蝇,即使你在寫JS代碼中可以去盡量避免它,但是當去閱讀一些源代碼或者大牛的代碼時候你卻依舊繞不開它岭妖,而且作為一個很常用機制之一临庇,this當然有他足夠優(yōu)雅的一面,那么何不去發(fā)現(xiàn)它奧秘的一面昵慌,并盡量馴服它了
0x01假夺、為什么要運用this
先看一個函數(shù)的傳入?yún)?shù)為一個對象的例子
- demo1:
function identify(context){
return context.name.toUpperCase();
}
var edg = {
name:'qi'
}
identify(edg); //QI,其中egd作為對象作為參數(shù)被傳入函數(shù)中
在這個例子的基礎(chǔ)上,我們來增加復(fù)雜點實現(xiàn)一個函數(shù)復(fù)合調(diào)用
- demo2:
function identify(context){
return context.name.toUpperCase();
}
function upIde(context){
var a = 'hello' + identify(context);
console.log(a);
return a
}
var edg = {
name:'qi'
}
identify(edg); //QI
upIde(edg); //'helloQI'废离,只有upIde()和identify()的形參需要保持一致性才可以得到了我們想要的結(jié)果
那么使用this可以如何去解決demo2中的效果了
- this-demo:
function identify(){
return this.name.toUpperCase();
}
function upIde(){
var a = 'hello'+identify.call(edg);
console.log(a);
}
var edg = {
name:'qi'
}
identify.call(edg); //QI
upIde.call(edg); //'helloQI'
上面的demo運用call()方法侄泽,將this指向edg對象,從而實現(xiàn)了和demo2中函數(shù)傳對象作為參數(shù)一樣的效果蜻韭。
___總結(jié): ___ 通過對比我們可以發(fā)現(xiàn)this提供了一種更優(yōu)雅的方式來隱隱式“ 傳遞”一個對象引用,這樣API的設(shè)計更簡潔和易于復(fù)用柿扣;而且伴隨你使用模式越來越復(fù)雜肖方, 顯式傳遞上下文對象(demo2中演示的)會讓代碼變得越來越混亂, 使用this則不會這樣未状。