学习笔记=>《你不知道的JavaScript(上卷)第二部分》第一章:关于this

为什么要使用this

  通过一个例子来看看为什么要使用this:

var me = {
        name:'lebron james'
}

var you = {
        name:'杨少侠'
}

function bar(){
        return this.name;
}

function baz(){
        return '----->' + bar.call(me).toUpperCase();
}

console.log(bar.call(me));    //'lebron james'

console.log(bar.call(you));   //'杨少侠'

console.log(baz());   //'----->LEBRON JAMES'

  这段代码可以在不同的上下文对象(me和you)中重复使用函数bar和baz,不用针对每个对象编写不同版本的函数。

  如果不使用this就得显示的传递一个上下文对象给bar和baz:

function bar(context){
       return context.name;
}

function baz(context){
       return '------>' + context.name.toUpperCase();
}

console.log(bar(you));

console.log(baz(me));

  然而this提供了一种更优雅的方式来‘隐式’传递一个对象引用。

 

对this的误解:

  1,指向自身

bar.count = 0;

function bar(num){
        console.log(num);
        this.count ++;
}

for(var i=0;i<3;i++){
       bar(i);
}

console.log(bar.count);     //0

//0,1,2

  实际上bar是执行了3次的,最后打印bar.count还是为0,显然指向自身是不正确的。

  其实this.count中的this并不是执行bar这个函数对象,虽然名字相同但是其实根对象并不相同。

  (this.count ++;其实最后在全局的作用下创建了一个变量count)

  另一种解决办法使用bar标识符代替this:

bar.count = 0;

function bar(num){
     console.log(num);    //0,1,2
     bar.count ++;
}

for(var i=0;i<3;i++){
     bar(i);
}

console.log(bar.count);    //3

  这种方式完全依赖bar的词法作用域。

  另一种方式是强制this指向bar函数对象:

bar.count = 0;

function bar(num){
     console.log(num);    //0,1,2
     this.count ++;
}

for(var i=0;i<3;i++){
      bar.call(bar,i);
}

console.log(bar.count);  //3

 

  2,它的作用域,书中描述:

需要明确的是,this在任何情况下都不会指向函数的词法作用域,在JavaScript内部,作用域确实和对象类似,可见的标识符都是它的属性,但是作用域‘对象’无法通过JavaScript代码访问,它存在于JavaScript引擎内部。

每当你想要把词法作用域的查找和this混合使用时,一定要提醒自己,这是无法实现的。

 

this到底是什么:

  this是在运行的时候进行绑定的,并不是在编写的时候绑定。它的上下文取决于函数调用时的各

  种条件。this的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式

 

posted @ 2018-10-21 21:33  小菜鸡的梦  阅读(147)  评论(0编辑  收藏  举报