Javascript基础之-this

this应该算是前期比较容易混淆的一个关键字了，在这里，我就打算按照个人理解来讲一下

首先呢，this的值是跟运行时被调用的位置相关的，而不是词法做用域。

也就是说，他的绑定的值极可能是动态的，不一样的调用位置，极可能值就不同，好比说：

function foo() {
  console.log(this.a);
}
var a = 2;
var obj = {
  a: 3,
  foo,
}
foo();   //2
obj.foo();   //3
var c = obj.foo;
c();   //2

而后你会惊讶的发现，foo()经过不一样的形式调用，他最终的值是不同的，我们这一节主要就来说一讲他们里面的这些绑定的规则

 

默认绑定

 

独立的函数调用，它的做用域是做用在全局的，这种绑定规则最多见而且是优先级最低的一种绑定规则。来一个例子

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

在浏览器中执行，会发现，若是foo()做为一个函数单独调用，那么this指向的就是全局对象windows。

 

可是呢，也有一种例外，若是函数使用的严格模式的话，那么全局对象讲没法使用默认绑定，this将会绑定到undefined，仍是刚才的例子：

function foo() {
  "use strict"
  console.log(this.a);
  console.log(this === window);
}
var a = 2;
foo();  //Uncaught TypeError: Cannot read property 'a' of undefined

能够看到，foo直接抛出一个error，说this是undefined，取不到a，若是用到严格模式的时候，能够稍微注意下这个区别

 

我们刚刚的例子，说的是函数内用严格模式的话，讲没法使用默认绑定，那么若是是在函数调用位置用严格模式，会受影响吗

function foo() {
  console.log(this.a);      //2
  console.log(this === window);   //true
}
var a = 2;
(function () {
  "use strict"
  foo();
})();

很明显，能够看出，是不受影响的，还有一个问题，若是把var定义变成let会怎么样呢

function foo() {
  console.log(this.a);      //undefined
  console.log(this === window);   //true
}
let a = 2;
(function () {
  "use strict"
  foo();
})();

也就是说，let定义并不会加到全局变量中，这个和var的区别须要稍微留意一下

 

隐式绑定

 

这一条规则考虑的是是否有上下文对象，举个例子

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

在这种状况下，foo会使用obj的上下文对象来引用函数，此时的this指向的就是obj。

 

那么若是是嵌套对象这种的，会怎么处理呢？

function foo() {
  console.log(this.a);   // 1
  console.log(this === obj) //  true
  console.log(this === obj1) // fale
}
var obj = {
  a: 1,
  foo,
};
var obj1 = {
  a: 2,
  obj,
}
obj1.obj.foo();

能够看到，实际上此时foo中的this指向了离他最近的对象obj，也就是说，对象属性引用链的最后一层会影响它的调用位置

 

还有一种状况。

function foo() {
  console.log(this.a);
}
var obj = {
  a: 3,
  foo,
}
var a = 2;
var f = obj.foo;
f(); // 2

这种状况下，虽然f是obj.foo的引用，可是最后依然用的是默认绑定，而不是隐式绑定，因此说呢，我们能够这么理解，虽然他是对象中函数的引用，可是在执行的时候，调用的方式确是函数调用的方式，不是对象.属性()的方式，这块在使用的时候须要注意一下

 

显式绑定

很简单，显式绑定就是手动直接改变其this指向的一种方式，这个主要是用几种api来实现的

function foo() {
  console.log(this.a);
}
var obj = {
  a: 2,
};
foo.call(obj);
foo.apply(obj);
var f = foo.bind(obj);
f();

这个就是显式绑定的常见的三种形式

 

这三种形式的话，call和apply差很少，就不展开了，详情看文档就行，我们仔细看一下bind函数，来在看一个例子

function foo(num1, num2) {
  console.log(num1 + num2);  //5
  console.log(this === obj);    // true
}
var obj = {
  a: 1,
};
var f = foo.bind(obj, 2);
f(3);

这个能够看出，bind的用法和call以及apply仍是有一些差异的。

 

注意，若是显式绑定传入的是null或者是undefined的话，将会使用默认绑定规则，举个例子

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

 

new绑定

这个主要是new 函数()的绑定形式的，这个的this指向的是函数构造出的那个对象，new的时候，它的执行过程能够大概执行如下几步

1. 建立一个全新的对象

2. 这个新对象会被执行prototype链接

3. 新对象绑定到函数调用的this

4. 若是函数没有返回其余对象，那么new表达式中的函数调用会自动返回这个新对象

 

注意最后一句话，若是函数没有返回对象，那么就会返回函数调用的新对象，若是返回了一个对象呢，那么结果就是直接返回这个对象

var abc = {
  a: 10
}
function foo() {
  return abc;
}
foo.prototype = {
  b: 20
};
var a = new foo();
console.log(a === abc);   // true
console.log(a.b);         // undefined
function bar() {
  this.a = 10;
}
bar.prototype = {
  b: 20
};
var b = new bar();
console.log(b.a);   //  10
console.log(b.b);   // 20

 

以上四种常见的this绑定方式已经介绍的差很少了，那么问题来了，谁的优先级更高呢

 

很明显，默认绑定的优先级最低，就不展开说了

 

显式绑定与隐式绑定哪一个优先级高呢，举个例子

function foo() {
  console.log( this. a );
}
var obj1 = {
  a: 2,
  foo: foo
};
var obj2 = {
  a: 3,
  foo: foo
};
obj1.foo(); // 2
obj2.foo(); // 3
obj1.foo.call( obj2 ); // 3
obj2.foo.call( obj1 ); // 2

很明显，显式绑定优先级要高于隐式绑定

 

那么new绑定和显式绑定谁更高呢，来再看个例子

function foo(something) {
  this.a = something;
}
var obj1 = {};
var bar = foo.bind( obj1 );
bar( 2 );
console.log( obj1.a ); // 2
var baz = new bar(3);
console.log( obj1.a ); // 2
console.log( baz.a ); // 3

很明显，new的优先级会更高

 

因此，这样的话，优先级排序就出来了，分别为

new绑定 　>　显式绑定　＞　隐式绑定　＞　默认绑定

 

以上就是你们经常使用到的几种，不过es6出现了一种箭头函数，箭头函数理论上不能应用上面四种的任意一种，它的this是根据代码的词法做用域来走的，好比说

function foo() {
  return (a) => {
    console.log( this.a );
  };
}
var obj1 = {
  a: 2
};
var obj2 = {
  a: 3
};
var bar = foo.call( obj1 );
bar.call( obj2 ); // 2

结果已经很明显了，

 

好了，以上内容就讲完了，经过个人一些讲解，是否是有一点理解了呢，若是有任何的不一样意见，欢迎讨论哦

 

参考书籍《你不知道的Javascript》上卷

本文转载自 http://www.lht.ren/article/4