0x00、从我对this的感想说起
JavaScript中的this机制是一个令人非常苦恼的机制,即使你在写JS代码中可以去尽量避免它,但是当去阅读一些源代码或者大牛的代码时候你却依旧绕不开它,而且作为一个很常用机制之一,this当然有他足够优雅的一面,那么何不去发现它奥秘的一面,并尽量驯服它了
0x01、为什么要运用this
先看一个函数的传入参数为一个对象的例子
- demo1:
function identify(context){
return context.name.toUpperCase();
}
var edg = {
name:'qi'
}
identify(edg); //QI,其中egd作为对象作为参数被传入函数中
在这个例子的基础上,我们来增加复杂点实现一个函数复合调用
- 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()的形参需要保持一致性才可以得到了我们想要的结果
那么使用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对象,从而实现了和demo2中函数传对象作为参数一样的效果。
___总结: ___ 通过对比我们可以发现this提供了一种更优雅的方式来隐隐式“ 传递”一个对象引用,这样API的设计更简洁和易于复用;而且伴随你使用模式越来越复杂, 显式传递上下文对象(demo2中演示的)会让代码变得越来越混乱, 使用this则不会这样。