浅谈javascript-this关键字

前言

JavaScript中this变量是一个令人难以摸清的关键字，当初学习javascript的时候被这个this指向问题折腾的我是惨不忍睹，漏洞百出。一度想在后面的代码过程中放弃对this的使用，但是this在javascript当中用处太广泛了。

充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余，没办法只能硬着头皮上呀。被虐多次再结合自己查阅相关文档资料，总算有一点小小心得。特分享出来，供大家参考！

this简述

关于this的清this所引用的对象到底是哪一个，也许很多资料上都有自己的解释。例如我钟爱的《高三》对this也是简单几页翻过。最后翻阅到MDN上面的wen技术文档，上面解释深得我意。

在绝大多数情况下，函数的调用方式决定了this的值。this不能在执行期间被赋值，在每次函数被调用时this的值也可能会不同。

--MDN社区web技术文档

由此可以推出this的在不同的情况下，this的指向各不相同。简单来说就分为5种情况

1、全局环境

var a = "先制定一个小目标，下一顿饭加一个鸡腿";

console.log(this);  // 这里this就指向 window

console.log(this.a);  //控制台输出  "先制定一个小目标，下一顿饭加一个鸡腿"

这一种情况相信大家都非常好理解，在全局环境当中this默认是指向window

2、函数中调用

function foo1() {

   function bar() {

     console.log(this);

  }

    bar();

}

foo1();     // 输出window

当foo1()执行的时候，间接相当于window.foo1()执行函数中的this是指向window，因此控制台相应输出window结果。（foo1() 间接也等于 window.foo1(),这样就是相当于window在调用这个函数，因此this也是指向于window。）

3、对象中调用

var x = "今天交房租";

var obj = {

foo:function() {

    console.log(this.x);

},

x:"房租减免"；

};

obj.foo();   //控制台输出 "房租减免"

这是当对象obj调用foo()函数，this指向了这个调用对象，即this就等于obj，控制台式输出就变成了obj.最后控制台便输出 "房租减免"，唉！！这要是从房东嘴巴里面输出该多好！！

4、构造函数中

var name = "hahaha";

function Obj() {

this.name = "CheDabang";

}

var person = new Obj();

console.log(person.name); //输出 CheDabang

这里通过new运算符创建一个 Obj的对象实例。

变成person{this.name}，因此这里this的指向也随着指向这个新实例对象。因此控制台输出 CheDabang

5、apply、call中调用

当一个函数的函数体中使用了this关键字时，通过所有函数都从Function对象的原型中继承的call()方法和apply()方法调用的时候，它的值可以绑定到一个指定的对象上。

function add(c, d){

return this.a + this.b + c + d;

}

var o = {a:1, b:3};

console.log(add.call(o, 5, 7));              //1 + 3 + 5 + 7 = 16

console.log(add.apply(o, [10, 20]));        // 1 + 3 + 10 + 20 = 34

小练习

以上就是我们常常出现的5种情况，看到这么多情况的介绍。诸位看官，也晕了吧。不要着急，让我们再来几个小练习感受一下这位this大爷的指向。

题目①

Code

var a = 10;

function test(){

  a = 5;

  console.log(a);

  console.log(this.a);

  var a ;

  console.log(this.a);

  console.log(a);

}

test();

new test();

当调用test()的时候，控制台分别输出 5、10、10、5

当调用 new test()的时候，控制台分别输出 5、undefined、undefined、5

解析

当var a = 10 ==> var window.a = 10 ;

当test()调用的时候，间接也相当于window.test()调用。因此当这个函数执行的时候，这里面的this指向的是window对象，因此this.a 指向的是window = 10；

当new test() 实例化，因此this指向的是这个实例的对象，因此这个新对象的a，并没有直接定义过。所以控制台输出undefined

题目②

Code

var Funllname = "john Doe";

var obj = {

  Funllname:"Colin Thrig",

  prop:{

    getFullname:function(){

      return this.Funllname;

    }

  },

};

 console.log(obj.prop.getFullname());

var test = obj.prop.getFullname;

 console.log(test());

控制台输出

undefined

john Doe

解析

控制台结果1：当obj.prop.getFullname()在调用的时候，相当于执行了其中的函数。而由于调用这个函数的是obj.prop调用的，因此this就直接指向obj.prop，但是obj.prop这个对象当中并没有定义Fullname,因此输出undefined。

控制台结果2：当var test = obj.prop.getFullname; 这个时候就间接相当于==>var test = function(){return this.Funllname;}

因此当test()调用的时候，就相当于 ==> window.test();,因此其中的this便指向了window对象，所以便输出了 john Doe

题目③

Code

var sex = "male";

var saySex = {

sex:"female",

saySex:function(){

    function getSex(){

        console.log("this.sex="+this.sex);

        }

    getSex();

    }

}

saySex.saySex();

控制台输出

this.sex = male

解析

控制台结果：当saySex.saySex()调用的时候，只是相当saySex的函数被调用。之后在函数中，函数getSex()被调用，此时this便指向getSex().而函数getSex()默认情况下是指向window的，因此这里输出this.sex = male

题目④

Code

var name = "chedabang";

function sayName(){

var a = {

    name:"加一个鸡腿",

    sayName:getName

};

function getName(){

    console.log(this.name);

}

getName();

a.sayName();

getName.call(a);

}

sayName();

控制台输出

chedabang

加一个鸡腿

加一个鸡腿

解析

当sayName()运行的时候时候，先是里面的第一个函数运行，getName().因此因此其中的this，便默认指向了window，因此this.name ==> chedabang

其次a.sayName()运行，因为sayName = getName。所以即当于getName再次被调用，由于存在调用对象a。因此此时this又重新指向对象a，对象 a 当中存在name属性，因此输出加一个鸡腿。

最后 getName.call(a).运行的时候，将对象a给绑定到上面，因此函数里面的this就不指向window，而指向的是绑定的对象a，因此输出 加一个鸡腿

题目⑤

Code

var a = {

    name:"张三",

    sayName:function(){

    console.log("this.name="+this.name);

  }

};

var name = "李四";

function sayName1(){

  var sss = a.sayName;

  sss();

  a.sayName();

  (a.sayName)();

  (b = a.sayName)();

}

sayName1();

控制台输出：

this.name=李四

this.name=张三

this.name=张三

this.name=李四

解析

当sayName1()运行的时候，sayName1函数内部首先是

控制台结果1：var sss = a.sayName ==> var sss = function(){console.log("this.name="+=this.name);} 像前面我们总结的一样函数中调用，因此这里的this指向window对象，因此输出this.name=李四

控制台结果2：a.sayName();这里a直接调用其中的匿名函数，因此此时this指向a，因此a.name = "张三"，所有控制台输出this.name=张三

控制台结果3：这里(a.sayName)();其实间接相当于 == a.sayName();这里指的是值立即执行。不管如何始终是对象a在调用sayName这个函数。因此控制台也就跟着一起输出this.name=张三。

控制台结果4：和控制台结果3一样，代表变量b立即执行，而b和控制台结果1中sss一样，也属于函数中调用，因此this这里指向window。即控制台输出this.name=李四

巴特西

浅谈javascript-this关键字

前言

this简述

1、全局环境

2、函数中调用

3、对象中调用

4、构造函数中

5、apply、call中调用

小练习

题目①

Code

题目②

Code

解析

题目③

Code

解析

题目④

Code

解析

题目⑤

Code

解析

看到这里是不是豁然开朗了,相信进过this这么几道题的磨练，大家应该对this了解有加深了不少。如果讲的有错误,还请大牛们给指出来,在此谢谢了.

最新文章

热门文章