java中this的含义_Javascript中的this的含义

一、几个问题

JavaScript中的this代表什么？和Java对象里面的this或Objective-C里的self是否有相同的含义？

// demo 1

var a = 2;

function hello() {

console.log(this.a);

}

hello(); // a打印值为？

// demo 2

var a = 2;

function hello() {

console.log(this.a);

}

var obj = {

a: 3,

hello: hello

}

obj.hello(); // a打印值为？

// demo 3

var a = 2;

function hello() {

console.log(this.a);

}

var obj = {

a: 3,

hello: hello

}

var hello2 = obj.hello;

hello2(); // a打印值为？

// demo 4

var a = 2;

function hello() {

console.log(this.a);

}

var obj = {

a: 3,

hello: hello

}

setTimeout(obj.hello, 1000);

二、this的含义

JavaScript中this含义和Java中的this及Objective-C中的self不同，指的不是当前对象。Javascript中this的真正理解应该为当前执行函数的上下文，具体值和函数的调用方式有关。

function hello(context) {

console.log(context.a);

}

var obj1 = {

a: 1

}

var obj2 = {

a: 2

}

hello(obj1); // 1

hello(obj2); // 2

上面的代码模拟了一下this的用途，hello函数执行时传入不同的context时，会得到不同的运行结果，因为hello函数运行在不同的的上下文中。相比于上面的context方式，this提供了更加优雅机制来实现上面相同的功能。

function hello() {

console.log(this.a);

}

var obj1 = {

a: 1,

hello: hello

}

var obj2 = {

a: 2,

hello: hello

}

obj1.hello(); // 1

obj2.hello(); // 2

三、this所绑定的对象

在函数运行时，this所绑定的对象和该函数的调用方式有关系，一般来说有四种情况：

3.1、new绑定

JavaScript中，

var obj = {

key: value,

...

};

这种形式的就叫做一个JavaScript对象。除了这种对象的创建方式，也可以通过new关键字来创建

function hello(message) {

this.message = message;

}

var obj = new hello("HELLO WORLD!!!");

console.log(obj.message); // HELLO WORLD!!!

通过new关键字来调用hello时，hello里面的this就自动绑定到了新创建的对象obj上。

3.2、显示绑定

JavaScript对象都内置有call和apply函数，可以通过call或者apply来启动调用一个函数，并明确指定该函数中this所绑定的对象。

function hello() {

console.log(this.a);

}

var obj1 = {

a: 1

}

var obj2 = {

a: 2

}

hello.call(obj1); // 1

hello.call(obj2); // 2

3.3、隐式绑定

如果通过对象属性的方式来调用一个函数，那么该函数的this就会自动绑定到该对象上

function hello() {

console.log(this.a);

}

var obj1 = {

a: 1,

hello: hello

}

var obj2 = {

a: 2,

hello: hello

}

obj1.hello(); // 1

obj2.hello(); // 2

并且，在对象的属性引用链中，最后最后一层起到作用。下面的例子中，hello函数的this绑定的对象为obj1。

function hello() {

console.log(this.a);

}

var obj1 = {

a: 1,

hello: hello

}

var obj2 = {

a: 2,

obj1: obj1

}

obj2.obj1.hello(); // 1

有一点需要注意，隐私绑定绑定的是在表达式执行时所属的对象。现在我们回答demo3的问题，demo3的打印值应该为undefined(严格模式)或2(非严格模式)。

// demo 3

var a = 2;

function hello() {

console.log(this.a);

}

var obj = {

a: 3,

hello: hello

}

var hello2 = obj.hello;

hello2(); // a打印值为？

demo3的代码中，var hello2 = obj.hello; 语句将函数地址赋值给了hello2变量，该执行语句并不是函数调用而是一个赋值语句，所以这句可执行语句不能决定this要绑定的对象。真正决定this所绑定对象的是 hell2(); 这句。可以看到这句可执行语句并不符合隐私绑定的形式，实际上它是一个默认绑定，这是接下来要讲的内容。

3.4、默认绑定

什么是默认绑定？如果一个函数的调用不满足new绑定、显示绑定、隐私绑定，那么它就是一个默认绑定。如demo1、demo2。默认绑定后，this所绑定的对象有两种情况：如果JavaScript运行在严格模式下，this绑定到了undefined上；如果JavaScript运行在非严格模式下，this就绑定到了全局对象上。

3.5、四种绑定的优先级顺序

new绑定 > 显示绑定 > 隐式绑定 > 默认绑定。

下面的例子表明了，如果同时满足显示绑定和隐式绑定，则起作用的是显示绑定。

function hello() {

console.log(this.a);

}

var obj1 = {

a: 1,

hello: hello

}

var obj2 = {

a: 2,

hello: hello

}

obj1.hello.call(obj2); // 2

obj2.hello.call(obj1); // 1

下面的例子表明了，如果同时满足new绑定和显示绑定，则起作用的是new绑定。

function hello(message) {

this.message = message;

return {

message: message

}

}

var obj = {

message: ""

};

var hello2 = hello.bind(obj);

hello2("我是显示绑定！");

var hell3 = new hello2("我是new绑定！");

console.log(obj.message); // 我是显示绑定！

console.log(hell3.message); // 我是new绑定！

3.6、箭头函数

ES6中，新引入了箭头函数。箭头函数不满足以上四种规则，它的this对象来自外层作用域中this多绑定的对象。

function hello() {

return (a) => {

console.log(this.a);

}

}

var obj1 = {

a: 1

}

var obj2 = {

a: 2

}

var hello2 = hello.call(obj1);

hello2.call(obj2); // 1

可以看到，hello中返回的箭头函数实际上是一个闭包，该闭包捕获了hello的this对象，且无法通过显示绑定修改。

hello2.call(obj2)；语句虽然想要将箭头函数显示绑定到obj2对象中，但失败了。

四、一些解释

// demo 4

var a = 2;

function hello() {

console.log(this.a);

}

var obj = {

a: 3,

hello: hello

}

setTimeout(obj.hello, 1000);

demo4最后应用的是默认绑定，那么问题来了，如果我想要通过setTimeout函数调用hello，并且调用时绑定到obj对象上，那么我应该如何实现呢？见下面的代码所示：

function bind(fn, obj) {

return function(arg) {

return fn.call(obj, arg);

};

}

var a = 2;

function hello() {

console.log(this.a);

}

var obj = {

a: 3,

hello: hello

}

var hello2 = bind(hello, obj);

setTimeout(hello2, 1000);

可以通过bind来实现，bind是使用显示绑定，通过构造一个包裹函数，该包裹函数将hello强制绑定到obj对象上，从而实现我们的目的。bind函数的用途非常常见，以至于JavaScript已经内置了该函数，在3.5中的代码示例中我们已经展示过相关使用。

参看《你不知道的JavaScript(上卷)》