javascript知识整理之this

js中的this是一个头疼的问题，尤其对于笔者这种初级的菜鸟来讲，下面梳理下this的知识，可以当做是初级进阶也好入门也罢，总归输出的才是自己掌握的:

Js中this不是由词法作用域决定的而是调用时动态指定，这就有点麻烦了，如果不能明确知道函数调用时的词法作用域this的指向也就只能靠猜了，算一卦这种模式不是不推荐而是根本不能用，要是真的不能确定this指向可以查一下调用栈或是上个断点之类的，当然alert这种较为原始的方法也是有效的不过确实有点low;

Js函数调用方式大致可以归为四类(此处是阮一峰大神总结的)即a.直接调用(默认指向)b.当方法调用(隐式指向)c.用new调用d.是特殊的调用方式(bind,call..)(显示指向);

当然了这里是有优先级的就像css的class一样即: c > d > b > a;下面也说以便这四种当用方式(非严格模式):

A.直接调用

function fn(){

console.log(this)

}

fn();

这里的this是window 这个是比较简单基础，像是这样：

var n = 7;

function fn(){

   this.n = 8;

   function fn1(){

      console.log(this.n)

   }

   return fn1();

}

var test = new fn();

这里this也是指向window的所以this.n==window.n 也就是7.这里也可以看出this不是基于词法作用域的而是调用时指定的，怎么回事呢，有句话大概意思就是只要是函数声明其this都指向window ,与声明的位置无关;

B.当方法调用：

var name = "a";

var obj = {

      name: "b",

      sayname: function(){

      console.log(this.name);

   }

}

obj.sayname();

这个也是一个典型的基础的案例，输出 b ；this指向obj;这段代码其实就是这样的:

var name = "a";

var obj = new Object();

obj.name = "b";

obj.sayname = function(){

   console.log(this.name);

}

obj.sayname();

这里有个小坑，像是这样:

var name = "a";

var obj = {

   name: "b",

   obj2: {

      name: "c",

      sayname: function(){

         console.log(this.name);

      }

   }

}

obj.obj2.sayname();

Var test = obj.obj2.sayname;

Test();

第一个congsole是 c ；原因也是一直提的this不是取决于词法作用域的而是动态绑定的 obj.obj2.sayname 这里sayname是作为obj.obj2对象的函数调用的所以this指向obj.obj2;

第二个console也好理解,当sayname赋值给变量test时当前执行上下文就变了。指向window了。所以第二个是c; 简单讲当方法调用时 this指向调用方法的那个对象;换言之谁调用了这个方法this指向谁;

C.由new调用:

先上代码:

var name = "b";

function fn(){

   this.name = "a";

   this.sayname = function(){

      console.log(this.name)

   }

}

var obj = new fn();

obj.sayname();

在看这段代码前应该了解下 new的时候到底发生了些什么事..，调用的时候由new调用的函数就是构造函数了.为什么用构造函数呢，这个也好理解，总不能相似的功能都要复制粘贴吧.以上边代码为例当执行new fn()时在fn函数第一行隐式的创建了一个对象即 var o = new Object();下面的this全部替换成了o，也就是o.name = “a”;... 最后把这个对象o return了。而又把这个返回值赋给了变量obj，obj的引用地址也是指向这个对象（复合类型）;所以结果是a；

D.特殊的调用方式（有时候也叫硬性绑定或显示绑定）:

Call与applay用法一样唯一区别在意一个传递的参数是集合(applay)另一个是用几个参数写几个参数(call)：

var name = "a";

var obj = {

   name: "b",

   obj2: {

      name: "c",

      sayname: function(){

         console.log(this.name);

      }

   }

}

obj.obj2.sayname.call(obj);

没错用了B 的例子，这下输出b ，我们给他硬性的绑定到了obj上，用apply与bind也是一样的; 还有像是eval setInterval等这种奇葩其作用域是全局的要是在这里边用this不做处理的话都会指向window...

虽然this有点诡异却不是飘忽不定，哦对了作为一个前端怎么不接触dom呢 dom事件也会改变this指向的比如:

document.onclick = function(){

   console.log(this)

}

这里会打印document这个节点，简而言之事件在哪this就指向那;

巴特西

javascript知识整理之this

最新文章

热门文章