《你不知道的javascript》上卷

this和对象原型(一)——this解析

Posted by Small Star on May 4, 2017

在翻阅《你不知道的javascript》这一套书的中上卷目录之后,发现书中针对闭包、对象、原型、语法、异步、回调等等既基础又重要的 javascript知识有着针对性的阐述,于是决定对这套书的中上卷进行学习。上卷和中卷各讲述了两大部分知识,分别是:作用域与闭包、 this和对象原型、类型和语法、异步和性能。本文是对this和对象原型的学习总结。

  this,同样是js语法中一个超级bug的词汇,我表示每次看代码的时候,一看到this就头大,因为老是搞不准它绑定的对象会是谁。 在《你不知道的javascript(上)》一书中,对this的绑定分了四种情况,并且进行了优先级划分,同样是对每种情形使用案例来讲解, 如果只是知道this绑定的规则,还是挺容易的,困难的是能够实际应用到代码中。

  对于this的绑定机制,关键点是找到调用包含this语法函数的调用位置,然后根据调用位置来确定this绑定的对象。先上结论:

  • this一共有4中绑定方式:默认绑定,隐式绑定,显式绑定,new绑定。其中绑定优先级是:new绑定>显式绑定>隐式绑定>默认绑定。 也就是说上面情况存在并列或以上时,按照优先级来确定this绑定的规则;
  • 默认绑定:在独立函数调用的情况下(也就是调用语句没有上下文对象),使用默认绑定规则,及this绑定全局作用域。 需要注意的是,严格模式下并不存在默认绑定(this会绑定到undefind),“严格模式下”指的是包含this语句的函数体使用严格模式, 如果是调用位置的作用域使用的严格模式,则不影响默认绑定。
  • 隐式绑定:当包含this的函数倍调用的语句中存在上下文对象时,this绑定其上下文对象,注意只绑定上一层,例如obj1.obj2.foo(), 假设foo()中含有this语句,this绑定的是obj2,而不是obj1。
  • 显示绑定:使用call()以及apply()两个语句来调用包含this的函数时,this被绑定到两个语句中指定的对象之上。(此处需要知道两个语句的用法
  • new绑定:使用new来调用包含this的函数作为对象,来初始化另一个对象时,this被绑定到这个初始化的对象上面。

  以上,其实仔细研究确实很容易明白的,但是具体起来,就会衍生出很多例外和实际应用了,例如显式绑定中的硬绑定。

  1.默认绑定
  最简单的一种情况,时刻注意函数体中是否使用了严格模式。此外,请看以下代码:

function foo(){
  console.log(this.a);
}
var a = 2;
(function(){
foo();//2
})(); 

  尽管调用位置在另一个函数体内,但是没有上下文对象,this绑定的还是全局对象。

  2.隐式绑定
  也是一种很简单的情形,不过,会存在一种this丢失的情况。究其原因,主要是因为对函数的赋值,传递的实际是其引用位置, 最终参数的指向都是堆中的同一个位置(js中对内存划分两个区域,堆和栈。堆用于存放引用类型的值,既对象等;栈用于存放基本类型的值, 以及对引用类型值的引用指针
  如下代码:

function foo(){
  console.log(this.a);
}
var obj = {
  a:2;
  foo:foo
}
var bar = obj.foo;//此处的传参是将foo的引用位置直接传给了bar;
var a = "oops,global";
bar();//"oops,global"

  因为直接传递了引用位置,所以bar()调用foo()就和obj不存在关系了,则此时直接判断bar(),属于默认绑定。

  3.显式绑定
  显式绑定的规则已在上面叙述,注意显式绑定中存在的一种硬绑定情况(一般的显示绑定1依旧会出现this丢失,所以出现硬绑定概念,既不会出现this丢失) ,如下代码:

function foo(){
  console.log(this.a);
}
var obj = {
  a:2
};
var bar = function(){
  foo.call(obj);
}
bar();//2
setTimeout(bar,100);//2
bar.call(window);//2

  无论如何调用bar,this绑定的都是obj。硬绑定的引用就是可以创建一个重复利用的辅助函数,ES5中内置的方法bind()原理就是如此。 在一些笔试题中会出现使用原生js模拟bind()的题,建议可以记一下如下代码:
   function foo(something){ console.log(this.a,something); return this.a + something; } function bind(fn,obj){ return function(){ return fn.apply(obj,arguments); } } var obj = { a:2 } var bar = bind(foo,obj); var b = bar(3);//2 3 console.log(b);//5

  注意这段代码和上段代码的区别,区别正是使用bind()的意义。其区别是将foo和obj作为参数传给bind(),那么任何一个包含有this的函数作为参数 传递给bind(),其this都会绑定到另一个参数obj来执行(在这种情况下,绑定对象和包含this函数两者就都可以变化了)。 这就是bind()的意义。这段代码和ES5内置的bind()还存在差别,内置bind()的实际写法是foo.bind(obj)。

  4.new绑定
  首先需要清楚new的使用意义,使用new来调用函数,会自动执行下面操作:

  • 创建(或者构造)一个全新对象;
  • 这个新对象会被执行[[Prototype]]连接;
  • 新对象会绑定到函数调用的this;
  • 如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。

  如上,已经清楚解释了this会绑定到谁。

  搞清楚this绑定的四种规则,以及优先级,应该说对一般的函数使用及判定已经够用了,此外还需要注意ES6中的箭头函数,不适用于以上四种规则, 其绑定是根据外层作用域来决定this,且绑定无法被修改。在书中还提到了柯里化、软绑定等一些概念,如有兴趣,可以自行查书进行学习。