JavaScript 中 this 的详解

cyrils 发布于2019-08-21 15:27 / 2248人阅读

摘要：作为构造函数调用中没有类，但是可以从构造器中创建对象，并提供了运算符来进行调用该构造器。构造器的外表跟普通函数一样，大部分的函数都可以当做构造器使用。如果构造函数显式的返回一个对象，那么则会指向该对象。

this 的指向

this 是 js 中定义的关键字，它自动定义于每一个函数域内，但是它的指向却让人很迷惑。在实际应用中，this 的指向大致可以分为以下四种情况。

1.作为普通函数调用

当函数作为一个普通函数被调用，this 指向全局对象。在浏览器里，全局对象就是 window。

window.name = "linxin";
function getName(){
    console.log(this.name);
}
getName();                   // linxin

可以看出，此时 this 指向了全局对象 window。
在ECMAScript5的严格模式下，这种情况 this 已经被规定不会指向全局对象了，而是 undefined。

"use strict";
function fun(){
    console.log(this);
}
fun();                      // undefined

2.作为对象的方法调用

当函数作为一个对象里的方法被调用，this 指向该对象

var obj = {
    name : "linxin",
    getName : function(){
        console.log(this.name);
    }
}

obj.getName();              // linxin

如果把对象的方法赋值给一个变量，再调用这个变量：

var obj = {
    fun1 : function(){
        console.log(this);
    }
}
var fun2 = obj.fun1;
fun2();                     // window

此时调用 fun2 方法输出了 window 对象，说明此时 this 指向了全局对象。给 fun2 赋值，其实是相当于：

var fun2 = function(){
    console.log(this);
}

可以看出，此时的 this 已经跟 obj 没有任何关系了。这时 fun2 是作为普通函数调用。

3.作为构造函数调用

js中没有类，但是可以从构造器中创建对象，并提供了 new 运算符来进行调用该构造器。构造器的外表跟普通函数一样，大部分的函数都可以当做构造器使用。当构造函数被调用时，this 指向了该构造函数实例化出来的对象。

var Person = function(){
    this.name = "linxin";
}
var obj = new Person();
console.log(obj.name);      // linxin

如果构造函数显式的返回一个对象，那么 this 则会指向该对象。

var Person = function(){
    this.name = "linxin";
    return {
        name : "linshuai"
    }
}
var obj = new Person();
console.log(obj.name);      // linshuai

如果该函数不用 new 调用，当作普通函数执行，那么 this 依然指向全局对象。

4.call() 或 apply() 调用

通过调用函数的 call() 或 apply() 方法可动态的改变 this 的指向。

var obj1 = {
    name : "linxin",
    getName : function(){
        console.log(this.name);
    }
}
var obj2 = {
    name : "linshuai"
}

obj1.getName();             // linxin
obj1.getName.call(obj2);    // linshuai
obj1.getName.apply(obj2);   // linshuai

这两个方法在js中都是非常常用的方法，可以阅读下一篇：javascript 中 apply 、call 的详解。

更多文章：lin-xin/blog

GPU云服务器云服务器 javascript中this详解 javascript的this javaScript中的this java中this

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88193.html

JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0
JavaScript之this对象详解

摘要：再来看一个小的示例淘宝腾讯淘宝为什么输出的依然是淘宝呢调用的是对象中的方法，方法里面有一个定时器，而定时器的一个参数是这里的指的就是的对象，然后方法里面有调用了，但是定时器中的指的是对象，所以最终调用的是对象中。 1.看前热身看一段代码 var name = javascript; var obj = { name:js, foo:f...

Integ 2019-08-22 13:56 评论0 收藏0
javaScript原型及原型链详解（二）

摘要：当然这还没完，因为我们还有重要的一步没完成，没错就是上面的第行代码，如果没有这行代码实例中的指针是指向构造函数的，这样显然是不对的，因为正常情况下应该指向它的构造函数，因此我们需要手动更改使重新指向对象。第一节内容：javaScript原型及原型链详解（二）第一节中我们介绍了javascript中的原型和原型链，这一节我们来讲利用原型和原型链我们可以做些什么。普通对象的继承 ...

widuu 2019-08-20 16:37 评论0 收藏0
JavaScript 中 apply 、call 的详解

摘要：参数和是放在数组中传入函数，分别对应参数的列表元素。而原函数中的并没有被改变，依旧指向全局对象。保存原函数保存需要绑定的上下文剩余的参数转为数组返回一个新函数下一篇介绍闭包中闭包的详解。 apply 和 call 的区别 ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法，它们的应用非常广泛，它们的作用也是一模一样，只是传参的形式有区别而已。 apply(...

Meils 2019-08-21 15:27 评论0 收藏0
JavaScript队列数据结构详解

　　今天我们讲讲JavaScript队列数据结构详解。什么是队列？　　队列是一种先进先出的数据结构，队列有两种操作：插入和删除；入队和出队。简单来说就是允许插入的一端称为队尾、允许删除的一端称为队头；　　如下图展示了栈这个数据结构：　　JavaScript中的队列　　要知道JavaScript中没有有关队列的数据模型，因此我们需要通过数组进行模拟，当数组中提供的push()和shift()选...

3403771864 2022-09-21 22:28 评论0 收藏0