Javascript中this的用法详解_基础知识-js教程-PHP中文网

Javascript中this的用法详解_基础知识

php中文网

发布： 2016-05-16 16:35:45

原创

1678人浏览过

前些日子面试的时候用到了this，面试官说我的理解有点偏差，回来看了下书和一些博客，做了点测试，发现自己的理解的确有误

1.全局变量

应该是最常用的吧，函数中调用一个this，这里其实就是全局变量

var value="0"; function mei(){ 
 var value="1"; 
 console.log(this.value); //0  console.log(value);   //1 } 
mei();

登录后复制

输出0就是因为this指向的是全局

2.构造函数

立即学习“Java免费学习笔记（深入）”；

这是我比较熟悉的用法，构造函数中用this，new一个新的对象后this就指向了这个新的对象

var value="window"; function mei(){ 
 this.value=1; 
 this.show=function(){ 
  console.log(this.value) 
 } 
} var m=new mei(); 
console.log(m.value);  //1 m.show();        //1

登录后复制

可以看到输出的是1而并不是window，可见由于构造函数，这里的this已经指向新的对象了而不是全局变量

3.call和apply

PHP5 MySQL 编程入门

既有较为详细的PHP与MySQL基础知识介绍，也有大量针对不同应用的技术说明，并伴随了大量小而精的示例来加深读者的理解，便于通过实验来掌握知识并学会应用。令书以PHP开发者为核心，从环境搭建到系统开发，从局部技术点到项目全程把握，立体式介绍了PHP5+MySQL的技术要点以及丰富的延伸知识，可以让读者享受到提升开发能力的极速体验。

412

查看详情

直接借用我的call和apply的博客中的例子

 var p="456"; 
 function f1(){ 
  this.p="123"; 
 } 
 function f2() { 
  console.log(this.p); 
 } 
 f2();       //456  f2.call(f1());  //123  f2.apply(f1());  //123

登录后复制

第一行输出456很好理解，this指向全局，后面的123是因为使用了call或者apply后，f2中的this指向了f1，而f1中的p为123，具体解释直接戳那篇博文

4.函数作为某个对象的方法调用（我出错的地方）

当时让我写一个对象有几个方法，我脑子一抽定义了个全局变量，然后在对象的方法里用this调用，面试官问我这个this是什么？我说应该是window，因为这种方式我用的少，以为只有new或者call才会改变this的指向，他就说不对，让我回去自己看看，现在试了试，我还真是错了，贴代码

var value="father"; function mei(){} 
mei.value="child"; 
mei.get=function(){console.log(this.value)}; 
mei.show=function(){console.log(value)}; 
mei.get();   //child mei.show();  //father

登录后复制

由于get是作为mei的方法调用的，因此这里的this指向了mei.value所以输出child

至于father我是这样理解的，show指向的函数是定义在全局环境下的，由于作用域链，在show中没有找到value，于是就去定义他的环境中找，这就找到了全局的value，如果这里有理解错误的话希望有朋友可以指出来！