Javascript基础之-this
作者:小辞 标签:Javascript

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》上卷