美文网首页
Javascript中的this的含义

Javascript中的this的含义

作者: 消逝在大夜里 | 来源:发表于2019-03-11 15:25 被阅读0次

一、几个问题

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

相关文章

  • Javascript中的this的含义

    一、几个问题 JavaScript中的this代表什么?和Java对象里面的this或Objective-C里的s...

  • this指向性的问题汇总

    一、因为JavaScript中的this是在运行期绑定的,因此JavaScript中的this关键字具备多重含义。...

  • javascript中的this指向

    由于javascript中的this是在运行期绑定的,所以javascript中的this的含义很丰富。它可以是全...

  • ECMAScript与JavaScript的区别?浏览器、Nod

    ECMAScript与JavaScript通常都被用来表达相同的含义,但是JavaScript的含义要比ECMAS...

  • Ajax

    ajax 含义&作用 含义:AJAX = Asynchronous JavaScript and XML(异步的 ...

  • 深入浅出this

    What's this? 由于运行期绑定的特性,JavaScript 中的 this 含义非常多,它可以是全局对象...

  • What's this?

    What's this? 由于运行期绑定的特性,JavaScript 中的 this 含义非常多,它可以是全局对象...

  • What's this?

    What's this? 由于运行期绑定的特性,JavaScript 中的 this 含义非常多,它可以是全局对象...

  • this & 原型链 & 继承

    What's this? 由于运行期绑定的特性,JavaScript 中的 this 含义非常多,它可以是全局对象...

  • this

    What's this? 由于运行期绑定的特性,JavaScript 中的 this 含义非常多,它可以是全局对象...

网友评论

      本文标题:Javascript中的this的含义

      本文链接:https://www.haomeiwen.com/subject/hilbpqtx.html