细说 Javascript 函数篇（二） : this 的工作机制

ZoomQuiet 发布于2019-08-21 12:16 / 2422人阅读

摘要：与其他编程语言相比，对的使用是一套完全不同的机制。在五种情况下的值是各有不同的。调用一个函数时在这里，同样指向全局对象。此时在函数内，指向新建的对象。尽管，晚绑定初看上去是个不好的决定，但实际上这是原型式继承工作的基础。

与其他编程语言相比，Javascript 对 this 的使用是一套完全不同的机制。this 在五种情况下的值是各有不同的。

全局作用域下

this;

当在全局作用域中使用 this,它指向全局对象。
这里详细介绍下全局对象：

全局对象(Global object) 是在进入任何执行上下文之前就已经创建了的对象；
这个对象只存在一份，它的属性在程序中任何地方都可以访问，全局对象的生命周期终止于程序退出那一刻。
全局对象初始创建阶段将 Math、String、Date、parseInt 作为自身属性，等属性初始化，同样也可以有额外创建的其它对象作为属性（其可以指向到全局对象自身）。例如，在 DOM 中，全局对象的 window 属性就可以引用全局对象自身。
所以在 console 内输入 window 和 this.window 是一样的。

调用一个函数时

foo();

在这里，this 同样指向全局对象。

调用一个方法时

test.foo();

在这个例子中，this 将会指向 test 对象。

调用一个构造函数时

new foo();

一个函数在被调用时和关键字 new 一起使用，我们称之为构造函数。此时在函数内，this 指向新建的对象。

显式设置时

function foo(a, b, c) {}//

var bar = {};
foo.apply(bar, [1, 2, 3]); // array will expand to the below
foo.call(bar, 1, 2, 3); // results in a = 1, b = 2, c = 3

当使用 Function.prototype 的 apply 和 call 方法时，this 的值为显式设置为该方法的第一个参数。
因此，不同于调用一个函数时的规则，上例中 this 指向了 bar。
这里介绍下 call 和 apply 方法：

  call 方法:

  语法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

  定义：调用一个对象的一个方法，以另一个对象替换当前对象。

  apply 方法：

  语法：apply([thisObj[,argArray]])

  定义：应用某一对象的一个方法，用另一个对象替换当前对象。

在这里我们要注意一点，在对象的字面声明时，this 不能用来指向对象本身。如下：

var obj = {me: this}

这里，this 不会指向 obj，this 的应用只限于以上五种情形。

总结

尽管上述情形在大多时候是有意义的，但是第二种情形（即调用一个函数时）的 this 实际上是很少有用途的，这被认为是 Javascript 设计上的另一个错误。

Foo.method = function() {
    function test() {
        // this is set to the global object
    }
    test();
}

根据我们上面所述，这里的 this 将会指向全局对象，而不是 Foo 函数。
为了在 test 中获得指向 Foo 的途径，我们需要在 method 内部创建一个局部变量指向 Foo。

Foo.method = function() {
    var that = this;
    function test() {
        // Use that instead of this here
    }
    test();
}

that 只是普通的变量名，但是它经常被用来指向外部的 this。
还有一个比较有意思的地方与函数别名相关，即将一个方法赋值给一个变量时。

var test = someObject.methodTest;
test();

上例中，test 将会被当做一个普通函数看待，所以根据第二种情形（即调用一个函数时），其内部的 this 将会指向全局变量，而不是 someObject。
尽管，this 晚绑定初看上去是个不好的决定，但实际上这是原型式继承工作的基础。

function Foo() {}
Foo.prototype.method = function() {};

function Bar() {}
Bar.prototype = Foo.prototype;

new Bar().method();

此时，当 method 被调用时，它将指向 Bar 的实例对象。

参考

http://bonsaiden.github.io/JavaScript-Garden/#function.this

云服务器 GPU云服务器 javascript的this js中的this机制工作机制 javaScript中的this

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

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

细说 Javascript 函数篇（一） : 函数声明和函数表达式

摘要：函数表达式对于函数声明，函数的名称是必须的，而对于函数表达式而言则是可选的，因此，就出现了匿名函数表达式和命名函数表达式。这是因为对命名函数处理的机制，函数的名称永远在函数内部的作用域中有效。 function 是 Javascript 中的第一类对象，这就意味着函数可以像其他值一样被传递。一个最常见的用法就是将一个匿名函数作为回调函数传递到另外一个异步函数中。函数声明 func...

hizengzeng 2019-08-21 12:16 评论0 收藏0
细说 Javascript 函数篇（五） : 构造函数

Javascript 中的构造函数与其他语言相比也是不同的。任何通过关键字 new 调用的函数都可以当做构造函数。在构造函数体内，this 指向新创建的对象。如果构造函数体内没有显示的 return 表达式，那么我们就默认返回 this，也就是新建的对象。 function Foo() { this.bla = 1; } Foo.prototype.test = function()...

sPeng 2019-08-19 14:42 评论0 收藏0
细说 Javascript 对象篇（二） : 原型对象

摘要：并没有类继承模型，而是使用原型对象进行原型式继承。我们举例说明原型链查找机制当访问一个对象的属性时，会从对象本身开始往上遍历整个原型链，直到找到对应属性为止。原始类型有以下五种型。此外，试图查找一个不存在属性时将会遍历整个原型链。 Javascript 并没有类继承模型，而是使用原型对象 prototype 进行原型式继承。尽管人们经常将此看做是 Javascript 的一个缺点，然...

lansheng228 2019-08-19 14:40 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

李昌杰 2019-08-16 10:40 评论0 收藏0
SegmentFault 技术周刊 Vol.32 - 七夕将至，你的“对象”还好吗？

摘要：很多情况下，通常一个人类，即创建了一个具体的对象。对象就是数据，对象本身不包含方法。类是相似对象的描述，称为类的定义，是该类对象的蓝图或原型。在中，对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中，对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了，离年底老妈老爸...

Lyux 2019-06-28 13:32 评论0 收藏0